使用 React 和 Enzyme 在异步处理程序中测试中间状态

Question

尽管阅读了 enzyme, and act 的文档，但我找不到对我的用例的响应，因为示例仅显示了简单的用例。

我有一个显示按钮的 React 组件。 onClick 处理程序设置加载布尔值并调用外部 API。我想断言当我们点击按钮时组件显示加载指示器。

组件如下：

export default function MyButton(): ReactElement {
    const [loading, setLoading] = useState<boolean>(false);
    const [data, setData] = useState<any>(null);

    const onClick = async (): Promise<void> => {
        setLoading(true);

        const response = await fetch('/uri');
        setData(await response.json());

        setLoading(false);
    };

    if (loading) {
        return <small>Loading...</small>;
    }

    return (
        <div>
            <button onClick={onClick}>Click Me!</button>

            <div>
                {data}
            </div>
        </div>
    );
}

这是测试：

test('should display Loading...', async () => {
    window.fetch = () => Promise.resolve({
        json: () => ({
            item1: 'item1',
            item2: 'item2',
        }),
    });

    const component = mount(<MyButton />);

    // Case 1 ✅ => validates the assertion BUT displays the following warning
    component.find('button').simulate('click');
    // Warning: An update to MyButton inside a test was not wrapped in act(...).
    // When testing, code that causes React state updates should be wrapped into act(...):
    // act(() => {
      /* fire events that update state */
    // });
    /* assert on the output */
    // This ensures that you're testing the behavior the user would see in the browser. Learn more at [URL to fb removed because SO does not accept it]

    // Case 2 ❌ => fails the assertion AND displays the warning above
    act(() => {
        component.find('button').simulate('click');
    });

    // Case 3 ❌ => fails the assertion BUT does not display the warning
    await act(async () => {
        component.find('button').simulate('click');
    });

    expect(component.debug()).toContain('Loading...');
});

如您所见，如果我摆脱警告，我的测试将不再令人满意，因为它正在等待 promise 解决。我们如何在使用 act 时断言中间状态发生变化？

谢谢。

Answer 1

只需手动解决承诺：

const mockedData = {
  json: () => ({
    item1: 'item1',
    item2: 'item2',
  }),
};
let resolver;
window.fetch = () => new Promise((_resolver) => {
  resolver = _resolver;
});

// ....
await act(async () => {
  component.find('button').simulate('click');
});
expect(component.debug()).toContain('Loading...');
resolver(mockedData);
expect(component.debug()).not.toContain('Loading...');

PS 但为了可读性，我宁愿有 2 个单独的测试：一个 new Promise(); 永远不会解决，另一个 Promise.resolve(mockedData) 会自动解决

使用 React 和 Enzyme 在异步处理程序中测试中间状态

Test intermediary state in async handler with React and Enzyme

assert

reactjs

jestjs

enzyme