使用酶测试使用 React.useEffect 的组件答案

【问题标题】：Testing a component that uses React.useEffect using enzyme使用酶测试使用 React.useEffect 的组件
【发布时间】：2019-09-28 08:00:59
【问题描述】：

假设我有这个功能性的 React 组件。

const SomeComponent = ({ onShow }) => {
  React.useEffect(onShow, []);
  return <div />;
};

现在我想对SomeComponent 在第一次渲染时调用 onShow 进行单元测试。

可以使用enzyme吗？

我尝试过实施两个非常相似的测试，不同之处在于第一个是使用酶，另一个是使用 react-testing-library。

使用 react-testing-library 的测试通过，但酶测试失败，即使它们测试相同的代码。

例子：

import * as reactTestingLibrary from "react-testing-library";
import * as React from "react";
import * as enzyme from "enzyme";

const SomeComponent = ({ onShow }) => {
  React.useEffect(onShow, []);
  return <div />;
};

describe("Testing useEffect with enzyme", () => {
  it("calls the side effect", async () => {
    const aFn = jest.fn();
    enzyme.mount(<SomeComponent onShow={aFn} />);
    expect(aFn).toHaveBeenCalledTimes(1); // this test fails
  });
});

describe("Testing useEffect with react-testing-library", () => {
  it("calls the side effect", async () => {
    const aFn = jest.fn();
    reactTestingLibrary.render(<SomeComponent onShow={aFn} />);
    expect(aFn).toHaveBeenCalledTimes(1); // this test passes
  });
});

有没有办法让酶执行钩子并通过测试？

【问题讨论】：

你能更新你的库吗？对我来说，这两个测试都在工作 --> "react": "^16.8.6"、"enzyme": "^3.9.0"、"react-testing-library": "^7.0.0", 、"react-test-renderer": "^16.8.6",
@tarzenchugh 我在你的列表中有最新版本，但我错过了升级酶适配器。将酶适配器反应 16 升级到 1.12.1 解决了我的问题。非常感谢！
欢迎您；欢迎来到堆栈溢出:)
请创建答案并将其标记为解决方案；我相信可能还有其他人遇到这种情况，并且在 cmets 中有解决方案会使这更难实现
toHaveBeenCalled 一开始就是一个可怕的测试。您没有测试我们输出的任何行为，而是深入了解组件的细节

标签： reactjs react-hooks enzyme react-testing-library

【解决方案1】：

我刚刚将我的酶适配器反应 16 升级到 v1.12.1，这为我解决了问题。

【讨论】：

【解决方案2】：

是的，可以使用酶来测试使用钩子的组件。

将酶适配器反应 16 升级到最新版本 (1.12.1) 修复了该问题。

【讨论】：