React 测试

优质

小牛编辑

128浏览

2023-12-01

在了解上面的一些React基本概念过后，我们就可以来使用TDD的思想来进行我们开发了。

Create React App默认使用Jest进行测试，所以你需要先安装jest-cli，进入到client根目录：

$ npm install jest-cli@20.0.4 --save-dev

注意版本

在安装的时候最好和我这里的版本保持一致，因为其他的版本可能会有其他问题，就需要自己去踩坑了哦~~~

另外我们还需要使用Enzyme - Airbnb出品的一个专门用于测试React组件的非常好用的库，同样的安装Enzyme：

$ npm install --save-dev enzyme@3.1.0 enzyme-adapter-react-16@1.0.2

为了让Enzyme配置React 16的adapter，在src目录下面新增一个setupTests.js的文件：

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({adapter: new Adapter()});

关于Enzyme的更多用法，可以前往官方文档查看。

配置完成后，就可以运行测试命令了：

$ npm test
No tests found related to files changed since last commit.

默认上面的测试命令运行在watch模式下面，所以你每次更改了代码后都会重新执行一遍。

112/5000 与Jest一起，我们将使用Enzyme，一个专门用于测试React组件的梦幻般的实用程序库。

组件测试¶

在components文件夹下面新建文件UserList.test.js：

import React from 'react';
import { shallow } from 'enzyme';
import UserList from './UserList';

const users = [
    {
        'active': true,
        'email': 'icnych@gmail.com',
        'id': 1,
        'username': 'cnych'
    }, {
        'active': true,
        'email': 'qikqiak@gmail.com',
        'id': 2,
        'username': 'qikqiak'
    }
];

test('UserList renders property', () => {
    const wrapper = shallow(<UserList users={users} />);
    const element = wrapper.find('h4');
    expect(element.length).toBe(2);
    expect(element.get(0).props.className).toBe('well');
    expect(element.get(0).props.children).toBe('cnych');
});

上面的测试代码中，我们使用了一个shallow的方法来创建UserList组件，然后我们就可以对它的输出进行断言测试了，使用shallow可以完全的隔离组件进行测试，这有助于子组件不会对测试结果产生影响。

有关shallow的更多信息，以及组件渲染的其他方法，可以参阅StackOverflow 这篇文章，当然你也可以到官网查看。

然后继续运行测试，看是否正常通过：

$ npm run test
 PASS  src/components/UserList.test.js
  ✓ UserList renders property (11ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.38s
Ran all test suites related to changed files.

如果测试没通过，请检查下测试代码，已经测试依赖包的版本是否兼容。

快照测试¶

上面的测试通过后，我们可以增加一个快照测试来保证UI界面不会改变。增加下面的代码到UserList.test.js文件中：

test('UserList renders a snapshot properly', () => {
  const tree = renderer.create(<UsersList users={users}/>).toJSON();
  expect(tree).toMatchSnapshot();
});

记得在文件顶部导入renderer：

import renderer from 'react-test-renderer';

然后继续运行测试命令，在第一次测试运行时，会将组件输出的快照保存到__snapshots__文件夹中。然后在以后的测试中，将新输出的快照与保存的快照进行比较，如果不同，则测试失败。

由于测试在watch模式下，我们将UserList组件中的{user.username}更改为{user.email}，保存后触发新的测试，我们可以看到测试失败了：

Snapshot Summary
 › 1 snapshot test failed in 1 test suite. Inspect your code changes or press `u` to update them.

Test Suites: 1 failed, 1 total
Tests:       2 failed, 2 total
Snapshots:   1 failed, 1 total
Time:        1.609s
Ran all test suites related to changed files.

根据上面的提示，如果我们的目的就是要更改上面的组件，那么就需要更新快照，我们只需要输入u键即可：

Watch Usage
 › Press a to run all tests.
 › Press u to update failing snapshots.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.

输入u键过后我们可以看到快照测试通过了，当然了我们还需要相应的更改上面组件测试中的期望值，确保测试通过后，将文件夹__snapshots__加入到.gitignore文件中，然后提交代码。