Question

我正在尝试编写一个搜索呈现的Dom元素的测试，但是它是使用useEffect呈现的，因此该测试失败了，因为它稍后才呈现。例如：

const [isTrue, setIsTrue] = useState(false);
  useEffect(() => {
        setIsTrue(!isTrue);
      }, []);

    <div>
      {isTrue && <div className="test">test</div>}
    </div>

当dom使用className =“ test”渲染div时，仅在useEffect之后才渲染，但是我有一个测试叫做：

 test("test", () => {
    expect(wrapper.find(".test").first().text()).toEqual("test");
  });

它失败了，因为它只看到第一个渲染，我如何更改测试以使其在useEffect后看到渲染的div？

编辑：我尝试使用行为，但仍然无法正常工作

import { act } from "react-dom/test-utils";
  import { mount } from "enzyme";
  act(() => {
      component = mount(<App />);
    });

Answer 1

我以前遇到过这个问题，我相信您需要使用挂载包装器的update方法：

https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/update.html

因此您的测试应如下所示：

test("test", () => {
    wrapper.update();
    expect(wrapper.find(".test").first().text()).toEqual("test");
});

测试失败，因为尚未渲染道具

1 个答案: