Two pillars of testing in create-react-app
Introduction
When you create a react project using create-react-app and look in the package.json, you will notice the testing-library module (in red)
Notice also the test script (in orange)
Now, if you will invoke the following: npm test.
You will run the tests and get the test results (you might need to change a source file, e.g., add a space in App.js)
So you might wonder what is going on here:
- who run the test
- what is testing-library
- where are the tests
Pillar 1 — Jest
The framework used to run the tests is jest, but it is more than just a test runner.
What is Jest
Jest is a JavaScript Testing Framework maintained by Facebook.
It works with projects using: Babel, JavaScript, TypeScript, Node, React, Angular, Vue, and more!
Motivation for Jest
It makes JavaScript testing automated and simple.
Jest usage in a test sample
The following sample uses jest functions: test and expect to test react component
test: a function that defines the test
expect: a function that checks if the expected value is equal to the actual value
Jest reference
Pillar 2— Testing Library
What is Testing Library
Simple and complete testing utilities implemented using the module testing-library
Motivation for Testing Library
Encourage good testing practices.
Everything that the Testing Library can do can be done by jest. But jest looks into the DOM elements, whereas Testing Library does not look into the DOM. The Testing Library makes the test in a more user-centric approach. It will look for text but not in a specific DOM element.
Testing library usage in a test sample
The following sample uses testing-library functions: render and getByText to test react component
render: a function that render the App component into the DOM
getByText: a function that looks for a DOM element whose content has a ‘learn react’ case not sensitive text. Notice that no specific DOM element was used here by the Testing Library
Testing Library reference
Where are the tests
The following App.test.js is a test file that is recognized by jest.
It is also common to add a tests directory under src and put the test files there (not done here)
Repository
The following repository was created by using:
npx create-react-app two-pillars-of-testing-create-react-app
and you get everything that is used in this article out of the box
Check this repository created 22/2/2022
Conclusion
create-react-app is using jest and Testing-Library out of the box and for a good reason: you can create very simple automated tests for your react application and test your logic (using jest) and component.
It is also possible to use jest and Testing Library for vite projects.
