Question

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

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

我在onRest prop内部传递函数调用的地方-这是React-Spring关键帧中的prop，在动画结束后调用。

我该如何进行测试？我愿意接受任何技巧，只需要避免抱怨测试范围即可。

Answer 1

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

这是一个简化的示例：

code.js

import * as React from 'react';

const SpinnerKf = () => null;

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

code.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!
});

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

用酶测试回调道具

1 个答案: