Question

如何在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。我应该在规格中添加什么？

Answer 1

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

您可以在一段时间后添加超时并断言，然后在完成测试后调用done()回调。请查看mocha's 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，它允许您模拟请求，而不是向服务器发送实际请求。

摩卡 - 如何在ajax调用后检查元素是否存在

1 个答案: