0

How to check if select have some option in it after it has been updated by ajax function. My select component is like below

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>
        )
    }
}

Here is my try:

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)
    })
})

What wrong with this is, I got var actual = 0. It supposes to be 3. So I guess I missing something with axios. What should I add to my spec?

angry kiwi
  • 10,730
  • 26
  • 115
  • 161

1 Answers1

1

Your GET request might be still waiting for the response but mocha already has completed the test execution.

You could add a timeout and assert after a while and then call the done() callback when you are done with the test. Please take a look at the mocha's asynchronous code section.

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)
    })
})

I recommend you to check the axios-mock-adapter which allows you to mock request rather than sending an actual request to the server.

Raathigesh
  • 2,306
  • 3
  • 26
  • 32
  • this will give me error `timeout of 2000ms exceeded. Ensure the done() callback is being called in this test. at eval (eval at (test/test.build.js:8452:9), :4371:19)` – angry kiwi Jul 04 '16 at 09:25
  • You could decrease the timeout to 1500 and see or increase the mocha timeout as this question instructs - http://stackoverflow.com/questions/16607039/in-mocha-testing-while-calling-asynchronous-function-how-to-avoid-the-timeout-er. – Raathigesh Jul 04 '16 at 09:45
  • decrease to 1500 works, thanks. Is there way that we don't need to use settimeout but still get the real result? – angry kiwi Jul 04 '16 at 10:03
  • If you use axios-mock-adapter as I mentioned in the answer, you can just set the timeout value to 0 and still get the tests to execute successfully. – Raathigesh Jul 04 '16 at 16:54
  • 1
    can you give the example using the axios-mock-adapter? – angry kiwi Jul 05 '16 at 09:49
  • Here you go: http://raathigesh.com/Mocking-HTTP-Requests-with-Axios-Mock-Adapter/ – Raathigesh Jul 05 '16 at 15:35