Question

假设我有这个功能强大的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
  });
});

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

Answer 1

我刚刚将我的ase-adapter-react-16升级到v1.12.1，对我来说很合理。

Answer 2

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

将酶适配器反应16升级到最新版本（1.12.1）解决了该问题。

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

2 个答案: