单元测试初探——从JEST到开发实践

2023-09-22 12:11:51

作为一名后端工程师，对于单元测试并不陌生，但是真正实践起来的时候，却发现还是有很多细节需要注意的。最近开始学习React，并尝试结合typescript和jest来进行单元测试，也算是初次尝试前端单元测试。本文将记录自己在学习jest测试框架过程中的一些关键知识点和粗浅的理解，并结合一个React+ts的项目来演示如何添加单元测试。

1. Jest简介

Jest是一个流行的JavaScript测试框架，由Facebook开发和维护。它支持各种JavaScript项目，包括React、Angular和Vue.js。Jest使用了一种独特的快照测试方法，它可以捕获组件的输出，并在以后的测试中进行比较。这种方法可以帮助确保组件在不同的输入下始终返回相同的结果。

2. Jest原理

Jest通过一系列的测试运行器和断言库来实现其测试功能。它将测试代码编译成JavaScript文件，并在Node.js环境中运行。Jest提供了多种断言方法，用于比较测试结果与预期结果。

3. Jest安装使用

Jest可以通过npm或yarn安装：

npm install --save-dev jest

yarn add --dev jest

安装完成后，可以在项目根目录下创建jest.config.js文件来配置Jest。在这个文件中，可以指定测试文件的位置、测试运行器、断言库等。

4. React + TS项目添加单元测试

4.1 创建React+TS项目

首先，创建一个新的React项目，可以使用create-react-app工具：

npx create-react-app my-app --typescript

4.2 安装Jest

接下来，安装Jest：

npm install --save-dev jest

4.3 创建测试文件

在项目根目录下创建test文件夹，并在其中创建一个名为App.test.tsx的文件。这个文件将包含对App组件的测试代码。

4.4 编写测试代码

在App.test.tsx文件中，编写测试代码：

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

4.5 运行测试

可以在命令行中运行以下命令来运行测试：

npm run test

如果测试通过，将会看到类似这样的输出：

PASS  ./App.test.tsx
  ✓ renders learn react link (10ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.29s
Ran all test suites.