How to get started unit testing React components with Jest & Enzyme

being able to build components in react is all well and good but to be considered a professional software engineer you have to know how to test them watch this video to learn how we're going to be using a couple of libraries to do our react unit testing the first is jest from jest jio just is a JavaScript unit testing library used by Facebook there are some competitors for it but it is probably the most popular we'll also be using enzyme enzyme is a testing utility from Airbnb which is meant specifically for testing react components it can be used in conjunction with jest to test our components to demo this I've created a new react app with the create react app utility if you don't know about this util check out my getting started with react video create react app installs jest and sets up unit testing for us so we don't have to worry about that if we take a look in the project's SRC folder you'll see that there's already a file apt SJS which tests the app component using jest so if we go in the terminal in the project's root directory and type in npm run test it will run gest which we'll pick up on this file because it's post fixed with dot test cas and it will run it using jest as you can see from the output the test has passed the tests actually run in watch mode which means each time we save a file they'll be triggered and run again so we're going to exit the test Runner and we're actually going to delete app test RS as we don't want it running each time this is just the save time for the video because we don't care about testing the app component I've added a component called my component to the project and this is what we're going to be testing the component is a div and it contains a button and another div with some text the ID array is pressing the button toggles whether or not the text if is shown so let's test it so let's create a test file for this component it will be my component don't test Jas I'm going to do a very simple and also very useless test first just to show you a little bit of what chest can do just has a function called describe describe groups related tests into a block to create a test suite this makes our test output more readable since we're testing my component we will do a describe to contain all the my component tests first arguments of this function call is a string which will be the name of the test suite so we will call it my component next is a function that contains all the tests for this suite this suite will contain a series of tests and we define a test using the it function first argument is a string to say what the test is for for now we'll just put should be true next is a function containing the body of the test this will be a contrived example so we create a Const port foo and we set it to be true to test that foo is indeed true we assert this using the expect function and a matcher so we do expect foo to be true so expect takes the valid test and the matcher defines what we expect the value to be like in this case equal to true it does exactly like it reads really so we expect food to be true to be is just one of the dozens of matches that comes with jest and simply does in equality check there are many more check there Jess documentation to discover them all for yourself at jest J s dot IO so we'd expect that to pass as foo it's true now let's do a failing test we add a new test doing it should be false we create through again and again we set it to be true then we do expect foo to be false this assertion of course will fail and this will cause the tests not to pass in the terminal we do npm run test and let's see what happens so actually both of our tests has failed which is surprising because that means we failed to assert something that is true is true there's obviously a problem with the code and inspecting it we can see that to be on the first test should be with an uppercase B but it's not and so that caused the test to fail when it should have passed so we just save the tests rerun because it's in watch mode and now we get this should be true test passing there should be false test failing so this is at the very heart of what unit testing is we take some code we make assertions about what it does we're saying we expect this piece of code to do this and if it doesn't it means there's a bug all that the code is wrong in some way a single react component is a unit of code so we want to be able to say we expect this component as x y&z and if it doesn't the code for the component is wrong now there are some problems testing react components to work react components need to be mounted to the browser's Dom but we're on the command line here we're not in a browser there is no Dom there are utilities that give us a mock Dom but mounting to them can be slow and we want fast tests the dome is also global and we want our tests to be self-contained so they shouldn't modify something global there's also other concerns for example how the hell do we test user events from the Clun like say in my component there's a button and we want to be able to test what happens when the button is clicked how do we do this enzyme helps us with all of this we need to install enzyme and the adapter it uses to interface with the version of react we're using so we're going to do npm install - - saved dead enzyme and then enzyme - adapter - react - 16 I'm using version 16 point acts of react but check the enzyme github for the right adapter for you to use based on whatever version of reactor you're using in our test file we need to do some imports we need to import react and we need to import enzyme and also a function called shallow we need to import something called adapter from enzyme - adapter - react - 16 lastly we also need to import my components as we want to test it we need to configure enzyme to use the adapter to make it work now this would usually be done in a test setup file so you don't have to do it in each and every test see the it chests and enzyme Doc's on how to do this for now for simplicity we'll just do it within this test so it's enzyme doc configure and then you pass it an object with a key of adapter and a value of new adapter so what is it we want to test we have a component that by default shows the text if and hides it when the button is clicked so let's test for those things our first test will be that it should show a text so in order to test the component we need an instance of it which we can easily examine and make assertions against this is where enzymes shallow function comes in it allows us to render a react component to an object in memory instead of to the Dom which makes it faster it wraps that object in a wrapper it gives us functions to easily examine the rendered component so we create a constable wrapper and the value is the result of calling shallow and passing it a my component element one thing the wrapper does is it allows us to search through the elements rendered using CSS style selectors a bit like you would with jQuery so if we look at our component the component we're interested in is a div with some text in it and it itself sits within this outer div so going back to our test we create a new Const text and it's going to be the result of doing rapid find we'd find finding elements based on a selector and the selector we want for a div within a div is just div div since we are testing that the text div exists a good test would be that this element contains the correct text we're expecting text itself is also a wrapper and rappers have a function also called text confusingly that return a text node if it exists within the matched elements so we can do expect text dot text to be text goes here which is the text that should be within the div so we save this and then just clear that from the terminal and then we do NPM run test again and there we go the test passes now you want to test that after clicking the button the text gets hidden or rather removed altogether so a new test should hide text when button is clicked seems simple enough so again we do another shallow render of my components and again we use find to find the element the button element in this case so now our problem is how the hell do we click the button without a user interface enzyme again comes to the rescue it has a function called simulate that can simulate Dom events so we do button dot simulates and we pass a string click and this will simulate a click event on the button so now we simply find the text if again now this time of course it shouldn't exist so the text is again a wrapper and the wrapper has a length field which gives us the number of matched elements so we can expect that to be zero so the text just doesn't exist if that's true so we rerun the unit tests and that's 2nd test the should high text when button is clicked has failed because that text wrapper has a length of 1 when it's meant to be 0 so the text still exists so it appears our test has found a bug which is great so if we look at the code for the component we find our bug the text if is not shown conditionally so we just fix that we then save and the tests will already be re running because of watch mode and let's see now we have green lights and we can be sure our component works even without viewing it in the browser thanks to unit tests I have new videos going out regular as clockwork every Monday Tuesday and Wednesday at 9 a.m. Eastern time click that subscribe button now and don't miss them

Channel: WellPaidGeek

Views: 37,609

Rating: 4.9593906 out of 5

Keywords: JavaScript, Jest, React, enzyme, webdev

Id: XUlGzJLZe2Q

Length: 13min 0sec (780 seconds)

Published: Mon Nov 19 2018

Reddit Comments

[u/kdnordahl]

Great intro to Enzyme and jest.