javascript - enzyme :在模拟 "click"时，测试异步更改的状态值

Question

我正在尝试测试一个 state 值(例如:state.name)，它会在单击按钮时异步更改。

最初

• state.name是“随机值”
• 当点击一个按钮时，state.name从“Random”变为“peter”值”
• 在浏览器中按预期工作
• 在我的测试
中，需要它在 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、setImmediate 然后是 wrapper.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() 只是等待所有已解决的 promise 运行。这意味着如果没有我们的模拟响应将不会在按钮单击和 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");
});

或不使用异步等待语法:

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

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

更多关于微任务(Promises)/宏任务(计时器，事件)的信息你可以在这里阅读:https://abc.danch.me/microtasks-macrotasks-more-on-the-event-loop-881557d7af6f

更多关于在 Jest 中测试异步代码的信息，您最好查看他们的文档:https://jestjs.io/docs/en/asynchronous