怎么使用ReactTestingLibrary和Jest完成单元测试

// 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  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  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");    });  });

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

// 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}
        +      
    );  }

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

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);    });  });

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");    });  });

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

fireEvent(node: HTMLElement, event: Event)

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

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

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()  })

npm test

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

如果，你在 App.js 中做出更改，测试将失败，因为快照将不再匹配。更新快照可以按 u ，或者将对应快照文件删除即可。

2.测试DOM元素

要测试DOM元素，首先必须查看TestElements.js文件。

• 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

在这里，您唯一需要保留的是 data-testid 。它将用于从测试文件中选择这些元素。现在，让我们完成单元测试:

测试计数器是否为0，以及按钮的禁用状态:

• 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()    });

正如您所看到的，语法与前面的测试非常相似。唯一的区别是,我们使用 getByTestId 选择必要的元素(根据 data-testid )并检查是否通过了测试。换句话说，我们检查

{ counter }

这里,像往常一样,我们使用 getByTestId 选择元素和检查第一个测试如果按钮禁用属性。对于第二个，如果按钮是否被禁用。

如果您保存文件或在终端纱线测试中再次运行，测试将通过。

3.测试事件

在编写单元测试之前，让我们首先看下 TestEvents.js 是什么样子的。

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

现在，让我们编写测试。

当我们点击按钮时，测试计数器的增减是否正确:

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')    });

可以看到，除了预期的文本内容之外，这两个测试非常相似。

第一个测试使用 fireEvent.click() 触发一个 click 事件，检查单击按钮时计数器是否增加到1。

第二个检查当点击按钮时计数器是否减为-1。

fireEvent 有几个可以用来测试事件的方法，因此您可以自由地深入文档了解更多信息。

现在我们已经知道了如何测试事件，接下来我们将在下一节中学习如何处理异步操作。

4. 测试异步操作

异步操作是需要时间才能完成的操作。它可以是HTTP请求、计时器等等。

现在，让我们检查 TestAsync.js 文件。

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

这里，我们使用 setTimeout() 将递增事件延迟0.5秒。

测试计数器在0.5秒后判断是否增加:

• 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.5s', async () => {      const { getByTestId, getByText } = render();       fireEvent.click(getByTestId('button-up'))      const counter = await waitForElement(() => getByText('1'))       expect(counter).toHaveTextContent('1')  });

要测试递增事件，我们首先必须使用 async/await 来处理操作，因为如前所述，完成它需要时间。

接下来，我们使用一个新的助手方法 getByText()。这类似于getByTestId()。getByText()选择文本内容，而不是id。

现在，在单击按钮之后，我们等待 waitForElement(() => getByText('1') 来增加计数器。一旦计数器增加到1，我们现在可以移动到条件并检查计数器是否等于1。

也就是说，现在让我们转向更复杂的测试用例。

你准备好了吗?

5.测试 React Redux

让我们检查一下 TestRedux.js 是什么样子的。

• 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      }    }

正如您所看到的，没有什么特别的。

它只是一个由 React Redux 处理的基本计数器组件。

现在，让我们来编写单元测试。

测试初始状态是否为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')    })

我们需要导入一些东西来测试 React Redux 。这里，我们创建了自己的助手函数 renderWithRedux() 来呈现组件，因为它将被多次使用。

renderWithRedux() 作为参数接收要呈现的组件、初始状态和存储。如果没有存储，它将创建一个新的存储，如果它没有接收初始状态或存储，它将返回一个空对象。

接下来，我们使用render()来呈现组件并将存储传递给提供者。

也就是说，我们现在可以将组件 TestRedux 传递给 renderWithRedux() 来测试计数器是否等于0。

测试计数器的增减是否正确:

为了测试递增和递减事件，我们将初始状态作为第二个参数传递给renderWithRedux()。现在，我们可以单击按钮并测试预期的结果是否符合条件。

现在，让我们进入下一节并介绍 React Context。

6. 测试 React Context

让我们检查一下 TextContext.js 是什么样子的。

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

现在，通过 React Context 管理计数器状态。让我们编写单元测试来检查它是否按预期运行。

测试初始状态是否为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')    })

与前面的React Redux部分一样，这里我们使用相同的方法，创建一个助手函数renderWithContext()来呈现组件。但是这一次，它只接收作为参数的组件。为了创建新的上下文，我们将CounterContext传递给 Provider。

现在，我们可以测试计数器最初是否等于0。

那么，计数器的增减是否正确呢？

正如您所看到的，这里我们触发一个 click 事件来测试计数器是否正确地增加到1并减少到-1。

也就是说，我们现在可以进入下一节并介绍React Router。

7. 测试 React Router

让我们检查一下 TestRouter.js 是什么样子的。

• 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

这里，将测试路由对应的页面信息是否正确。

• 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.innerHTML).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.innerHTML).toMatch('About page')    })    it('should navigate to the contact page with the params', ()=> {      const { container, getByTestId } = renderWithRouter()       fireEvent.click(getByTestId('contact-link'))         expect(container.innerHTML).toMatch('John Doe')    })

要测试React Router，我们首先必须有一个导航历史记录。因此，我们使用 createMemoryHistory() 来创建导航历史。

接下来，我们使用助手函数 renderWithRouter() 来呈现组件，并将历史记录传递给路由器组件。这样，我们现在就可以测试在开始时加载的页面是否是主页。以及导航栏是否加载了预期的链接。

测试当我们点击链接时，它是否用参数导航到其他页面:

现在，要检查导航是否工作，我们必须触发导航链接上的单击事件。

对于第一个测试，我们检查内容是否等于About页面中的文本，对于第二个测试，我们测试路由参数并检查它是否正确通过。

现在我们可以进入最后一节，学习如何测试Axios请求。

8. 测试HTTP请求

让我们检查一下 TestRouter.js 是什么样子的。

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}