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 Module是通过动态导入返回promise的函数。解析并加载该导入后，它会返回一个react组件，应将其存储在state中并进行渲染。那么，让组件解析网络请求的测试应该如何加载，显示并在呈现后检查断言呢？

我希望可以检查渲染组件上的状态是否已更改。但是我无法在文档中提供类似的资金。

我正在使用Meteor，Mocha和Enzyme。如果无法使用Enzyme测试组件，则可以切换到其他选项。

谢谢。

Answer 1

解决方案正确使用了promises和public class EntryItem : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; protected virtual void NotifyPropertyChanged([CallerMemberName]string propertyName = "") { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } public string SetName { get; set; } public string SourceImage { get; set; } public EntryItem(string name) { SetName = name; IsOpened = true; } private bool _isOpened; public bool IsOpened { get { return _isOpened; } set { _isOpened = value; NotifyPropertyChanged(); } } }。

await

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

Answer 2

为什么用酶无法实现您想要的行为？您的componentDidMount（）是否不会通过浅层渲染调用？如果是这样，您可以尝试完全呈现（https://github.com/airbnb/enzyme#full-dom-rendering）或创建一个从componentDidMount（）调用但可以在单元测试中手动调用的助手方法。然后，在等待该方法之后，您可以测试渲染的组件是否包含Module。因此，我认为您有两种方法可以测试此组件呈现Module的情况。

状态更改后测试组件

2 个答案: