0

ajax函数更新后如何检查select是否有一些选项。我的选择组件如下所示

class Select extends React.component(){
    constructor(){
        super()
        this.state.item=[]
    }
    componentWillMount(){
        axios.get(list)
        .then(function (response) {
            this.setState({item:response.data})
            // reponse data ['america','singapore','vietnam']
        })
    }   
    render(){
        return(
            <select>
                this.state.item.map((i) => {
                    <option value="i">i</option>
                })
            </select>
        )
    }
}

这是我的尝试：

import {expect} from 'chai'
import {shallow} from 'enzyme'
import sinon from 'sinon'
import Select from 'Select'
describe('select list', () => {
    it('should have options', () => {
        const wrapper = shallow(<Select />)
        wrapper.update()
        const actual = wrapper.find('option').length
        expect(actual).to.not.equal(0)
    })
})

这有什么问题，我得到 var actual = 0。它应该是 3。所以我想我错过了 axios 的一些东西。我应该在我的规范中添加什么？

4

1 回答 1

1

您的GET请求可能仍在等待响应，但 mocha 已经完成了测试执行。

您可以在一段时间后添加超时和断言，然后在done()完成测试后调用回调。请看一下摩卡的 asynchronous code部分。

describe('select list', () => {
    it('should have options', (done) => {
        const wrapper = shallow(<Select />)
        wrapper.update()
        setTimeout(() => {      
            const actual = wrapper.find('option').length
            expect(actual).to.not.equal(0)
            done();
        }, 2000)
    })
})

我建议您检查axios-mock-adapter，它允许您模拟请求而不是向服务器发送实际请求。

于 2016-07-04T09:08:29.620 回答