Unit testing allows developers to test code that they write. One of the main goals of unit testing is to catch bugs earlier by running the test(s) locally or through a process. For developers who may not have worked on the code, a unit test can also give them an idea of what the code should be doing when it executes.
In this series of 8 articles, we will go over setting up and testing React Native with Jest and Testing Library. We’ll learn how to test text, hidden elements, buttons, styles, and functionality.
Seriers Outline:
- Part I: Setting Up – Current Article
- Part II: Writing the First Test
- Part III: Testing for an Element That Isn’t Present
- Part IV: Button Testing
- Part V: Testing Styles of a Component
- Part VI: Functional Testing
- Part VII: Further Helpful Information
- Zero configuration: No need to set up a config file. Just install, and start writing tests!
- Snapshots: Ensure the UI (User Interface) doesn’t change unexpectedly.
- Well-written documentation: All you need to know about Jest is maintained on one site. No need to waste time finding answers on other sites!
- Packages for React, React Native, and other libraries
- Provides easy to use tools to test React Native, which does not have a browser environment to test in
- Has other useful tools for testing various aspects of the UI
- Go to React Native Environment Setup.
- Choose either setting up via Expo CLI Quickstart or React Native CLI Quickstart.
- Start the app!
- If you haven’t encountered errors, feel free to stop the app.
In this post, Part 1 of the series, I’ll give a brief introduction to Jest, Testing Library, and React Native. Then, we’ll walk through how to set each of them up. This will prepare us for Part 2, creating our first test.
What is Jest?
Jest is a JavaScript testing library created by the same company behind React: Facebook. But while Jest was created by the same developers who created React, it is not limited to only React—it can also be used with other frameworks like Node, Angular, Vue.js, and Babel.
Highlights:
What is Testing Library?
Testing Library is a tool used for testing the UI of an application.
Highlights:
What is React Native?
React Native allows you to create native iOS and Android applications using React. From one code base, you can deploy native apps to the Apple Store and/or Google Play.
Setting It All Up
Setting Up React Native
*If you have already set up React Native, skip this step.*
Setting Up Jest and Testing Library
*If you set up using React Native CLI, skip down to Install Testing Library.*
If you set up using Expo CLI, follow these initial steps:
1. First, open up Terminal or command prompt.
2. Then, install jest-expo using yarn or npm.
For Yarn:
yarn add --dev jest-expo
For NPM:
npm install --save-dev jest-expo
3. After jest-expo is installed, open up package.json. Update package.json to include:
"scripts": {
...
"test": "jest"
},
...
"jest": {
"preset": "jest-expo"
}
4. Your package.json should look like this:
Install Testing Library
Install @testing-library/react-native and @testing-library/jest-native using yarn or npm.
- For Yarn:
yarn add --dev @testing-library/react-native @testing-library/jest-native
- For NPM:
npm install --save-dev @testing-library/react-native @testing-library/jest-native
Add jest.config.js
1. In the root directory of the project, add a new file and name it jest.config.js.
2. Within jest.config.js, add this code:
module.exports = {
preset: 'react-native',
setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
};
3. Before continuing, there are a few things we should define.
present: A preset that is used as a base for Jest’s configuration. A preset should point to an npm module that has ajest-preset.jsonorjest-preset.jsfile at the root.
Cited from: https://jestjs.io/docs/en/configuration#preset-string
setUpFilesAfterEnv: A list of paths to modules that run some code to configure or set up the testing framework before each test file in the suite is executed.
Cited from: https://jestjs.io/docs/en/configuration#setupfilesafterenv-array
Summary
This post set us up with an overview of three key pieces of our series puzzle: Jest, Testing Library, and React Native. We discussed how to set each up which will bring us to Part II, where we will write our first test. Stay tuned!
[Editor’s Note: Never miss a post by subscribing to receive new blogs by email. No spam, opt-out anytime.]
