react-testing-library

概述

类似 springboot 中的单元测试，是前端的单元测试工具。通过下面三种方式测试自己封装的组件

• 组件渲染（render）
• 元素查找（get/query/find）
• 事件触发（fireEvent）

安装与部署

yarn add @testing-library/react

测试案例

最简案例

自己封装的组件 button ，在其目录下创建单测文件 src/button/index.test.tsx ，其完整代码如下

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

test('renders Button',() => {
    render(<Button>click me</Button>);
    const linkElement = screen.getByText(/click me/i);
    expect(linkElement).toBeInTheDocument();
});

test('renders primary Button',() => {
    const { container } = render(<Button type="primary">click me</Button>);
    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
    expect(container.querySelector('.ant-btn-primary')).toBeInTheDocument();
})

在 cmd 中切换路径到项目的根目录下并运行命令 yarn test，可以看到如下提示说明上面代码的两个测试方法都通过了

react-testing-library单测通过提示