测试失败，因为道具尚未呈现

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");
  });

它失败了，因为它只看到第一个渲染，我怎样才能改变测试让它看到渲染的 div post useEffect?

编辑：我尝试使用 act 但它仍然不起作用

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");
});

测试失败，因为道具尚未呈现

Testing fails because the prop was not rendered yet

javascript

reactjs

jestjs

enzyme

use-effect