React Testing Flashcards
Jest
What is Jest?
Jest is a testing framework for JavaScript that includes both a test-runner and assertion functions in one package
Jest
Installing Jest
Jest is included by default when initializing a React app usingcreate-react-app. However, when manually installing Jest withnpm, use the provided command to install it as a developer dependency.
~~~
npm install jest –save-dev
~~~
Jest
Configuring Jest
To configure Jest to run tests with thenpm testcommand, thepackage.jsonfile must have the"test"script defined.
- The provided configuration will run the
jestcommand on all files in the__test__/directory with the extension.test.jsor.spec.js. - The
-coverageflag will produce a coverage report in the output and in the generated filecoverage/index.html.
{
"scripts": {
"test": "jest \_\_tests\_\_/ --coverage"
}
}
Jest
Thetest()function
Every Jest test begins with thetest()function, which accepts two required arguments and one optional argument:
- A string describing the functionality being tested
- A callback function containing the testing logic to execute
- An optional timeout value in milliseconds. The Jest test must wait for this timeout to complete before completing the test
Eachtest()function call will produce a separate line in the testing report. In order for a given test to pass, the test callback must run without throwing errors or failedexpect()assertions.
Theit()function is an alias fortest().
test('test description', () => {
// testing logic and assertions go here...
}, timeout)
Jest
Detecting false positives
Jest will automatically pass a test that it perceives to have noexpect()assertions or errors. As a result, false positives are likely to occur when naively testing code with asynchronous functionality.
To ensure that Jest waits for asynchronous assertions to be made before marking a test as complete, there are two asynchronous patterns that Jest supports, each with its own syntax for testing:
- Asynchronous callback execution can be tested with the
done()parameter function. - Promise values can be used in tests with the
async/awaitkeywords.
Jest
Testing async code: callbacks
When testing asynchronous code that uses a callback to deliver a response, thetest()function argument should accept thedone()callback function as a parameter. Jest will wait fordone()to be called before marking a test as complete.
You should executedone()immediately afterexpect()assertions have been made within atryblock and then again within acatchblock to display any thrown error messages in the output log.
React Testing Library
What is React Testing Library?
React Testing Library (RTL) is a library for testing React applications. React Testing Library focuses on testing components from the end-user’s experience rather than testing the implementation and logic of the underlying React components.
React Testing Library
Installing RTL
If you are using create-react-app to initialize your React project, the React Testing Library (RTL) will already be included.
To manually install RTL withnpm, use the following command:
npm install @testing-library/react --save-dev
Though not required, the--save-devflag will add this library as a development dependency rather than a production dependency. Once installed, RTL can be imported into your project.
React Testing Library
RTL Render
The React Testing Library (RTL) provides arender()method for virtually rendering React components in the testing environment. Once rendered in this way, thescreen.debug()method can be used to view the virtually rendered DOM.
React Testing Library
getByX Queries
Thescreenobject from the React Testing Library (RTL) provides methods for querying the rendered elements of the DOM in order to make assertions about their text content, attributes, and more.
Thescreen.getByX()methods (such asscreen.getByRole()andscreen.getByText()) return the matching DOM node for a query, or throw an error if no element is found.
React Testing Library
User Event
The@testing-library/user-eventlibrary is an extension of@testing-librarythat provides tools for simulating user interactions with the DOM. The provideduserEventobject contains methods that can be used to simulate clicks, typing, and much more.
The[user-eventdocumentation](https://github.com/testing-library/user-event#table-of-contents)should be consulted to find the appropriate method for your needs.
React Testing Library
queryByX variant
When using the React Testing Library to determine if an element is NOT present in the rendered DOM, thescreen.queryByXvariants (such asscreen.queryByRole()) should be used over theirscreen.getByXcounterparts.
If the queried element cannot be found, thescreen.getByXvariants will throw an error causing the test to fail whereas thescreen.queryByXwill returnnull. The missing element can then be asserted to benull.
React Testing Library
findByX Variant
When using the React Testing Library to query the rendered DOM for an element that will appear as a result of an asynchronous action, thescreen.findByXvariants (such asscreen.findByRole()) should be used instead of the thescreen.getByXandscreen.queryByXvariants.
Theawaitkeyword must be used when using the asynchronousscreen.findByXvariants and the callback function for thetest()must be marked asasync.
React Testing Library
findByX Variant
When using the React Testing Library to query the rendered DOM for an element that will appear as a result of an asynchronous action, thescreen.findByXvariants (such asscreen.findByRole()) should be used instead of the thescreen.getByXandscreen.queryByXvariants.
Theawaitkeyword must be used when using the asynchronousscreen.findByXvariants and the callback function for thetest()must be marked asasync.
React Testing Library
Jest Dom
The@testing-library/jest-dompackage contains DOM-specific matcher methods for testing front-end applications with Jest. Some common matcher methods include:
.toBeInTheDocument().toBeVisible().toHaveValue().toHaveStyle()
It is common for this library to be used alongside the React Testing Library. The[jest-domdocumentation](https://github.com/testing-library/jest-dom)should be consulted to find the appropriate matcher method for your needs.
React Testing Library
waitFor
ThewaitFor()method in RTL is used to wait for asynchronousexpect()assertions to pass. It is often used in combination with the.queryByX()methods to determine if a DOM element disappears asynchronously.
This function accepts two arguments, of which only one is required:
- a required callback function containing asynchronous testing logic
- an optional options object that can be usedto configure how the callback is executed
Calling this function requires the use of theasynckeyword.
