jestjs - 使用 Enzyme 测试回调道具

Question

我的组件中有 React-Spring 动画：

<SpinnerKf state={status} onRest={changeView && status === 'SUCCESS' ? () => changeView(VIEW_MODES.RECEIPT) : null}>
    ....
</SpinnerKf>

我在 prop 内部传递函数调用的地方onRest- 这是来自 React-Spring Keyframe 的 prop，它在动画结束后调用。

我怎样才能通过测试来解决这个问题？我愿意接受任何技巧，只需要避免在测试覆盖范围内抱怨。

Answer 1

您可以使用 Enzyme 获取SpinnerKf组件，然后onRest直接调用其属性。

这是一个简化的示例：

代码.js

import * as React from 'react';

const SpinnerKf = () => null;

export const Component = () => (<SpinnerKf onRest={() => { return 'does something'; }}/>);

代码.test.js

import * as React from 'react';
import { shallow } from 'enzyme';

import { Component } from './code';

test('callback', () => {
  const wrapper = shallow(<Component />);
  const result = wrapper.find('SpinnerKf').props().onRest();
  expect(result).toBe('does something');  // Success!
});

请注意，测试回调的返回值或行为是可选的，只要它在单元测试期间运行，它将包含在代码覆盖率报告中。