Question

我有以下React组件，它在componentDidMount()上执行异步操作，一旦接收到数据，便用结果更新状态。

import * as React from "react";

export interface IAppProp {
    App: any
}

export interface IAppProp {
    App: any
}

export class App extends React.Component<IAppProp, IAppState> {
    constructor(props: IAppProp) {
        super(props);
        this.state = { App: undefined };
    }
    public componentDidMount(){
        // Some async operation
        // Once data comes in update state as follows 
        this.setState({ App: data returned from async operation });
    }
    public render() {
        if (this.state && this.state.App) {
            return (
                <SomeComponent />
            )
        } else {
            return <span>Loading...</span>
        }
    }
}

但是，当我等待数据返回时，我在Loading...函数中返回了render()消息。

我正在尝试在Jest测试中测试此Loading状态。这是我到目前为止的内容：

 it("Should display loading when state is undefined", () => {
    const inputControl = enzyme.mount(<MyApp App={pass in the right prop} />);

    expect(inputControl.find("span").text()).toEqual("Loading...");
});

我知道以上内容是错误的，因为它永远找不到加载span。我也尝试过在道具中传递undefined，但由于componentDidMount()中的异步操作需要一个合法的道具，这使测试崩溃。

我该如何测试？谢谢！

Answer 1

这是一个基于您的代码的有效示例（由于我没有UITabBar，未指定异步功能等，因此进行了修改。）

给出SomeComponent中定义的该组件：

App.tsx

可以如下创建测试import * as React from "react"; const getMessageById = (id: number): Promise<string> => { return Promise.resolve('Message ' + id); } interface IAppProp { messageid: number } interface IAppState { message: string }; export class App extends React.Component<IAppProp, IAppState> { constructor(props: IAppProp) { super(props); this.state = { message: '' }; } public componentDidMount(){ // Some async operation // Once data comes in update state as follows getMessageById(this.props.messageid).then((message) => { this.setState({ message }); }); } public render() { if (this.state && this.state.message && this.state.message.length > 0) { return ( <div>The message: {this.state.message}</div> ) } else { return <span>Loading...</span> } } }：

App.test.tsx

对于您的实际组件，您可能需要模拟正在获取数据的异步功能（这样可以避免发出网络请求等），但这应该为您尝试做的事情提供了一个良好的开端。尽我所能提供的信息。

Answer 2

对不起坏了（一点点）

我发现很难测试从业务逻辑到呈现所有内容的所有内容。

所以我将测试分为：

测试来自用户交互和/或异步操作的副作用，即道具/状态更改
测试我希望收到的确切道具/状态组合的快照。

在Jest中的异步操作中测试加载状态

2 个答案: