javascript - 状态更改后测试 react 组件

Question

如何测试以下组件？

    import React from "react";

    class ModuleLoader extends React.Component {
            state = {
                    Module: null
            };
            componentDidMount() {
                    this.props
                            .Module()
                            .then(loaded => {
                                    this.setState({ Module: loaded.default });
                            })
            }
            render() {
                    if (this.state.error) {
                            return "error";
                    }
                    if (!this.state.Module) {
                            return "loading";
                    }
                    return <this.state.Module {...this.props} />;
            }
    }

    export default ModuleLoader;

Prop 模块是通过动态导入返回 Promise 的函数。当该导入被解析并加载时，它会返回一个 react 组件，该组件应该存储在状态中并呈现。那么测试应该是什么样子才能让组件解析网络请求加载它、显示它并在渲染后检查断言？

我希望有一些东西可以检查渲染组件的状态是否发生变化。但我无法资助文档中的类似内容。

我正在使用 Meteor、Mocha 和 Enzyme。如果无法使用 Enzyme 测试组件，我可以改用替代方案。

谢谢。

Answer 1

解决方案是正确使用 Promise 和 await。

it('renders', async () => {
  const props = {
    Module: () =>
      Promise.resolve({
        default: () => <span>Im loaded!</span>,
      }),
  };
  const component = mount(<ModuleLoader {...props} />);
  expect(component).toMatchSnapshot();
  await Promise.resolve(); // tick so promises resolve
  expect(component.update()).toMatchSnapshot();
});

来源:https://gist.github.com/danielhusar/8df72f5677ec69cb9774c1d5c561c56a