Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use React Testing Library and Jest to complete unit testing", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use React Testing Library and Jest to complete unit testing" bar!

Technology stack selection

When we want to write unit tests for React applications, the official recommendation is to use React Testing Library + Jest. Enzyme is also an excellent unit testing library. Which testing tool should we choose?

Let's look at an example of a simple counter and two corresponding tests: the first written in Enzyme and the second written in React Testing Library.

Counter.js

/ / counter.js import React from "react"; class Counter extends React.Component {state = {count: 0}; increment = () = > this.setState (({count}) = > ({count: count + 1})); decrement = () = > this.setState (({count}) = > ({count: count-1}); render () {return (-

{this.state.count}

+);}} export default Counter

Counter-enzyme.test.js

/ / counter-enzyme.test.js import React from "react"; import {shallow} from "enzyme"; import Counter from ". / counter"; describe ("", () = > {it ("properly increments and decrements the counter", () = > {const wrapper = shallow (); expect (wrapper.state ("count")) .tobe (0); wrapper.instance (). Increment (); expect (wrapper.state ("count")) .tobe (1) Wrapper.instance () .decrement (); expect (wrapper.state ("count")) .tobe (0);})

Counter-rtl.test.js

/ / counter-rtl.test.js import React from "react"; import {render, fireEvent} from "@ testing-library/react"; import Counter from ". / counter"; describe ("", () = > {it ("properly increments and decrements the counter", () = > {const {getByText} = render (); const counter = getByText ("0"); const incrementButton = getByText ("+"); const decrementButton = getByText ("-") FireEvent.click (incrementButton); expect (counter.textContent) .toEqual ("1"); fireEvent.click (decrementButton); expect (counter.textContent) .toEqual ("0");})

Comparing the two examples, can you see which test file is the best? If you are not familiar with unit testing, you may be good at both tasks. But in fact, the implementation of Enzyme has two risks of false positives:

Even if the code is damaged, the test will pass.

Even if the code is correct, the test fails.

Let's give examples to illustrate these two points. Suppose you want to ReFactor the component because you want to be able to set any count value. Therefore, you can remove the increment and decrement methods, and then add a new setCount method. Suppose you forget to connect this new method to a different button:

Counter.js

/ / counter.js export default class Counter extends React.Component {state = {count: 0}; setCount = count = > this.setState ({count}); render () {return (-

{this.state.count}

+);}}

The first test (Enzyme) passes, but the second test (RTL) fails. In fact, the first one doesn't care whether the button is connected to the method correctly. It only looks at the implementation itself, that is, whether the state of the application is correct after your increment and decrement methods are executed.

This is code corruption, and the test will pass.

It's 2020, and you may have heard of React Hooks and are going to use React Hooks to rewrite our counter code:

Counter.js

/ counter.js import React, {useState} from "react"; export default function Counter () {const [count, setCount] = useState (0); const increment = () = > setCount (count = > count + 1); const decrement = () = > setCount (count = > count-1); return (-

{count}

+);}

This time, even if your counter is still working, the first test will be broken. Enzyme will report an error, and state cannot be used in function components:

ShallowWrapper::state () can only be called on class components

Next, you need to rewrite the unit test file:

Counter-enzyme.test.js

Import React from "react"; import {shallow} from "enzyme"; import Counter from ". / counter"; describe ("", () = > {it ("properly increments and decrements the counter", () = > {const setValue = jest.fn (); const useStateSpy = jest.spyOn (React, "useState"); useStateSpy.mockImplementation (initialValue = > [initialValue, setValue]); const wrapper = shallow () Wrapper. Find ("button") .last () .props () .onClick (); expect (setValue) .toHaveBeenCalledWith (1); / / We can't make any assumptions here on the real count displayed / / In fact, the setCount setter is mocked! Wrapper. Find ("button") .first () .props () .onclick (); expect (setValue). ToHaveBeenCalledWith (- 1);});})

The unit test written in React Testing Library works well because it focuses more on the event handling and presentation of the application than on the implementation details and state changes of the application. More in line with our original requirements for unit testing, as well as best practices.

Simple rules to follow

Perhaps the unit test examples written in React Testing Library above will also give people a sense of confusion. Next, let's disassemble this part of the code step by step using the AAA pattern.

AAA mode: orchestration (Arrange), execution (Act), assertion (Assert).

Almost all the tests are written in this way. First, you need to orchestrate (initialize) your code so that everything is ready for the next steps. You then perform the steps that the user should perform (for example, click). Finally, you assert what should happen.

Import React from "react"; import {render, fireEvent} from "@ testing-library/react"; import Counter from ". / app"; describe ("", () = > {it ("properly increments the counter", () = > {/ / Arrange const {getByText} = render (); const counter = getByText ("0"); const incrementButton = getByText ("+"); const decrementButton = getByText ("-"); / Act fireEvent.click (incrementButton) / / Assert expect (counter.textContent) .toEqual ("1"); / / Act fireEvent.click (decrementButton); / / Assert expect (counter.textContent) .toEqual ("0");});})

Choreography (Arrange)

In this step of choreography, we need to complete two tasks:

Rendering component

Get the different elements of the required DOM.

The rendering component can be done using the render method of RTL's API. The signature is as follows:

Function render (ui: React.ReactElement, options?: Omit): RenderResult

Ui is the component you want to load. Options usually does not need to specify options. The official document is here. If you want to specify it, for example, the following value is a simple excerpt of the official document:

The container:React Testing library creates a div and appends the div to the document. With this parameter, you can customize the container.

BaseElement:

If a container is specified, this value defaults to that value, otherwise it defaults to document.documentElement. This will be used as the basic element of the query, as well as what is printed when using debug ().

Hydrate: for server rendering, use ReactDOM.hydrate to load your components.

Wrapper: pass a component as the wrapper layer to render the component we want to test. This is typically used to create custom render functions that can be reused to provide common data.

Queries: query binding. Unless merged, the default settings in the DOM test library are overridden.

Basically, what this function does is render the component using ReactDOM. Present in a newly created div attached directly to the document.body (or provide hydrate for server-side rendering). As a result, you can get a large number of queries from the DOM test library and other useful methods such as debug, rerender, or unmount.

Documentation: https://testing-library.com/d...

But you might think, what are these questions? Some utilities allow you to query DOM like a user: find elements by label text, placeholders, and headings. Here are some examples of queries from documents:

GetByLabelText: searches for a tag that matches the given text passed as a parameter, and then finds the element associated with that tag.

GetByText: searches for all elements with a text node where the textContent matches the given text passed as a parameter.

GetByTitle: returns an element with a title attribute that matches the given text passed as a parameter.

GetByPlaceholderText: searches for all elements with placeholder attributes and finds elements that match the given text passed as a parameter.

There are many variants of a particular query:

GetBy: returns the first matching node of the query, and throws an error if there are no matching elements or multiple matches are found.

GetAllBy: returns an array of all matching nodes in a query, and throws an error if there are no matching elements.

QueryBy: returns the first matching node of the query, or null if there is no matching element. This is useful for asserting elements that do not exist.

QueryAllBy: returns an array of all matching nodes for a query, or an empty array ([]) if there are no matching elements.

FindBy: returns a promise that will be parsed when an element that matches a given query is found. If no elements are found, or if more than one element is found after the default timeout is 4500 milliseconds, the promise will be rejected.

FindAllBy: returns a promise that is parsed into an array of elements when any elements that match a given query are found.

Execute (Act)

Now that everything is ready, we can act. To do this, we use fireEvent from the DOM test library most of the time, with the following signature:

FireEvent (node: HTMLElement, event: Event)

Simply put, this function accepts a DOM node (you can query it using the query you saw above!) And trigger DOM events, such as clicks, focus, changes, and so on. You can find many other events that can be scheduled here.

Our example is quite simple, because we just want to click a button, so we just need to:

FireEvent.click (incrementButton); / / OR fireEvent.click (decrementButton)

Assertion (Assert)

And then there's the last part. Triggering events usually trigger some changes in the application, so we must execute some assertions to ensure that these changes occur. In our tests, a good way to do this is to make sure that the count presented to the user has changed. Therefore, we only need to assert that the counter for the textContent property is incremented or decremented:

Expect (counter.textContent) .toEqual ("1"); expect (counter.textContent) .toEqual ("0")

Congratulations, you have successfully disassembled our example here. ?

Note: this AAA pattern is not specific to the test library. In fact, it is even the general structure of any test case. I show this to you here because I find it interesting how easily the test library can write tests in each section.

8 typical examples

At this point, we will enter the actual combat stage, and then please download the example: rts-guide-demo.

While installing dependencies, you can simply take a look at our project. All the unit test-related files are stored in the src/test directory. Let's empty this folder and go through the following example one by one. ? (CV is also possible?)

1. How to create a test snapshot

Snapshots, as the name implies, allow us to save snapshots of a given component. It helps a lot when you update or ReFactor and want to get or compare changes.

Now, let's look at a snapshot of the App.js file.

App.test.js

Import React from 'react' import {render, cleanup} from' @ testing-library/react' import App from'. / App' afterEach (cleanup) it ('should take a snapshot', () = > {const {asFragment} = render () expect (asFragment ()). ToMatchSnapshot ()})

To take a snapshot, we must first import render and cleanup. These two methods will be used extensively in this article.

Render, as its name implies, helps render React components. Cleanup is passed to afterEach as an argument to clean up everything after each test to avoid memory leaks.

Next, we can use render to render the App component and get asFragment from the method as the return value. Finally, make sure that the fragment of the App component matches the snapshot.

Now, to run the test, open your terminal and navigate to the root directory of the project, and run the following command:

Npm test

Therefore, it will create a new folder _ _ snapshots__ and a file App.test.js:

App.test.js.snap

/ / Jest Snapshot v1, https://goo.gl/fbAQLP exports [`should take a snapshot 1`] = `Testing Updated `

If you make changes in App.js, the test will fail because the snapshots will no longer match. To update the snapshot, press u or delete the corresponding snapshot file.

two。 Test the DOM element

To test the DOM element, you must first look at the TestElements.js file.

TestElements.js

Import React from 'react' const TestElements = () = > {const [counter, setCounter] = React.useState (0) return ({counter} setCounter (counter + 1)} > Up setCounter (counter-1)} > Down)} export default TestElements

The only thing you need to keep here is data-testid. It will be used to select these elements from the test file. Now, let's complete the unit test:

Test whether the counter is 0 and the disabled state of the button:

TestElements.test.js

Import React from 'react'; import "@ testing-library/jest-dom/extend-expect"; import {render, cleanup} from' @ testing-library/react'; import TestElements from'. / components/TestElements' afterEach (cleanup); it ('should equal to 0), () = > {const {getByTestId} = render (); expect (getByTestId (' counter')) .toHaveTextContent (0)}) It ('should be enabled', () = > {const {getByTestId} = render (); expect (getByTestId (' button-up')). Not.toHaveAttribute ('disabled')}); it (' should be disabled', () = > {const {getByTestId} = render (); expect (getByTestId ('button-down')). ToBeDisabled ()})

As you can see, the syntax is very similar to the previous test. The only difference is that we use getByTestId to select the necessary elements (based on data-testid) and check to see if we pass the test. In other words, we check whether the text content in {counter} is equal to 0.

Here, as usual, we use getByTestId to select the element and check the first test if the button disables the attribute. For the second, if the button is disabled.

If you save the file or run it again in the terminal yarn test, the test will pass.

3. Test event

Before writing unit tests, let's take a look at what TestEvents.js looks like.

Import React from 'react' const TestEvents = () = > {const [counter, setCounter] = React.useState (0) return ({counter} setCounter (counter + 1)} > Up setCounter (counter-1)} > Down)} export default TestEvents

Now, let's write the test.

When we click the button, test whether the increase or decrease of the counter is correct:

Import React from 'react'; import "@ testing-library/jest-dom/extend-expect"; import {render, cleanup, fireEvent} from' @ testing-library/react'; import TestEvents from'. / components/TestEvents' afterEach (cleanup); it ('increments counter', () = > {const {getByTestId} = render (); fireEvent.click (getByTestId (' button-up')) expect (getByTestId ('counter')). ToHaveTextContent (' 1')}) It ('decrements counter', () = > {const {getByTestId} = render (); fireEvent.click (getByTestId (' button-down')) expect (getByTestId ('counter')) .toHaveTextContent ('-1')})

As you can see, the two tests are very similar except for the expected text content.

The first test uses fireEvent.click () to trigger a click event to check if the counter increases to 1 when the button is clicked.

The second check if the counter is reduced to-1 when the button is clicked.

FireEvent has several ways to test events, so you are free to drill down into the documentation for more information.

Now that we know how to test events, we will learn how to handle asynchronous operations in the next section.

4. Test asynchronous operation

Asynchronous operations are operations that take time to complete. It can be a HTTP request, a timer, and so on.

Now, let's examine the TestAsync.js file.

Import React from 'react' const TestAsync = () = > {const [counter, setCounter] = React.useState (0) const delayCount = () > (setTimeout () = > {setCounter (counter + 1)}, 500)) return ({counter} Up setCounter (counter-1)} > Down)} export default TestAsync

Here, we use setTimeout () to delay the incremented event by half a second.

The test counter determines whether or not to increase after 0.5 seconds:

TestAsync.test.js

Import React from 'react'; import "@ testing-library/jest-dom/extend-expect"; import {render, cleanup, fireEvent, waitForElement} from' @ testing-library/react'; import TestAsync from'. / components/TestAsync' afterEach (cleanup); it ('increments counter after 0.5 slots, async () = > {const {getByTestId, getByText} = render ()) FireEvent.click (getByTestId ('button-up')) const counter = await waitForElement (() = > getByText (' 1')) expect (counter) .toHaveTextContent ('1')})

To test the incremental event, we must first use async/await to handle the operation, because as mentioned earlier, it takes time to complete.

Next, we use a new helper method, getByText (). This is similar to getByTestId (). GetByText () selects text content instead of id.

Now, after clicking the button, we wait for waitForElement () = > getByText ('1') to increment the counter. Once the counter is increased to 1, we can now move to the condition and check whether the counter is equal to 1.

That is, let's now turn to more complex test cases.

Are you ready?

5. Test React Redux

Let's check out what TestRedux.js looks like.

TestRedux.js

Import React from 'react' import {connect} from' react-redux' const TestRedux = ({counter, dispatch}) = > {const increment = () = > dispatch ({type: 'INCREMENT'}) const decrement = () = > dispatch ({type:' DECREMENT'}) return ({counter} Up Down)} export default connect (state = > ({counter: state.count})) (TestRedux)

Store/reducer.js

Export const initialState = {count: 0,} export function reducer (state = initialState, action) {switch (action.type) {case 'INCREMENT': return {count: state.count + 1,} case' DECREMENT': return {count: state.count-1,} default: return state}}

As you can see, there is nothing special.

It is just a basic counter component handled by React Redux.

Now, let's write unit tests.

Test whether the initial state is 0:

Import React from 'react' import "@ testing-library/jest-dom/extend-expect"; import {createStore} from' redux' import {Provider} from 'react-redux' import {render, cleanup, fireEvent} from' @ testing-library/react' Import {initialState, reducer} from'. / store/reducer' import TestRedux from'.. / components/TestRedux' const renderWithRedux = (component, {initialState, store = createStore (reducer, initialState)} = {}) = > {return {... render ({component}), store,}} afterEach (cleanup) It ('checks initial state is equal to 0), () = > {const {getByTestId} = renderWithRedux () expect (getByTestId (' counter')) .toHaveTextContent ('0')} it ('increments the counter through redux', () = > {const {getByTestId} = renderWithRedux () {initialState: {count: 5}}) fireEvent.click (getByTestId ('button-up')) expect (getByTestId (' counter'). ToHaveTextContent ('6')}) it ('decrements the counter through redux', () = > {const {getByTestId} = renderWithRedux (, {initialState: {count: 100}) }) fireEvent.click (getByTestId ('button-down')) expect (getByTestId (' counter')) .toHaveTextContent ('99')})

We need to import something to test React Redux. Here, we create our own helper function, renderWithRedux (), to render the component, because it will be used multiple times.

RenderWithRedux () receives the component, initial state, and storage to be rendered as a parameter. If there is no storage, it will create a new storage, and if it does not receive the initial state or storage, it will return an empty object.

Next, we use render () to render the component and pass the storage to the provider.

That is, we can now pass the component TestRedux to renderWithRedux () to test whether the counter is equal to 0.

Test whether the increase or decrease of the counter is correct:

To test the increment and decrement events, we pass the initial state to renderWithRedux () as the second parameter. Now we can click the button and test whether the expected result meets the criteria.

Now, let's move on to the next section and introduce React Context.

6. Test React Context

Let's check out what TextContext.js looks like.

Import React from "react" export const CounterContext = React.createContext () const CounterProvider = () = > {const [counter, setCounter] = React.useState (0) const increment = () = > setCounter (counter + 1) const decrement = () = > setCounter (counter-1) return ()} export const Counter = () = > {const {counter, increment Decrement} = React.useContext (CounterContext) return ({counter} Up Down)} export default CounterProvider

Counter status is now managed through React Context. Let's write a unit test to check that it works as expected.

Test whether the initial state is 0:

TextContext.test.js

Import React from 'react' import "@ testing-library/jest-dom/extend-expect"; import {render, cleanup, fireEvent} from' @ testing-library/react' import CounterProvider, {CounterContext, Counter} from'.. / components/TestContext' const renderWithContext = (component) = > {return {... render ({component})} afterEach (cleanup) It ('checks if initial state is equal to 0), () = > {const {getByTestId} = renderWithContext () expect (getByTestId (' counter')). ToHaveTextContent ('0')}) it ('increments the counter', () = > {const {getByTestId} = renderWithContext () fireEvent.click (getByTestId (' button-up')) expect (getByTestId ('counter')). ToHaveTextContent (' 1')}) it ('decrements the counter') () = > {const {getByTestId} = renderWithContext () fireEvent.click (getByTestId ('button-down')) expect (getByTestId (' counter')) .toHaveTextContent ('- 1')})

As with the previous React Redux section, here we use the same method to create a helper function renderWithContext () to render the component. But this time, it only receives components as parameters. To create a new context, we pass CounterContext to Provider.

Now we can test whether the counter is initially equal to 0.

So, is the increase or decrease of the counter correct?

As you can see, here we trigger a click event to test whether the counter is correctly incremented to 1 and reduced to-1.

That is, we can now move on to the next section and introduce React Router.

7. Test React Router

Let's check out what TestRouter.js looks like.

TestRouter.js

Import React from 'react' import {Link, Route, Switch UseParams} from 'react-router-dom' const About = () = > About page const Home = () = > Home page const Contact = () = > {const {name} = useParams () return {name}} const TestRouter = () = > {const name =' John Doe' return (Home About Contact)} export default TestRouter

Here, you will test whether the page information corresponding to the route is correct.

TestRouter.test.js

Import React from 'react' import "@ testing-library/jest-dom/extend-expect" Import {Router} from 'react-router-dom' import {render, fireEvent} from' @ testing-library/react' import {createMemoryHistory} from 'history' import TestRouter from'. / components/TestRouter' const renderWithRouter = (component) = > {const history = createMemoryHistory () return {. Render ({component})} it ('should render the home page', () = > {const {container) GetByTestId} = renderWithRouter () const navbar = getByTestId ('navbar') const link = getByTestId (' home-link') expect (container [XSS _ clean]). ToMatch ('Home page') expect (navbar). ToContainElement (link)} it (' should navigate to the about page', () = > {const {container) GetByTestId} = renderWithRouter () fireEvent.click (getByTestId ('about-link')) expect (container [XSS _ clean]). ToMatch (' About page')}) it ('should navigate to the contact page with the params', () = > {const {container, getByTestId} = renderWithRouter () fireEvent.click (getByTestId (' contact-link')) expect (container [XSS _ clean]). ToMatch ('John Doe')})

To test React Router, we must first have a navigation history. Therefore, we use createMemoryHistory () to create navigation history.

Next, we use the helper function renderWithRouter () to render the component and pass the history to the router component. In this way, we can now test whether the page loaded at the beginning is the master page. And whether the navigation bar loads the expected link.

Test whether it uses parameters to navigate to other pages when we click on the link:

Now, to check whether the navigation is working, we must trigger a click event on the navigation link.

For the first test, we check that the content is equal to the text in the About page, and for the second test, we test the routing parameter and check that it passes correctly.

Now we can move on to the final section to learn how to test Axios requests.

8. Test HTTP request

Let's check out what TestRouter.js looks like.

Import React from 'react' import axios from' axios' const TestAxios = ({url}) = > {const [data, setData] = React.useState () const fetchData = async () = > {const response = await axios.get (url) setData (response.data.greeting)} return (Load Data {data? {data}: Loading... })} export default TestAxios

As you can see here, we have a simple component with a button to make a request. If the data is not available, it displays a load message.

Now, let's write the test.

To verify that the data is obtained and displayed correctly:

TextAxios.test.js

Import React from 'react' import "@ testing-library/jest-dom/extend-expect" Import {render, waitForElement, fireEvent} from'@ testing-library/react' import axiosMock from 'axios' import TestAxios from'.. / components/TestAxios' jest.mock ('axios') it (' should display a loading text', () = > {const {getByTestId} = render () expect (getByTestId ('loading'). ToHaveTextContent (' Loading...')}) it ('should load and display the data') Async () = > {const url ='/ greeting' const {getByTestId} = render () axiosMock.get.mockResolvedValueOnce ({data: {greeting: 'hello there'},}) fireEvent.click (getByTestId (' fetch-data')) const greetingData = await waitForElement (() = > getByTestId ('show-data')) expect (axiosMock.get) .toHaveBeenCalledTimes (1) expect (axiosMock.get) .toHaveBeenCalledWith (url) expect (greetingData) .toHaveTextContent (' hello there')})

This test case is a little different because we have to handle the HTTP request. To do this, we must simulate the axios request with the help of jest.mock ('axios').

Now we can use axiosMock and apply the get () method to it. Finally, we will use the Jest function mockResolvedValueOnce () to pass the simulation data as parameters.

Now, for the second test, we can click the button to get the data and use async/await to parse it. Now we're going to test three things:

If the HTTP request has been completed correctly

If the HTTP request is completed using url

If the data obtained meets expectations.

For the first test, we only check whether the load message is displayed when there is no data to display.

In other words, we have now completed eight simple steps to test your React application.

Thank you for your reading, the above is the content of "how to use React Testing Library and Jest to complete unit testing". After the study of this article, I believe you have a deeper understanding of how to use React Testing Library and Jest to complete unit testing, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.