More

    React Enzyme: Installation, Set-up and Creating a First Test

    An Introduction About React Enzyme: 

    A very important aspect of web development is testing. This is especially true when applications made on top component libraries such as React are to be considered. There are many tools and libraries for testing but what makes Enzyme stand out is the flexibility that it provides. The fact that it is very easy to develop tests for the React code that we have. Enzyme is JavaScript utility for testing purposes that makes it easy to assert, traverse and manipulate React Components’ output.

    It is created by Airbnb group. React Enzyme adds so many utility functions that facilitates the easy rendering, finding and interaction with the elements. Enzyme’s API is meant to be flexible and it achieves that by mimicking jQuery API for DOM traversal and manipulation.

     

    Installation and Set-up: 

     

    To get started with React Enzyme, one way to install it is to do it simply via npm. We need to install React Enzyme with Adapter component that corresponds to React version or other UI library of Component. One thing we need to make sure is that we need to get. Node of version higher than 8.10.0 on our local development device.

     We can refer to nvm documentation to confirm which version we already have installed on our local development machine. We can make use of the Create React App for setting up of a React application and it is so easy to use that we can get it up and running in no time.

    There is no need of installing and configuring tools such as Babel or Webpack. They are already preconfigured and hidden so that developer can just focus on the code. This is going to make use of npx, that is an npm package runner that comes with npm versions greater than 5.2 and the use is quite direct.

    For creating the application we are trying to make, we can run the following command in our command prompt. It creates and initialize project with lots of Node modules that are present and important for development of React App.

    cd yourprojectdirectory
    npx createreactapp logrocketreactenzymeapp

     

    The structure of generated files and directories structure are as follows:

     

    If we want to check out the application in process, we just need to type npm start in the command in the root folder of the application. This will result in opening of the index page in the device browser at http://localhost:3000 . Once we are done with this, its time to move on to the Enzyme setup. We are using React 16 for our project so the command given must install the Enzyme properly:

    npm i savedev enzyme enzymeadapterreact-16

    Creating The First Test of React Enzyme:

     

    For using the React Enzyme’s features in our React app, we need to tell our React App that Enzyme is installed and is available for use. We need to remember that we have to reference the package for the adapter that we installed before and set up the adapter properly that we want to use with Enzyme. For doing this, we need to go to the src folder and make a new file with the name of enzyme.js .

    This must be enough for exporting various types of Enzyme renders. Then, we have to create another folder named tests in our src/components directory for saving our test result files. Before creating our tests, it is very important for us to mention the three different types of renders that are supported by Enzyme. 

    Shallow:

    This render type basically renders one single component every time. Saying otherwise, The child elements are not considered by Enzyme for the test. If we were to consider a situation were we wanted to test out the components itself isolated from the other components around it or inside of it. This render method can be used when we want to try unit testing and not a fully integrated testing.

    Mount:

    The mount render type is quite opposite to the shallow type. The mount type works with full DOM rendering and it includes all the child elements. This is very ideal for situations where there are intensive interactions with the other elements such as the DOM API. 

    Render:

    This type renders to the static HTML. This type of render includes all the child elements that are present. While at the same time, this prevents access to all the React lifecycle methods that are there. This in turn, provides very less functionality and flexibility for the testing. But besides this fact, this type of render is much faster when compared to others. This is built on top of Cheerio which is a DOM traversal and manipulation API based on the jQuery core meant for the server.

    So by using this, we can have the utility of jQuery at our hands. 

    Now that we are fully aware of the render types, it is time to have some tests. The first thing we need to do before starting to test is importing the three render types in the beginning of the file from enzyme.js that we have already created once. For optimal testing, we should consider four test scenarios for each type of rendering. 

    The first one is for the type: render, in which what we are doing is basically asking Enzyme to render an Ordered list with a given array that is animal parameters and we assert the test conditions with the use of expect() function. 

    The wrapper object that we have represents the render() result and within that what we can do is easily call to find the CSS classes options of the items of our children and the value that regards to the classes of inner list elements. Here, we are also testing the child elements.

    The nest test focuses on a list in which no elements are passed. Here, the shallow render type is being used that makes the methods like exists() available to us.

    The other two remaining tests make use of the mount function. This returns the full DOM to the wrapper object. Another example of React’s lifecycle method is contains(). 

     

    Testing the Form Components:

    We can even go much further and test out things such as forms, its elements, events and many more things that can be tested. Let us take a look at another example to help us better understand the practical scenarios:

    This is a common structure for the form component. Except for the fact that the state that we are keeping here must be updated every time there is an occurrence of a blur event in any of the inputs. If we take a look at the login.test.js file, we will find that there is nothing new in the first test suite and we are just checking the existence of the form element. Whereas, the second and the third tests are making use of the simulate() function for simulating the event in a field which is onBlur in our example.

    Once it has been set that onBlur will trigger that update of the state after every input field, it can be checked by us whether the same state was stored or not. This is a great example of a test of behavior, where we are testing what will happen after React Enzyme forces a simulation of any event in the React component. 

     

    Conclusion: 

    Here, only a few methods have been presented by us among the vast number of methods that are provided by Enzyme. React Enzyme is a very dynamic and vast environment for one to create their test suits and for exploring many of the different testing scenarios that exist. The scenarios may include integration, semantic, unitary behavioral and so on. For gaining further in depth knowledge about React Enzyme and its functions, You can refer to their official document page. It provides information on additional configurations and even more.

    With React Enzyme, one can aim for a more well tested web application and make it more trustworthy for use. It is even possible for the developer’s community to create additional adapters that will help Enzyme work with various other libraries. Enzyme is totally opinionated regarding which test runner or assertion library is used. It is compatible with most of the test runners and libraries that are available. There are document examples of Enzymes using mocha and chai but it is possible to extrapolate a framework of choice. 

     

    Recent Articles

    React Ecommerce Templates

      React is the most popular library for the development of e-commerce applications. React eCommerce templates for building eCommerce apps are a combination of several...

    What is React Yarn? How to Install It?

    Introduction to React Yarn The technical community shares hundreds and thousands of pieces of code every day in the community of JavaScript. As a result,...

    React Editor: Features, Installation and Limitations

    Why do we need the react editor?  There is a large range of code-based editors like CodeMirror, Monaco, Ace, etc., that provide us with the...

    React Babel: Everything You Need to Know About It

    Introduction About React Babel: React Babel is a very well known and well-implemented open-source transcompiler of JavaScript. We use it mainly to convert the ECMA...

    React Websocket: Usage, Installation and much more

    Introduction About React Websocket:  If you want to create a long-running connection between a client and a server then use React Websocket. Let's take an...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here