使用 Enzyme 测试回调道具答案

【问题标题】：Test callback prop with Enzyme使用 Enzyme 测试回调道具
【发布时间】：2019-09-03 08:46:55
【问题描述】：

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

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

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

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

【问题讨论】：

标签： jestjs enzyme react-spring

【解决方案1】：

您可以使用Enzyme 获取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!
});

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

【讨论】：

对于您的组件，您需要在 onRest 设置为 null 并且 not 调用它的地方渲染它一次，并且在 changeView 是 @987654321 的地方渲染一次@ 和 status 设置为 'SUCCESS' 所以 onRest 设置为您的 arrow function 并称之为 @VladimirHumeniuk
感谢箭头函数文档的链接，船长，但你的答案在很多方面都不起作用：你在浅包装器中找不到 SpinnerKf，你不能以方式调用 prop像.props().onRest()，在我的代码中我没有将函数作为匿名调用传递，它不返回任何东西。
它有效...我几乎从不发布我尚未测试过的代码。您绝对可以 find 浅包装by its display name 中的元素。您绝对可以调用props并直接调用返回对象的属性...@VladimirHumeniuk
...和一个带有“简洁主体”implicitly returns the result of its expression body 的箭头函数，所以如果changeView 返回任何东西（比如，如果它是async 函数，则说Promise），你可以在测试期间使用该返回值。（正如我提到的，这也是可选的，因为您只是在寻找代码覆盖率）...@VladimirHumeniuk
...所以是的，我的答案中的代码有效。正如我所提到的，这是一个基于您问题中的短代码 sn-p 的简化示例。如果您使用更多代码更新您的问题，我很乐意更新我的答案以更具体地针对您的代码@VladimirHumeniuk