Jest单测实践篇

2023-09-05 阅读 129 评论 0

摘要：快照测试快照测试在你要确保你的UI没有发生改变的时候非常有用。jest的快照测试为文本测试，第一次执行时存储本次的快照，然后在之后的测试过程中进行文本比对。 toMatchSnapshot() 方法 import React from 'react'; import Link from '../Link.rea

快照测试

快照测试在你要确保你的UI没有发生改变的时候非常有用。jest的快照测试为文本测试，第一次执行时存储本次的快照，然后在之后的测试过程中进行文本比对。

toMatchSnapshot() 方法

import React from 'react';
import Link from '../Link.react';
import renderer from 'react-test-renderer';it('renders correctly', () => {const tree = renderer.create(<Link page="http://www.facebook.com">Facebook</Link>).toJSON();expect(tree).toMatchSnapshot();
});

The snapshot artifact should be committed alongside code changes, and reviewed as part of your code review process.
注意生成的快照文件应该和代码的变更一起被提交和Review。

如何更新快照

有时候快照测试不通过是因为组件更新了，那么快照如何更新呢？

（1）你可以通过jest --updateSnapshot or jest -u 方法来让jest为所有快照测试失败的组件重新生成快照。如果你想精确控制哪些快照被更新，可以用–testNamePattern参数指定正则表达式。

(2) 使用watch模式来更新 jest --watch

在这里插入图片描述
按i可以交互式的更新失败的快照。

更多请参考：
https://jestjs.io/docs/en/snapshot-testing

如何测试回调函数被成功调用

测试回调函数被调用

(1) 使用jest.fn()函数生成模拟函数

const onDropdownVisibleChange = jest.fn();

(2) 在组件的回调中指定该模拟函数为回调函数

const wrapper = mount(<Select open onDropdownVisibleChange={onDropdownVisibleChange}><Option value="1">1</Option></Select>,
);

(3-1) 模拟点击后进行断言，toHaveBeenLastCalledWith断言被特定参数调用

wrapper.find('.ant-select').simulate('click');
expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(false);

完整实例:

const onDropdownVisibleChange = jest.fn();
const wrapper = mount(<Select open onDropdownVisibleChange={onDropdownVisibleChange}><Option value="1">1</Option>
</Select>,
);
wrapper.find('.ant-select').simulate('click');
expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(false);

(3-2) 模拟点击后进行断言，toHaveBeenCalled断言被调用

const onDropdownVisibleChange = jest.fn();
const wrapper = mount(<Select open onDropdownVisibleChange={onDropdownVisibleChange}><Option value="1">1</Option>
</Select>,
);
wrapper.find('.ant-select').simulate('click');
expect(onDropdownVisibleChange).toHaveBeenCalled();

如何测试有时间方法的组件

jest.useFakeTimers: 模拟时间流逝

通常一些本地的时间方法比如setTimeout等不太适合测试环境，因为这些方法会依赖真实的时间流逝。jest可以交换这些时间函数，控制时间的推移，比方说:

beforeAll(() => {jest.useFakeTimers();
});// 或者有多个测试用例使用在每个测试用例执行之前执行
beforeEach(() => {jest.useFakeTimers();
});

jest.runAllTimers()：控制时间运行

还有一些测试用例用于测试某个回调一秒后会被调用:

test('calls the callback after 1 second', () => {const timerGame = require('../timerGame');const callback = jest.fn();timerGame(callback);// 这个时间点还没有被调用expect(callback).not.toBeCalled();// 快进，让所有时间回调都执行jest.runAllTimers();// 现在回调被调用expect(callback).toBeCalled();expect(callback).toHaveBeenCalledTimes(1);
});

jest.useRealTimers(): 使用真实的时间

在测试过程中可能想要恢复时间正常流逝，可以使用useRealTimers()方法恢复

更多关于时间控制的方法关注：
Timer Mocks · Jest

如何模拟事件进行测试

wrapper.simulate()方法

wrapper.find(‘a’).simulate(‘click’);

如:

class Foo extends React.Component {constructor(props) {super(props);this.state = { count: 0 };}render() {const { count } = this.state;return (<div><div className={`clicks-${count}`}>{count} clicks</div><a href="url" onClick={() => { this.setState({ count: count + 1 }); }}>Increment</a></div>);}
}const wrapper = shallow(<Foo />);expect(wrapper.find('.clicks-0').length).to.equal(1);
wrapper.find('a').simulate('click');
expect(wrapper.find('.clicks-1').length).to.equal(1);

模拟input框输入

wrapper.find('.ant-input').simulate('change', { target: { value: 'test' } });

模拟checkbox change输入

wrapper.find('.ant-checkbox-input').at(0).simulate('change', { target: { checked: true } });

如何测试方法被正确的参数调用

比方说antd的一个测试用例是检测用户如果全量引入antd的包，而不是动态引入组件的话，那么会有个提示，怎么验证这个提示被成功展示了呢？

jest.spyOn()方法

(1) 监控对应的方法，如这里是console.warn方法，但是不让他真的输出出来。

const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});

(2)使用断言toBeCalledWith，被用xxx参数调用

expect(warnSpy).toBeCalledWith('You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.',);

(3) 恢复

warnSpy.mockRestore();

更多参考：https://jestjs.io/docs/jest-object

如何测试组件的属性与状态是否正确

wrapper.props() 获取当前的组件属性

expect(dropdownWrapper.props().visible).toBe(true);

设置属性

wrapper.setProps({ open: false });

wrapper.instance().state 获取当前对象状态

expect(wrapper.instance().state.status).toBe(0);
expect(wrapper.instance().state.placeholderStyle).toBe(undefined);

如何测试debounce过的方法

如果说组件代码中使用了debounce方法，比方说经常我们需要用debounce去控制请求的发送频率:

import debounce from 'lodash/debounce';
//...
this.fetchData = debounce(this.fetchUserData, this.props.delayTime);

但是在测试用例中怎么去让debounce返回的函数被立即执行呢？毕竟原函数默认是需要delay一段时间后再执行的，答案是可以使用jest的mock方法。

测试步骤

1. 在测试用例中引入debounce

import debounce from 'lodash/debounce';

2. 使用jest.mock运行这个函数，给他加上mock方法

jest.mock('lodash/debounce');

这样 debounce 方法中就会被加上 mockImplementation 以及 mockRestore 方法

3. 在运行测试用例前mock该函数实现，运行测试用例后restore

beforeEach(() => {jest.useFakeTimers();debounce.mockImplementation(fn => fn);
});afterEach(() => {jest.useRealTimers();debounce.mockRestore();
});

比方说在 beforeEach 和 afterEach 中分别调用 mockImplementation 和 mockRestore ， fn => fn 的含义是指返回这个函数本身，比方说:

this.fetchData = debounce(this.fetchUserData, this.props.delayTime);

运行完debounce函数后， this.fetchData === this.fetchUserData ，那么调用 this.fetchData 函数的时候请求就会立即执行了。

测试用例案例

一个完整的测试用例的案例参考如下:

import * as React from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import { mount } from 'enzyme';
import debounce from 'lodash/debounce';
import UserSearch from '../index';jest.mock('lodash/debounce');describe('<UserSearch />', () => {beforeEach(() => {jest.useFakeTimers();debounce.mockImplementation(fn => fn);});afterEach(() => {jest.useRealTimers();debounce.mockRestore();});it('should stop fetching if users empty', done => {const wrapper = mount(<UserSearch userSearchRequest={() => Promise.resolve([])} />,);wrapper.find('input').simulate('change', { target: { value: '1' } });jest.runAllTimers();process.nextTick(() => {wrapper.update();expect(wrapper.instance().state.fetching).toBe(false);done();});});});

如何测试返回promise的方法

异步方法通常都具有不确定性，promise的方法也是，但是我们希望在函数调用后立即能够看到组件的执行效果，怎么办呢？答案是使用 process.nextTick() 方法。

比方说我的promise方法是这样:

fetchData = query => {const { userSearchRequest } = this.props;userSearchRequest &&userSearchRequest({ query }).then(users => {...dataSource = ...;this._mounted && this.setState({ dataSource, fetching: false });}).catch(err => {this._mounted && this.setState({ fetching: false });});};

在promise完成之后setState，我希望去测试setState之后的效果，相应的测试用例如下:

it('should stop fetching if users empty', done => {const wrapper = mount(<UserSearch userSearchRequest={() => Promise.resolve([])} />,);wrapper.find('input').simulate('change', { target: { value: '1' } });jest.runAllTimers();process.nextTick(() => {wrapper.update();expect(wrapper.instance().state.fetching).toBe(false);done();});});

nextTick 会在目前队列中的所有事件完成之后执行，保证了promise方法此时已经完成执行。

如何测试moment相关方法

在我们的测试当中涉及日期组件的时候，进行snapshot测试会出现snapshot总是不通过的问题，那是因为moment总是获取当前的日期，造成snapshot的变化，为了解决这个问题，我们可以mock日期，让他返回固定的日期。

mockdate

我们使用 mockdate 来帮我们mock 日期相关的方法

tnpm install --save-dev mockdate

然后创建mock方法:

import moment from 'moment';
import MockDate from 'mockdate';export function setMockDate(dateString = '2017-09-18T03:30:07.795') {MockDate.set(moment(dateString));
}export function resetMockDate() {MockDate.reset();
}

最后在测试开始之前调用mock方法即可:

import React from 'react';
import { mount } from 'enzyme';
import toJson from 'enzyme-to-json';
import DateRanger from '..';
import { setMockDate, resetMockDate } from './utils';describe('DateRanger', () => {beforeEach(() => {setMockDate();});afterEach(() => {resetMockDate();});it('should match snapshot', () => {const wrapper = mount(<DateRanger />);// 快照一致expect(toJson(wrapper)).toMatchSnapshot();wrapper.unmount();});
});

一些组件测试实例的收集测试

某个节点的文案正确:

expect(dropdownWrapper.find('MenuItem').at(0).text(),).toBe('No Data');

测试各个标签属性设置正确

// 获取DOM节点
const input = wrapper.find('.ant-alert').getDOMNode();
// 2. getAttribute获取属性
expect(input.getAttribute('data-test')).toBe('test-id');

测试被点开的Select按钮，找到展开的dropdown组件并点击或输入

it('should have default notFoundContent', () => {const wrapper = mount(<Select mode="multiple" />);wrapper.find('.ant-select').simulate('click');jest.runAllTimers();const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent(),);expect(dropdownWrapper.find('MenuItem').length).toBe(1);expect(dropdownWrapper.find('MenuItem').at(0).text(),).toBe('No Data');});

测试错误

it('should throw error when option value is missing', () => {try {mount(<CheckCard.Group options={[{ value: 'Apple' }, { value: 'Pear' }, { title: 'Orange' }]} />,).unmount();} catch (e) {expect(e).toBeDefined();}});