How to write React Tests using Jest and Enzyme — part 1
Nowadays developers and tech recruiters are talking about Test Driven Development in everywhere; In the job descriptions, conferences, job interviews and so on. but I think the main importance of understanding how to and why to write tests is in the project maintenance and long-term development.
Long-term development with a team (every developer writes different parts of code which different ingredients binding and collaborating together at the end) and confidence in deploying a project to production without writing and running code is a nightmare!
So, anyway, we have to learn writing and using test. and this article is an easy and quick way to learn how to write tests which include fundamentals of writing test and TDD and in the following, we are going to learn how to write tests using Jest and Enzyme for React applications. (you can use Jest for any other JavaSciprt based application like NodeJs/Angular applications, too.)
Different Types of tests
We have different types of tests in software development for testing different parts and functionality of our application/software:
- Unit tests: for testing functionality of a single function or class. Unit tests should cover all small pure functions of the application.
- Integration tests: for testing relations and communications between two parts of our application (eg: is MongoDB working with express correctly?). Integration tests are all about cross communications between different units of code.
- Automation tests: for testing if our application working and behaves as expected in the browser? Automation tests are UI tests that are always run on the browser or browser-like environment. It includes testing things like clicking, typing, and scrolling.
Testing Tools
There are various tools and libraries for writing tests in JavaScript for different purposes. some of these libraries used for a specific part of the test and some of them supports more parts.
1- Frameworks
Includes Jasmine, Jest, Mocha, and Cypress.
Frameworks are comprehensive and support various tasks to write and things to do. for example, most of them have its own assertion, test runner and so on.
2- Assertion Libraries
Includes Jasmine, Jest and Chai.
These libraries help us to reduce the size of code for writing assertions. By using these libraries we no longer need to write complex if/else if statements to check if a given value is equal/bigger/smaller/&… with our expected value or not. Instead, we can simply check them using one line of code like below:
3- Spies, Stubs & Mocks
Includes Jasmine, Jest and Sinon.
Mocks are fake methods with pre-programmed behaviour. We use mocks to verify a specified method getting called with what parameters and things like that.
Stubs, on the other hand, made for a little bit different task; using stubs, we are replacing a specific method of a component or class with our fake method to simulate the behaviour of that for testing a scenario.
Spies wraps a real object and see when, how time, and with what parameters is called.
4- Snapshot Testing
As I know, there is just one library which supports snapshot testing; Jest.
As Jest’s documentation says, snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly.
It renders a UI component, takes a snapshot from it and save it in a specific directory in our project and then compares the current version with that in every time which we run the test to check if there are any changes or not.
We must use them just for structures that changing them can cause unexpected problems.
5- Test Runners
Includes Jasmine, Jest, Mocha, and Karma (karma is for running tests in browser).
Every written test need a runner to run. some of the testing libraries have their own runners to run the written tests (like Jasmine and Jest) and some of them need an external library to run the tests.
6- Code Coverage
Includes Istanbul and Jest (It uses Istanbul. too!)
It’s important to determine how the percent of our code is being tested and is reliable. for getting wide information about this, we have to use test code coverage tools like Istanbul.
As you probably noticed Jest supports all of these parts and it makes you needless to use other libraries especially if you want to write your tests for the react-powered app. So, I’m going to show you how we can write tests via Jest.
end of part 1.
🇬🇧💼 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.
