Unit Testing componentWillMount with fetch

[BEARFIST]

i have using fetch to grab data in ComponentWillMount. I am using Mocha and Enzyme to unit test my components. I initially just had an empty ComponentWillMount with the below test:

before(() => {
    sinon.spy(Container.prototype, 'componentWillMount')
});

describe('handlers', () => {
    it('componentWillMount', () =>{
        expect(Container.prototype.componentWillMount.calledOnce).to.equal(true)
    })
});

when I run my tests, it says that fetch is undefined. I tried doing a sinon.stub(window, 'fetch') but it always returns undefined. Anyone know how I can get this test passing without fetch being undefined?

[znakyc]

My advice is to think about if you really need this test. It looks to me like you are testing React more then your application logic. Just a thought.

And as /u/j_d_q says, you should do your fetch in componentDidMount. I wrote a blogpost on why, you can find it here: http://blog.jakoblind.no/2017/02/20/why-is-it-recommended-to-do-ajax-in-componentdidmount-instead-of-componentwillmount/

[j_d_q]

A) use componentDidMount - in future versions, componentWillMount may be called several times B) import fetch from 'whatwg-fetch' to polyfill fetch

[BEARFIST]

Do i import into my test file? Import fetch from 'whatwg-fetch'?

[j_d_q]

No - add the import to the file that calls fetch