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 に答える