用React Testing Library 和 Jest 完成单元测试

Posted 2021-03-05 ko88

引言

在2020的今天，构建一个 web 应用对于我们来说，并非什么难事。因为有很多足够多优秀的的前端框架（比如 React，Vue 和 Angular）；以及一些易用且强大的UI库（比如 Ant Design）为我们保驾护航，极大地缩短了应用构建的周期。

但是，互联网时代也急剧地改变了许多软件设计，开发和发布的方式。开发者面临的问题是，需求越来越多，应用越来越复杂，时不时会有一种失控的的感觉，并在心中大喊一句：“我太南了！”。严重的时候甚至会出现我改了一行代码，却不清楚其影响范围情况。这种时候，就需要测试的方式，来保障我们应用的质量和稳定性了。

接下来，让我们学习下，如何给 React 应用写单元测试吧??

需要什么样的测试

软件测试是有级别的，下面是《Google软件测试之道》一书中，对于测试认证级别的定义，摘录如下：

• 级别1

  • 使用测试覆盖率工具。
  • 使用持续集成。
  • 测试分级为小型、中型、大型。
  • 创建冒烟测试集合（主流程测试用例）。
  • 标记哪些测试是非确定性的测试（测试结果不唯一）。

• 级别2

  • 如果有测试运行结果为红色（失败?）就不会发布。
  • 每次代码提交之前都要求通过冒烟测试。（自测，简单走下主流程）
  • 各种类型的整体代码覆盖率要大于50%。
  • 小型测试的覆盖率要大于10%。

• 级别3

  • 所有重要的代码变更都要经过测试。
  • 小型测试的覆盖率大于50%。
  • 新增重要功能都要通过集成测试的验证。

• 级别4

  • 在提交任何新代码之前都会自动运行冒烟测试。
  • 冒烟测试必须在30分钟内运行完毕。
  • 没有不确定性的测试。
  • 总体测试覆盖率应该不小于40%。
  • 小型测试的代码覆盖率应该不小于25%。
  • 所有重要的功能都应该被集成测试验证到。

• 级别5

  • 对每一个重要的缺陷修复都要增加一个测试用例与之对应。
  • 积极使用可用的代码分析工具。
  • 总体测试覆盖率不低于60%。
  • 小型测试代码覆盖率应该不小于40%。

小型测试，通常也叫单元测试，一般来说都是自动化实现的。用于验证一个单独的函数，组件，独立功能模块是否可以按照预期的方式运行。

而对于开发者来说，重要的是进行了测试的动作。本篇文章主要围绕着React组件单元测试展开的，其目的是为了让开发人员可以站在使用者的角度考虑问题。通过测试的手段，确保组件的每一个功能都可以正常的运行，关注质量，而不是让用户来帮你测试。

在编写单元测试的时候，一定会对之前的代码反复进行调整，虽然过程比较痛苦，可组件的质量，也在一点一点的提高。

技术栈选择

当我们想要为 React 应用编写单元测试的时候，官方推荐是使用 React Testing Library + Jest 的方式。Enzyme 也是十分出色的单元测试库，我们应该选择哪种测试工具呢？

下面让我们看一个简单的计数器的例子，以及两个相应的测试：第一个是使用 Enzyme 编写的，第二个是使用 React Testing Library 编写的。

counter.js

 

 1 // counter.js
 2 import React from "react";
 3 
 4 class Counter extends React.Component {
 5   state = { count: 0 };
 6   increment = () => this.setState(({ count }) => ({ count: count + 1 }));
 7   decrement = () => this.setState(({ count }) => ({ count: count - 1 }));
 8   render() {
 9     return (
10       <div>
11         <button onClick={this.decrement}>-</button>
12         <p>{this.state.count}</p>
13         <button onClick={this.increment}>+</button>
14       </div>
15     );
16   }
17 }
18 
19 export default Counter;

 

counter-enzyme.test.js

 

 1 // counter-enzyme.test.js
 2 import React from "react";
 3 import { shallow } from "enzyme";
 4 
 5 import Counter from "./counter";
 6 
 7 describe("<Counter />", () => {
 8   it("properly increments and decrements the counter", () => {
 9     const wrapper = shallow(<Counter />);
10     expect(wrapper.state("count")).toBe(0);
11 
12     wrapper.instance().increment();
13     expect(wrapper.state("count")).toBe(1);
14 
15     wrapper.instance().decrement();
16     expect(wrapper.state("count")).toBe(0);
17   });
18 });

 

counter-rtl.test.js

 

 1 // counter-rtl.test.js
 2 import React from "react";
 3 import { render, fireEvent } from "@testing-library/react";
 4 
 5 import Counter from "./counter";
 6 
 7 describe("<Counter />", () => {
 8   it("properly increments and decrements the counter", () => {
 9     const { getByText } = render(<Counter />);
10     const counter = getByText("0");
11     const incrementButton = getByText("+");
12     const decrementButton = getByText("-");
13 
14     fireEvent.click(incrementButton);
15     expect(counter.textContent).toEqual("1");
16 
17     fireEvent.click(decrementButton);
18     expect(counter.textContent).toEqual("0");
19   });
20 })

 

;

比较两个例子，你能看出哪个测试文件是最好的嘛？如果你不是很熟悉单元测试，可能会任务两种都很好。但是实际上 Enzyme 的实现有两个误报的风险：

• 即使代码损坏，测试也会通过。
• 即使代码正确，测试也会失败。

让我们来举例说明这两点。假设您希望重构组件，因为您希望能够设置任何count值。因此，您可以删除递增和递减方法，然后添加一个新的setCount方法。假设你忘记将这个新方法连接到不同的按钮:

counter.js

 

 1 // counter.js
 2 export default class Counter extends React.Component {
 3   state = { count: 0 };
 4   setCount = count => this.setState({ count });
 5   render() {
 6     return (
 7       <div>
 8         <button onClick={this.decrement}>-</button>
 9         <p>{this.state.count}</p>
10         <button onClick={this.increment}>+</button>
11       </div>
12     );
13   }
14 }

 

第一个测试(Enzyme)将通过，但第二个测试(RTL)将失败。实际上，第一个并不关心按钮是否正确地连接到方法。它只查看实现本身，也就是说，您的递增和递减方法执行之后，应用的状态是否正确。
这就是代码损坏，测试也会通过。

现在是2020年，你也许听说过 React Hooks，并且打算使用 React Hooks 来改写我们的计数器代码：

counter.js

 

 1 // counter.js
 2 import React, { useState } from "react";
 3 
 4 export default function Counter() {
 5   const [count, setCount] = useState(0);
 6   const increment = () => setCount(count => count + 1);
 7   const decrement = () => setCount(count => count - 1);
 8   return (
 9     <div>
10       <button onClick={decrement}>-</button>
11       <p>{count}</p>
12       <button onClick={increment}>+</button>
13     </div>
14   );
15 }

 

这一次，即使您的计数器仍然工作，第一个测试也将被打破。Enzyme 会报错，函数组件中无法使用state:

 

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

接下来，就需要改写单元测试文件了：

counter-enzyme.test.js

 

 1 import React from "react";
 2 import { shallow } from "enzyme";
 3 
 4 import Counter from "./counter";
 5 
 6 describe("<Counter />", () => {
 7   it("properly increments and decrements the counter", () => {
 8     const setValue = jest.fn();
 9     const useStateSpy = jest.spyOn(React, "useState");
10     useStateSpy.mockImplementation(initialValue => [initialValue, setValue]);
11     const wrapper = shallow(<Counter />);
12 
13     wrapper
14       .find("button")
15       .last()
16       .props()
17       .onClick();
18     expect(setValue).toHaveBeenCalledWith(1);
19     // We can‘t make any assumptions here on the real count displayed
20     // In fact, the setCount setter is mocked!
21 
22     wrapper
23       .find("button")
24       .first()
25       .props()
26       .onClick();
27     expect(setValue).toHaveBeenCalledWith(-1);
28   });
29 });

 

而使用 React Testing Library 编写的单元测试还是可以正常运行的，因为它更加关注应用的事件处理，以及展示；而非应用的实现细节，以及状态变化。更加符合我们对于单元测试的原本诉求，以及最佳实践。

可遵循的简单规则

也许上文中使用 React Testing Library 编写的单元测试示例，还会给人一种一头雾水的感觉。下面，让我们使用 AAA 模式来一步一步的拆解这部分代码。

AAA模式：编排（Arrange），执行（Act），断言（Assert）。

几乎所有的测试都是这样写的。首先，您要编排(初始化)您的代码，以便为接下来的步骤做好一切准备。然后，您执行用户应该执行的步骤(例如单击)。最后，您对应该发生的事情进行断言。

 

 1 import React from "react";
 2 import { render, fireEvent } from "@testing-library/react";
 3 
 4 import Counter from "./app";
 5 
 6 describe("<Counter />", () => {
 7   it("properly increments the counter", () => {
 8     // Arrange
 9     const { getByText } = render(<Counter />);
10     const counter = getByText("0");
11     const incrementButton = getByText("+");
12     const decrementButton = getByText("-");
13 
14     // Act
15     fireEvent.click(incrementButton);
16     // Assert
17     expect(counter.textContent).toEqual("1");
18 
19     // Act
20     fireEvent.click(decrementButton);
21     // Assert
22     expect(counter.textContent).toEqual("0");
23   });
24 });

 

编排（Arrange）

在编排这一步，我们需要完成2项任务：

• 渲染组件
• 获取所需的DOM的不同元素。

渲染组件可以使用 RTL‘s API 的 render 方法完成。签名如下：

 

function render(
  ui: React.ReactElement,
  options?: Omit<RenderOptions, ‘queries‘>
): RenderResult

ui 是你要加载的组件。options 通常不需要指定选项。如果要指定的话，如下值是对官方文档的简单摘录：

• container：React Testing库将创建一个div并将该div附加到文档中。而通过这个参数，可以自定义容器。
• baseElement：

如果指定了容器，则此值默认为该值，否则此值默认为document.documentElement。这将用作查询的基本元素，以及在使用debug()时打印的内容。

• hydrate：用于服务端渲染，使用 ReactDOM.hydrate 加载你的组件。
• wrapper：传递一个组件作为包裹层，将我们要测试的组件渲染在其中。这通常用于创建可以重用的自定义 render 函数，以便提供常用数据。
• queries：查询绑定。除非合并，否则将覆盖DOM测试库中的默认设置。

基本上，这个函数所做的就是使用ReactDOM呈现组件。在直接附加到document.body的新创建的div中呈现(或为服务器端呈现提供水合物)。因此，可以从DOM测试库和其他一些有用的方法(如debug、rerender或unmount)获得大量查询。

但你可能会想，这些问题是什么呢?有些实用程序允许您像用户那样查询DOM:通过标签文本、占位符和标题查找元素。以下是一些来自文档的查询示例:

• getByLabelText:搜索与作为参数传递的给定文本匹配的标签，然后查找与该标签关联的元素。
• getByText:搜索具有文本节点的所有元素，其中的textContent与作为参数传递的给定文本匹配。
• getByTitle:返回具有与作为参数传递的给定文本匹配的title属性的元素。
• getByPlaceholderText:搜索具有占位符属性的所有元素，并找到与作为参数传递的给定文本相匹配的元素。

一个特定的查询有很多变体:

• getBy:返回查询的第一个匹配节点，如果没有匹配的元素或找到多个匹配，则抛出一个错误。
• getAllBy:返回一个查询中所有匹配节点的数组，如果没有匹配的元素，则抛出一个错误。
• queryBy:返回查询的第一个匹配节点，如果没有匹配的元素，则返回null。这对于断言不存在的元素非常有用。
• queryAllBy:返回一个查询的所有匹配节点的数组，如果没有匹配的元素，则返回一个空数组([])。
• findBy：返回一个promise，该promise将在找到与给定查询匹配的元素时解析。如果未找到任何元素，或者在默认超时时间为4500毫秒后找到了多个元素，则承诺将被拒绝。
• findAllBy：返回一个promise，当找到与给定查询匹配的任何元素时，该promise将解析为元素数组。

执行（Act）

现在一切都准备好了，我们可以行动了。为此，我们大部分时间使用了来自DOM测试库的fireEvent，其签名如下:

 

fireEvent(node: htmlElement, event: Event)

简单地说，这个函数接受一个DOM节点(您可以使用上面看到的查询查询它!)并触发DOM事件，如单击、焦点、更改等。您可以在这里找到许多其他可以调度的事件。

我们的例子相当简单，因为我们只是想点击一个按钮，所以我们只需:

 

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

断言（Assert）

接下来是最后一部分。触发事件通常会触发应用程序中的一些更改，因此我们必须执行一些断言来确保这些更改发生。在我们的测试中，这样做的一个好方法是确保呈现给用户的计数已经更改。因此，我们只需断言textContent属性的计数器是递增或递减:

 

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

恭喜你，到这里你已经将我们的示例拆解成功。 ??

注意:这个AAA模式并不特定于测试库。事实上，它甚至是任何测试用例的一般结构。我在这里向您展示这个是因为我发现测试库如何方便地在每个部分中编写测试是一件很有趣的事情。

8个典型的例子

到这里，就进入实战阶段了 。

安装依赖的同时可以简单看下我们的项目。src/test 目录下存放了所有单元测试相关的文件。让我们清空这个文件夹，再将下面的示例依次手过一遍。??（CV也是可以的??）

1.如何创建测试快照

快照，顾名思义，允许我们保存给定组件的快照。当您进行更新或重构，并希望获取或比较更改时，它会提供很多帮助。

现在，让我们看一下 App.js 文件的快照。

App.test.js

 

 1 import React from ‘react‘
 2 import {render, cleanup} from ‘@testing-library/react‘
 3 import App from ‘../App‘
 4 
 5  afterEach(cleanup)
 6  
 7  it(‘should take a snapshot‘, () => {
 8     const { asFragment } = render(<App />)
 9     
10     expect(asFragment()).toMatchSnapshot()
11 })

 

要获取快照，我们首先必须导入 render 和 cleanup 。这两种方法将在本文中大量使用。

render，顾名思义，有助于渲染React组件。cleanup 作为一个参数传递给 afterEach ，以便在每次测试后清理所有东西，以避免内存泄漏。

接下来，我们可以使用 render 呈现App组件，并从方法中获取 asFragment 作为返回值。最后，确保App组件的片段与快照匹配。

现在，要运行测试，打开您的终端并导航到项目的根目录，并运行以下命令:

 

npm test

因此，它将创建一个新的文件夹 __snapshots__ 和一个文件 App.test.js:

App.test.js.snap

 

 1 // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 
 3 exports[`should take a snapshot 1`] = `
 4 <DocumentFragment>
 5   <div
 6     class="App"
 7   >
 8     <h1>
 9       Testing Updated
10     </h1>
11   </div>
12 </DocumentFragment>
13 `;

 

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

2.测试DOM元素

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

TestElements.js

 

 1 import React from ‘react‘
 2 
 3 const TestElements = () => {
 4  const [counter, setCounter] = React.useState(0)
 5   
 6  return (
 7   <>
 8     <h1 data-testid="counter">{ counter }</h1>
 9     <button data-testid="button-up" onClick={() => setCounter(counter + 1)}> Up</button>
10     <button disabled data-testid="button-down" onClick={() => setCounter(counter - 1)}>Down</button>
11  </>
12     )
13   }
14   
15   export default TestElements

 

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

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

TestElements.test.js

 

 1 import React from ‘react‘;
 2 import "@testing-library/jest-dom/extend-expect";
 3 import { render, cleanup } from ‘@testing-library/react‘;
 4 import TestElements from ‘../components/TestElements‘
 5 
 6 afterEach(cleanup);
 7 
 8   it(‘should equal to 0‘, () => {
 9     const { getByTestId } = render(<TestElements />); 
10     expect(getByTestId(‘counter‘)).toHaveTextContent(0)
11    });
12 
13    it(‘should be enabled‘, () => {
14     const { getByTestId } = render(<TestElements />);
15     expect(getByTestId(‘button-up‘)).not.toHaveAttribute(‘disabled‘)
16   });
17 
18   it(‘should be disabled‘, () => {
19     const { getByTestId } = render(<TestElements />); 
20     expect(getByTestId(‘button-down‘)).toBeDisabled()
21   });

 

正如您所看到的，语法与前面的测试非常相似。唯一的区别是,我们使用 getByTestId 选择必要的元素(根据 data-testid )并检查是否通过了测试。换句话说，我们检查 <h1 data-testid="counter">{ counter }</h1> 中的文本内容是否等于0。

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

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

3.测试事件

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

 

 1 import React from ‘react‘
 2 
 3 const TestEvents = () => {
 4   const [counter, setCounter] = React.useState(0)
 5   
 6 return (
 7   <>
 8     <h1 data-testid="counter">{ counter }</h1>
 9     <button data-testid="button-up" onClick={() => setCounter(counter + 1)}> Up</button>
10     <button data-testid="button-down" onClick={() => setCounter(counter - 1)}>Down</button>
11  </>
12     )
13   }
14   
15   export default TestEvents

 

现在，让我们编写测试。

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

 

 1 import React from ‘react‘;
 2 import "@testing-library/jest-dom/extend-expect";
 3 import { render, cleanup, fireEvent } from ‘@testing-library/react‘;
 4 import TestEvents from ‘../components/TestEvents‘
 5 
 6   afterEach(cleanup);
 7   
 8   it(‘increments counter‘, () => {
 9     const { getByTestId } = render(<TestEvents />); 
10     
11     fireEvent.click(getByTestId(‘button-up‘))
12 
13     expect(getByTestId(‘counter‘)).toHaveTextContent(‘1‘)
14   });
15 
16   it(‘decrements counter‘, () => {
17     const { getByTestId } = render(<TestEvents />); 
18     
19     fireEvent.click(getByTestId(‘button-down‘))
20 
21     expect(getByTestId(‘counter‘)).toHaveTextContent(‘-1‘)
22   });

 

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

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

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

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

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

4. 测试异步操作

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

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

 

 1 import React from ‘react‘
 2 
 3 const TestAsync = () => {
 4   const [counter, setCounter] = React.useState(0)
 5 
 6   const delayCount = () => (
 7     setTimeout(() => {
 8       setCounter(counter + 1)
 9     }, 500)
10   )
11   
12 return (
13   <>
14     <h1 data-testid="counter">{ counter }</h1>
15     <button data-testid="button-up" onClick={delayCount}> Up</button>
16     <button data-testid="button-down" onClick={() => setCounter(counter - 1)}>Down</button>
17  </>
18     )
19   }
20   
21   export default TestAsync

 

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

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

TestAsync.test.js

 

 1 import React from ‘react‘;
 2 import "@testing-library/jest-dom/extend-expect";
 3 import { render, cleanup, fireEvent, waitForElement } from ‘@testing-library/react‘;
 4 import TestAsync from ‘../components/TestAsync‘
 5 
 6 afterEach(cleanup);
 7   
 8   it(‘increments counter after 0.5s‘, async () => {
 9     const { getByTestId, getByText } = render(<TestAsync />); 
10 
11     fireEvent.click(getByTestId(‘button-up‘))
12 
13     const counter = await waitForElement(() => getByText(‘1‘)) 
14 
15     expect(counter).toHaveTextContent(‘1‘)
16 
17 });

 

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

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

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

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

你准备好了吗?

5.测试 React Redux

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

TestRedux.js

 

 1 import React from ‘react‘
 2 import { connect } from ‘react-redux‘
 3 
 4 const TestRedux = ({counter, dispatch}) => {
 5 
 6  const increment = () => dispatch({ type: ‘INCREMENT‘ })
 7  const decrement = () => dispatch({ type: ‘DECREMENT‘ })
 8   
 9  return (
10   <>
11     <h1 data-testid="counter">{ counter }</h1>
12     <button data-testid="button-up" onClick={increment}>Up</button>
13     <button data-testid="button-down" onClick={decrement}>Down</button>
14  </>
15     )
16   }
17   
18 export default connect(state => ({ counter: state.count }))(TestRedux)

 

store/reducer.js

 

 1 export const initialState = {
 2     count: 0,
 3   }
 4   
 5   export function reducer(state = initialState, action) {
 6     switch (action.type) {
 7       case ‘INCREMENT‘:
 8         return {
 9           count: state.count + 1,
10         }
11       case ‘DECREMENT‘:
12         return {
13           count: state.count - 1,
14         }
15       default:
16         return state
17     }
18   }

 

正如您所看到的，没有什么特别的。
它只是一个由 React Redux 处理的基本计数器组件。

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

测试初始状态是否为0:

 

 1 import React from ‘react‘
 2 import "@testing-library/jest-dom/extend-expect";
 3 import { createStore } from ‘redux‘
 4 import { Provider } from ‘react-redux‘
 5 import { render, cleanup, fireEvent } from ‘@testing-library/react‘;
 6 import { initialState, reducer } from ‘../store/reducer‘
 7 import TestRedux from ‘../components/TestRedux‘
 8 
 9 const renderWithRedux = (
10   component,
11   { initialState, store = createStore(reducer, initialState) } = {}
12 ) => {
13   return {
14     ...render(<Provider store={store}>{component}</Provider>),
15     store,
16   }
17 }
18 
19  afterEach(cleanup);
20 
21 it(‘checks initial state is equal to 0‘, () => {
22     const { getByTestId } = renderWithRedux(<TestRedux />)
23     expect(getByTestId(‘counter‘)).toHaveTextContent(‘0‘)
24   })
25 
26   it(‘increments the counter through redux‘, () => {
27     const { getByTestId } = renderWithRedux(<TestRedux />, 
28       {initialState: {count: 5}
29   })
30     fireEvent.click(getByTestId(‘button-up‘))
31     expect(getByTestId(‘counter‘)).toHaveTextContent(‘6‘)
32   })
33   
34   it(‘decrements the counter through redux‘, () => {
35     const { getByTestId} = renderWithRedux(<TestRedux />, {
36       initialState: { count: 100 },
37     })
38     fireEvent.click(getByTestId(‘button-down‘))
39     expect(getByTestId(‘counter‘)).toHaveTextContent(‘99‘)
40   })

 

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

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

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

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

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

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

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

6. 测试 React Context

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

 

 1 import React from "react"
 2 
 3 export const CounterContext = React.createContext()
 4 
 5 const CounterProvider = () => {
 6   const [counter, setCounter] = React.useState(0)
 7   const increment = () => setCounter(counter + 1)
 8   const decrement = () => setCounter(counter - 1)
 9 
10   return (
11     <CounterContext.Provider value={{ counter, increment, decrement }}>
12       <Counter />
13     </CounterContext.Provider>
14   )
15 }
16 
17 export const Counter = () => {  
18     const { counter, increment, decrement } = React.useContext(CounterContext)   
19     return (
20      <>
21        <h1 data-testid="counter">{ counter }</h1>
22        <button data-testid="button-up" onClick={increment}> Up</button>
23        <button data-testid="button-down" onClick={decrement}>Down</button>
24     </>
25        )
26 }
27 
28 export default CounterProvider

 

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

测试初始状态是否为0:

TextContext.test.js

 

 1 import React from ‘react‘
 2 import "@testing-library/jest-dom/extend-expect";
 3 import { render, cleanup,  fireEvent } from ‘@testing-library/react‘
 4 import CounterProvider, { CounterContext, Counter } from ‘../components/TestContext‘
 5 
 6 const renderWithContext = (
 7   component) => {
 8   return {
 9     ...render(
10         <CounterProvider value={CounterContext}>
11             {component}
12         </CounterProvider>)
13   }
14 }
15 
16 afterEach(cleanup);
17 
18 it(‘checks if initial state is equal to 0‘, () => {
19     const { getByTestId } = renderWithContext(<Counter />)
20     expect(getByTestId(‘counter‘)).toHaveTextContent(‘0‘)
21 })
22 
23 it(‘increments the counter‘, () => {
24     const { getByTestId } = renderWithContext(<Counter />)
25 
26     fireEvent.click(getByTestId(‘button-up‘))
27     expect(getByTestId(‘counter‘)).toHaveTextContent(‘1‘)
28   })
29 
30   it(‘decrements the counter‘, () => {
31     const { getByTestId} = renderWithContext(<Counter />)
32 
33     fireEvent.click(getByTestId(‘button-down‘))
34     expect(getByTestId(‘counter‘)).toHaveTextContent(‘-1‘)
35   })

 

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

现在，我们可以测试计数器最初是否等于0。
那么，计数器的增减是否正确呢？

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

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

7. 测试 React Router

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

TestRouter.js

 

 1 import React from ‘react‘
 2 
 3 import { Link, Route, Switch,  useParams } from ‘react-router-dom‘
 4 
 5 const About = () => <h1>About page</h1>
 6 
 7 const Home = () => <h1>Home page</h1>
 8 
 9 const Contact = () => {
10  const { name } = useParams()
11 
12  return <h1 data-testid="contact-name">{name}</h1>
13 }
14 
15 const TestRouter = () => {
16     const name = ‘John Doe‘
17     return (
18     <>
19     <nav data-testid="navbar">
20       <Link data-testid="home-link" to="/">Home</Link>
21       <Link data-testid="about-link" to="/about">About</Link>
22       <Link data-testid="contact-link" to={`/contact/${name}`}>Contact</Link>
23     </nav>
24     
25       <Switch>
26         <Route exact path="/" component={Home} />
27         <Route path="/about" component={About} />
28         <Route path="/about:name" component={Contact} />
29       </Switch>
30     </>
31   )
32 }
33 
34 export default TestRouter

 

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

TestRouter.test.js

 

 1 import React from ‘react‘
 2 import "@testing-library/jest-dom/extend-expect";
 3 import { Router } from ‘react-router-dom‘
 4 import { render, fireEvent } from ‘@testing-library/react‘
 5 import { createMemoryHistory } from ‘history‘
 6 import TestRouter from ‘../components/TestRouter‘
 7 
 8 
 9 const renderWithRouter = (component) => {
10     const history = createMemoryHistory()
11     return { 
12     ...render (
13     <Router history={history}>
14         {component}
15     </Router>
16     )
17   }
18 }
19 
20 it(‘should render the home page‘, () => {
21 
22   const { container, getByTestId } = renderWithRouter(<TestRouter />) 
23   const navbar = getByTestId(‘navbar‘)
24   const link = getByTestId(‘home-link‘)
25 
26   expect(container.innerHTML).toMatch(‘Home page‘)
27   expect(navbar).toContainElement(link)
28 })
29 
30 it(‘should navigate to the about page‘, ()=> {
31     const { container, getByTestId } = renderWithRouter(<TestRouter />) 
32   
33     fireEvent.click(getByTestId(‘about-link‘))
34   
35     expect(container.innerHTML).toMatch(‘About page‘)
36   })
37   
38   it(‘should navigate to the contact page with the params‘, ()=> {
39     const { container, getByTestId } = renderWithRouter(<TestRouter />) 
40      
41     fireEvent.click(getByTestId(‘contact-link‘))
42      
43     expect(container.innerHTML).toMatch(‘John Doe‘)
44   })

 

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

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

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

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

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

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

8. 测试HTTP请求

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

 

 1 import React from ‘react‘
 2 import axios from ‘axios‘
 3 
 4 const TestAxios = ({ url }) => {
 5   const [data, setData] = React.useState()
 6 
 7   const fetchData = async () => {
 8     const response = await axios.get(url)
 9     setData(response.data.greeting)    
10  }     
11  
12  return (
13   <>
14     <button onClick={fetchData} data-testid="fetch-data">Load Data</button>
15     { 
16     data ?
17     <div data-testid="show-data">{data}</div>:
18     <h1 data-testid="loading">Loading...</h1>
19     }
20   </>
21      )
22 
23 }
24 
25 export default TestAxios

 

正如您在这里看到的，我们有一个简单的组件，它有一个用于发出请求的按钮。如果数据不可用，它将显示一个加载消息。

现在，让我们编写测试。

来验证数据是否正确获取和显示:

TextAxios.test.js

 

 1 import React from ‘react‘
 2 import "@testing-library/jest-dom/extend-expect";
 3 import { render, waitForElement, fireEvent } from ‘@testing-library/react‘
 4 import axiosMock from ‘axios‘
 5 import TestAxios from ‘../components/TestAxios‘
 6 
 7 jest.mock(‘axios‘)
 8 
 9 it(‘should display a loading text‘, () => {
10 
11  const { getByTestId } = render(<TestAxios />)
12 
13   expect(getByTestId(‘loading‘)).toHaveTextContent(‘Loading...‘)
14 })
15 
16 it(‘should load and display the data‘, async () => {
17   const url = ‘/greeting‘
18   const { getByTestId } = render(<TestAxios url={url} />)
19 
20   axiosMock.get.mockResolvedValueOnce({
21     data: { greeting: ‘hello there‘ },
22   })
23 
24   fireEvent.click(getByTestId(‘fetch-data‘))
25 
26   const greetingData = await waitForElement(() => getByTestId(‘show-data‘))
27 
28   expect(axiosMock.get).toHaveBeenCalledTimes(1)
29   expect(axiosMock.get).toHaveBeenCalledWith(url)
30   expect(greetingData).toHaveTextContent(‘hello there‘)
31 })

 

这个测试用例有点不同，因为我们必须处理HTTP请求。为此，我们必须在jest.mock(‘axios‘)的帮助下模拟axios请求。

现在，我们可以使用axiosMock并对其应用get()方法。最后，我们将使用Jest函数mockResolvedValueOnce()来传递模拟数据作为参数。

现在，对于第二个测试，我们可以单击按钮来获取数据并使用async/await来解析它。现在我们要测试三件事:

• 如果HTTP请求已经正确完成
• 如果使用url完成了HTTP请求
• 如果获取的数据符合期望。

对于第一个测试，我们只检查加载消息在没有数据要显示时是否显示。

也就是说，我们现在已经完成了八个简单的步骤来测试你的React应用程序。

结语

React Testing Library 是用于测试 React 应用的一大利器。它为我们提供了访问 jest-dom 匹配器的机会，以及最佳实践，使得我们可以使用它来更有效地测试我们的组件。希望这篇文章是有用的，它将帮助您在未来构建更加健壮的 React 应用程序。