How to write React Tests using Jest and Enzyme — part 2
in part 1, we learned different types of tests and some of the testing tools. If you haven’t read Part 1, I suggest you read it first:
Test React applications using Jest and Enzyme
Pre-requirements
First of all, we need to install Jest and Enzyme on our project using npm, as we know testing is a development based task and because of this we are using — save-dev flag to add it to our dev-dependencies section in package.json:
Then, we need to make a decision about directory structure of our test files in our project; there is two way to store the test files in our project: first, save them in a separated directory called __tests__ as normal .js files and second, save every single component’s related test file behind of that with the same name ending with .test.js or .spec.js
Writing the first test
Let’s start with a simple assertion test via Jest:
As you might guess, If we run this test, It will pass because 2+2 is equal to 4.
Grouping the tests
If we want to test a group of related things, we can write related tests in a group using describe as down below:
Testing async functions
The way of testing async functions is a little bit different than the normal functions. As we know, there are two types of async function:
If we use them as below:
It does not work as expected (test will ends successfully without running the expect()).
So, for async (promise) functions, we need to use expect.assertions(count of expects in the test) to make sure all of them ran, like below:
But, it will not pass and we need to take one step more to make it complete; we can take this step in two way:
1- using done:
2- using return:
Mock functions in Jest
If we put real fetch to all of our tests, It will take a lot of time to completely run all of our tests, In addition, Many times there are some uncontrollable resources in out test and we have to mock them, so, Jest provides us with a solution called mock functions (also known as “spies”) to mock the fetch event.
It makes out tests run time much faster, but bear in mind, in some situations, we need to use real fetch based on the importance of that piece of the code. Here is a basic instruction to mocks in Jest:
There are lots of methods for different kinds of stuff provided for Jest mock function like toHaveBeenCalledWith(), mockReturnValue(), and more which you can see in here.
Enzyme
Enzyme makes us easily able to test react component’s output. to get started with Enzyme, we need to install enzyme and enzyme-adapter-react-16 npm packages as dev-dependencies in our project, then, we need to make a file with setupTests.js name to configure Enzyme to use:
Then in the test file of a component (eg: card.test.js):
Snapshot testing in Enzyme
To avoid from rendering the component on every code edit, we can take a snapshot to store and compare our code with that snapshot to detect if there are any changes or not, and also, we can press u key in the terminal to take a new snapshot if there are any changes.
How to write a test for app component
In somewhere like app component, which could become so complex, we need to split its content into another component and then, we actually don’t need to test out app component because it’s made from redux related things and/or router and all of these things are valid and official components which have been tested by their developers. and then we just need to test our inner content component!
How to run a special code before then each test
Jest provides us with a function called beforeEach() and we can use it to run our custom code before then each test. It also has another function called beforeAll() to run our custom code before then all of our tests. you can see a full list of such functions in here.
for example:
Accessing the component’s methods in the test file
We can use the instance() method to get access to the component’s methods like this:
Conclusion
As you probably realized, testing and writing tests is a massive and wide topic and no one can’t teach it in just one or two posts, but in these posts, I just tried to give you the vision and how to start to become an expert path. Now you know the concepts and different aspects of testing and you can go ahead and continue with reading documentation of these libraries/frameworks.
🇬🇧💼 By the way, I’m looking for a visa-sponsored job in the UK. If you are looking someone like me to hire, send me a message.
