1

我正在调用内部服务器以将任何数据返回给我，为了模拟这个，我正在使用 axios-mock-adapter 并发送回一个包含 5 个东西的数组。我必须安装组件两次才能通过此测试。这是我的组件：

   import React, { Component, Fragment } from 'react'
   import axios from 'axios'

  export default class HelloWorld extends Component {
     constructor(props) {
       super(props)
       this.state = {
        goodbye: false,
        data: []
    }
}

async componentDidMount() {
    await this.func()
    console.log("RUNNING");
}

func = async () => {
    let data;
    try {
        data = await axios.get('http://localhost:8080');
    }
    catch(e) {
        console.log("ERROR");
        throw(e)
    }

    this.setState({data: data.data})

}

goodbye = () => {
    this.setState((state, currentProps) => ({...state, goodbye: !state.goodbye}))
}

render() {
    return (
        <Fragment>
            <h1>
                Hello World
            </h1>
            <button id="test-button" onClick={this.goodbye}>Say Goodbye</button>
            {
                !this.state.goodbye ? null :
                <h1 className="goodbye">GOODBYE WORLD</h1>
            }
        </Fragment>
    )
}

}

这是测试：

it('there is data being returned', async () => { 

    let mock = new MockAdapter(axios)
    const data = new Array(5).fill('Hello World')

    mock.onGet('http://localhost:8080').reply(200, data)

    const component =  await mount(<HelloWorld />) 


    //if this line below is commented out the test fails
    await component.instance().componentDidMount();

    expect(component.state('data')).toHaveLength(5)

})

不知道为什么我必须安装组件然后再次安装它。有人有想法么？

4

2 回答 2

1

通过放置一个 beforeEach 并将 done() 传递给它来解决它，如下所示：

 beforeEach( async (done) => {

    let mock = new MockAdapter(axios)
    const data = new Array(5).fill('Hello World')

    mock.onGet('http://localhost:8080'). reply(200, data)

    component =  await mount(<HelloWorld />)  

    done()
 })
于 2019-01-31T21:36:45.560 回答
0

模拟的 axios 响应是异步发生的，所以在事件循环的下一个滴答声之前你不会得到响应。这一行：

await component.instance().componentDidMount();

在继续同步操作之前等待响应，这就是为什么它在那里工作，而当你删除该行时它不起作用。还有其他一些可行的解决方案 - 您可以用以下代码替换该行：

await Promise.resolve();

或者使用这样的辅助函数：

const wait = () => new Promise(resolve => setTimeout(resolve, 0));

并用这个替换你await component.instance().componentDidMount();的：

await wait();

其中任何一个都将等待事件循环的一个滴答声，这将允许模拟响应返回。您可能还需要component.update()在获得模拟数据后调用。另一件事：mount(<HelloWorld />)是同步的并且不返回承诺，所以不需要await它。

于 2019-02-01T04:04:27.080 回答