jestjs - 用 enzyme 测试回调 Prop

Question

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

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

我在 onRest prop 中传递函数调用的地方 - 这是来自 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!
});

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