Enzyme：在模拟“点击”时，测试异步改变的状态值

Question

我正在尝试测试一个state值（例如：），该值state.name在单击按钮时异步更改。

最初

• state.name是 "Random Value"
• 当按钮被点击 state.name的变化"peter"从"Random Value"
• 在浏览器中按预期工作
• 需要它button.simulate('click')在我的测试中工作相同

我的组件App.js：

import React, { Component } from 'react';

class App extends Component {
    state = {name: "Random Value"};
    render() {
        return (
            <div className="App">
                <div>{this.state.name}</div>
                <button onClick={this.handleClick}>GetData</button>
            </div>
        );
    }

    handleClick = () => {
        const currentContext = this;
        fetch('http://api-call/getdata')
            .then(function(response) {
                return response.json();
            })
            .then(function(jsonData) {
                // jsonData.name = "peter"
                currentContext.setState({name: jsonData.name});
            })
    }
}

export default App;

测试文件 App.test.js

describe('<App/>', () => {    
    it('should handle click correctly', () => {
        const wrapper = shallow(<App />);

        expect(wrapper.find('button').length).toBe(1);

        expect(wrapper.state().name).toEqual("Random Value");
        wrapper.find('button').simulate('click');
        expect(wrapper.update().state().name).toEqual("peter");
    });
});

结果：

// FAILED!

Expected value to equal:
      "peter"
Received:
      "Random Value"

我还尝试了什么？

那里有各种各样的解决方案，比如使用async await, setImmediatethenwrapper.update()和许多其他东西。也许我做错了什么或错过了什么。无论如何，我花了一个晚上试图做到这一点。我需要enzyme专家的帮助。

谢谢

Answer 1

首先你需要fetch以某种方式模拟。发送真实请求不仅打破了单元测试的隔离，而且增加了不一致的风险。当您不知道什么时候可以完成时，等待响应也更加困难。有不同的方法可以实现这一目标。jest-fetch-mock是其中之一。

另外我建议你不要检查，state而是检查render()结果。

function getName(wrapper) {
    return wrapper.find('.App > div').at(0).props().children;
} 

it('should handle click correctly', async () => {
    fetch.mockResponseOnce(JSON.stringify({ name: '12345' }));
    const wrapper = shallow(<App />);

    expect(wrapper.find('button').length).toBe(1);

    expect(getName(wrapper)).toEqual("Random Value");
    wrapper.find('button').simulate('click');
    await Promise.resolve();
    expect(getName(wrapper)).toEqual("peter");
});

这里发生了什么。await Promise.resolve()只是等到所有已经解决的承诺都运行。这意味着没有我们的模拟响应将不会在按钮单击和运行之间expect运行。

获得积极结果的另一种方法是handleClick()返回我们可以等待的 Promise：

...
handleClick = () => {
    const currentContext = this;
    return fetch('http://api-call/getdata')
        .then(function(response) {
            return response.json();
        })
        .then(function(jsonData) {
            // jsonData.name = "peter"
            currentContext.setState({name: jsonData.name});
        })
}
....
it('should handle click correctly', async () => {
     ....
    expect(getName(wrapper)).toEqual("Random Value");
    await wrapper.find('button').simulate('click');
    expect(getName(wrapper)).toEqual("peter");
});

或没有 async-await 语法：

it('should handle click correctly', () => {
     ....
    expect(getName(wrapper)).toEqual("Random Value");
    return wrapper.find('button').simulate('click').then(() => {
        expect(getName(wrapper)).toEqual("peter");
    });
});

但我真的不喜欢这种方式，因为事件处理程序必须返回一个它通常不会这样做的 Promise。

更多关于 microtasks(Promises)/macrotasks(timers, events) 你可以在这里阅读：https ://abc.danch.me/microtasks-macrotasks-more-on-the-event-loop-881557d7af6f

更多关于在玩笑中测试异步代码，你最好查看他们的文档：https : //jestjs.io/docs/en/asynchronous