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 Fragment: Find out what we encountered.!

      React Fragment: Hello Devs, in my journey of learning react I came across some frontend conditions where I had to render multiple react components,...

    React Admin: Documentation | Features | Dahboard | Templates

      React Admin is a framework for the front-end development of data-driven applications. That is operating in a browser over the top of REST or...

    React Hooks

      A hook is a component that allows us to use the features of React and state without defining a class. This feature is added...

    React Animation: A definitive guide

    React Animations Add-ons The ReactTransitionGroup add-on is a lower-level Applications Program Interface (API) component for creating react animations. And the ReactCSSTransitionGroup, is a component used...

    Create React App: A Complete guide for Beginners

      Create React App is the modern way of building an official Single Page React Application. It sets up a comfortable environment for building react...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here