React Testing & an Overview of Jest
In this article I will be going over testing, specifically in regards to React. Testing is something that is extremely important in the tech world, as it provides conciseness to our code. We will discuss what testing is, the general types of tests, specifically how we test react components according to the react documentation site, and finally go over some tools for testing. Hopefully you find this article helpful on your coding journey!
What is testing and why is it important to write tests?
Testing is in short, code that you write in order to verify that your application is behaving the way you intended. It is important to write tests because testing provides:
Documentation
Tests are a specifications for how our code should work, the closer to the code that your documentation is the more up to do date your tests will be,
Prevent Regression (recurrence of bugs)
Consistency
Verify that engineers are following best practices and conventions for your team
Comfort & Confidence
Feeling assured that your program is working correctly when you push it up
Productivity
Writing tests allows us to ship quality code faster
General types of tests
There are different ways to test that are for the most part universal in programming. Here we will provide a general overview of them:
End-to-End tests (running a complete app)
When you go through your app in its entirety in order to simulate user behavior.
Integration
Verify that multiple units work together. You may not be making HTTP requests, just simulating the behavior of a browser
Unit
Verify the functionality of a single function, component, method, procedure, module, object, etc.,
Static
Catch typos and errors as your write code
Ways to Test React Components
According to the reactjs.org site you can test React components similar to testing other JavaScript code:
Rendering component trees in a simplified test environment and asserting on their output — in the documentation they mainly refer to component trees
Also running a complete app or end-to-end tests in a realistic browser environment
Things to consider when choosing your testing tools:
·When considering testing tools you should note that some tools work quickly but do not browser behavior precisely, on the other hand you may have tools that may use a browser environment but are slower in iteration speed and not is persistent regarding continues integration server.
How much to mock
Regarding components it can be hard to tell if you should do a “unit” test (remember, this is the functionality of a single function or component) or an integration test which incorporates how the components/functions work together.
There is no right answer here, when choosing your testing tools it is totally dependent on your project needs, deliverables and also your team.
Jest
is a JavaScript testing framework/ test runner, assertion library and utilities for mocking. It is used by facebook to test their React applications, but can also work outside of React applications.
Jest is favorable because of:
- Minimal configuration
- Watches only changed files
- Fast
- Snapshot testing (explained later)
- Coverage out of box
Setting up
Using create React app
Setting up without Create React
If you have an existing application then you will need to install a few packages to make everything work together. You’ll need:
There are also jest command line options, with the jest command line runner you can just run
to view all the available options. All of the configurations can also be specified through the CLI:
Important test scripts for every project
test:
goes through all the test files and executes them. Also used in pre-hooks and Cl checks
· *note pre-commit hooks is referring to github’s hooks, which allows scripting actions to occur before or after any commit or push. There is a great article here regarding how to run jest tests before each git commit more effectively : https://benmccormick.org/2017/02/26/running-jest-tests-before-each-git-commit/
test:watch:
watches the test files, it is useful while writing the tests and quickly getting results
test:update:
updates snapshots for all the presentational components, if the snapshot is not there it will create it for you.
Snapshot test, renders a UI component, takes a screensht then compares the reference image stored alongside the test. The test fails if the 2 images do not match, either change is unexpected, or the screenshot needs to be updated to the new version of the UI component. With jest it renders the graphical UI
Coverage: generates a coverage report
Testing conventions
Have a _test_ folder in the same directory as the file that will be tested
Naming convention for test files is <testFileName> for javascript files, for component files (ex: abc.component.js) the test filename would be abc.component.test.js
Jest config
Jest configuration can be fit inside package.json() , or through jest.config.js, or jest.config.ts (or through the:
config <path/to/file.js|ts|cjs|mjs|json>
Resources
End-to-End Testing Tutorial : https://blog.logrocket.com/end-to-end-testing-react-apps-with-puppeteer-and-jest-ce2f414b4fd7/
Optimizing Iteration Speeds: https://erikbern.com/2017/07/06/optimizing-for-iteration-speed.html
Testing React Apps: https://jestjs.io/docs/en/tutorial-react