Question

当前，我正在构建一个要测试的组件。该组件由以下组成：

<Fragment>
    {!error ? (
        <template-that-gets-injected-with-content-if-successful />
    ) : (
        <error-message-goes-here />
    )}
    <noscript>...</noscript>
</Fragment>

组件启动时没有错误。它具有一个useEffect挂钩，该挂钩将发出获取请求，进行一些数据处理，然后更新状态。如果这一切顺利完成，则将加载一堆内容。如果有错误，则会回退到错误消息。然后，将始终呈现无脚本后备。

我需要做的是测试主要内容（以及错误消息），并确保组件不再加载。一旦完成，这应该是两个渲染，一个是初始渲染，一个是useEffect钩尾的第二个渲染。

useEffect(() => {
    try { ... }
    catch (error) {
        console.log('Some Error');
        setError(error);
    }
}, [...]);

问题是我似乎无法让酶只握住它的马并等待。看，如果我将组件传递给破碎的模拟以进行提取（例如，如果要滑动破碎的JSON），则我的组件将正确命中上述代码块中的console.log语句，但返回的组件却没有包含我的错误消息。与之类似，我没有得到设置error之后的组件。

test('Error message is shown', (done) => {
    fetchMock.mockResponseOnce(brokenMockData);

    const wrapper = mount(
        <Component />,
    );

    setImmediate(() => {
        console.log(wrapper.debug());
        expect(wrapper.contains(<div>Unknown Error</div>)).toBe(true);
        done();
    });
});

wrapper.debug()的输出是组件初始负载的输出。如果一切都成功并且我的后备<noscript>成功了，那么实际内容将流向的空模板。我确实需要等待第二次渲染。

这还需要在我所有的测试中运行，而不仅仅是测试错误消息。在检查内容之前，我需要确保一切解决。

我该怎么做？

Answer 1

找到了解决方案。无论出于何种原因，如果我扩展三元组以使其成为我的组件，错误或后备，一切都会正常。回退总是存在一个问题。

酶等待组件完全渲染

1 个答案: