2023基础教程：使用Jest测试React组件

在 React 中编写基本测试

如果尚未创建 ProductHeader.test.js 文件，请创建该文件。我们的测试基本上如下所示：

src/components/__tests__/ProductList.test.js

describe('ProductHeader', () => {

  it('passing test', () => {
    expect(true).toBeTruthy();
  })

  it('failing test', () => {
    expect(false).toBeTruthy();
  })
})

测试套件以 describe 块开始，这是一个接受两个参数的全局 Jest 函数。第一个参数是测试套件的标题，第二个参数是实际的实现。测试套件中的每个 it() 对应于一个测试或一个规范。测试包含一个或多个检查代码状态的期望。

expects(true).toBeTruthy();

在 Jest 中，期望是返回 true 或 false 的断言。当规范中的所有断言都为真时，就可以说它通过了。否则，测试将失败。

例如，我们创建了两个测试规范。第一个显然应该通过，第二个应该失败。

注意：toBeTruthy() 是预定义的匹配器。在 Jest 中，每个匹配器都会对期望值和实际值进行比较并返回一个布尔值。还有更多可用的匹配器，我们稍后会介绍它们。

运行测试套件

create-react-app 已设置执行测试套件所需的一切。您所需要做的就是运行以下命令：

yarn test

您应该看到类似这样的内容：

要使失败的测试通过，您必须将 toBeTruthy() 匹配器替换为toBeFalsy()。

expects(false).toBeFalsy();

就是这样！

在 Jest 中使用匹配器

如前所述，Jest 使用匹配器来比较值。您可以使用它来检查相等性、比较两个数字或字符串以及验证表达式的真实性。以下是 Jest 中可用的热门匹配器列表。

• toBe();
• toBeNull()
• toBeDefined()
• toBeUndefine()
• toBeTruthy()
• toBeFalsy()
• toBeGreaterThan()

• toBeLesserThan()
• toMatch()
• toContain()

这只是一种味道。您可以在参考文档中找到所有可用的匹配器。

测试 React 组件

首先，我们将为 ProductHeader 组件编写一些测试。打开 ProductHeader.js 文件（如果尚未打开）。

src/components/ProductHeader.js

import React, {Component} from 'react';
   
class ProductHeader extends Component  {
    render() {
        return(
            <h2 className="title"> Product Listing Page </h2>
        );
    }
};
export default ProductHeader;

您是否想知道为什么我在这里使用类组件而不是函数组件？原因是使用 ReactTestUtils 测试功能组件比较困难。如果您想知道原因，这个 Stack Overflow 讨论就有答案。

我们可以使用以下假设编写测试：

1. 该组件应呈现 h2 标记。
2. h2 标记应该有一个名为 title 的类。

为了渲染组件并检索相关的 DOM 节点，我们需要 ReactTestUtils。删除虚拟规格并添加以下代码：

src/components/__tests__/ProductHeader.test.js

import React from 'react';
import ReactTestUtils from 'react-dom/test-utils'; 
import ProductsList from '../ProductsList';

describe('ProductHeader Component', () => {

    it('has an h2 tag', () => {
     //Test here
    });
  
    it('is wrapped inside a title class', () => {
     //Test here
    })
  })

要检查 h2 节点是否存在，我们首先需要将 React 元素渲染到文档中的 DOM 节点中。您可以借助 ReactTestUtils 导出的一些 API 来完成此操作。例如，要渲染我们的 组件，您可以执行以下操作：

 const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    

然后，您可以借助 findRenderedDOMComponentWithTag('tag-name') 从组件中提取 h2 标签。它检查所有子节点并找到与 tag-name 匹配的节点。

这是整个测试规范。

    it('has an h2 tag', () => {

      const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    
      var h2 = ReactTestUtils.findRenderedDOMComponentWithTag(
       component, 'h2'
     );
    
  });

尝试保存它，您的测试运行程序应该向您显示测试已通过。这有点令人惊讶，因为我们没有像前面的示例中那样的 expect() 语句。 ReactTestUtils 导出的大多数方法都内置了期望。在这种特殊情况下，如果测试实用程序无法找到 h2 标记，它将抛出错误并且测试将自动失败。

现在，尝试为第二个测试创建代码。您可以使用 findRenderedDOMcomponentWithClass() 来检查是否有任何带有“title”类的节点。

    it('has a title class', () => {

      const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    
      var node = ReactTestUtils.findRenderedDOMComponentWithClass(
       component, 'title'
     );
    })

就是这样！如果一切顺利，您应该会看到绿色的结果。

结论

虽然我们刚刚编写了两个测试规范，但我们已经在此过程中涵盖了很多基础知识。在下一篇文章中，我们将为我们的产品列表页面编写一些完整的测试。我们还将用 Enzyme 替换 ReactTestUtils。为什么？ Enzyme 提供了一个非常易于使用且对开发人员友好的高级界面。请继续关注第二部分！

如果您在任何时候感到困难或需要帮助，请在评论中告诉我们。