状态更改后测试反应组件答案

【问题标题】：Test react component after state changes状态更改后测试反应组件
【发布时间】：2019-03-08 20:27:22
【问题描述】：

如何测试以下组件？

    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 的函数。当解析并加载该导入时，它会返回一个反应组件，该组件应存储在状态中并呈现。那么让组件解析网络请求加载它、显示它并在渲染后检查断言应该是什么样的测试呢？

我希望能够检查渲染组件的状态是否发生了变化。但是我不能在文档中资助类似的东西。

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

谢谢。

【问题讨论】：

你尝试过什么测试这个组件？你遇到过什么问题？有关如何编写好问题的更多建议，请参阅：stackoverflow.com/help/how-to-ask

标签： javascript reactjs meteor mocha.js enzyme

【解决方案1】：

为什么酶无法实现您想要的行为？你的 componentDidMount() 不会被浅渲染调用吗？如果是这样，您可以尝试完全渲染 (https://github.com/airbnb/enzyme#full-dom-rendering)，或者创建一个从 componentDidMount() 调用但也可以在单元测试中手动调用的辅助方法。然后在等待该方法之后，您可以测试呈现的组件是否包含Module。所以，我认为你有两种选择来测试这个组件是否呈现Module。

【讨论】：

【解决方案2】：

解决方案是正确使用承诺和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

【讨论】：