Network Request Failing on Test

[martinmckenna]

I'm getting a really weird issue where my network request is failing in the test with jest-fetch-mock, despite working when I run the app locally.

My test looks like this

// Syntactic sugar, see:
// https://github.com/facebook/jest/issues/2157#issuecomment-279171856 something
// like this will maybe added to the Jest API
function flushPromises() {
    return new Promise(resolve => setImmediate(resolve));
}

const muiTheme = getMuiTheme();

it('renders without crashing', () => {
    jestMockFetch.mockResponse(JSON.stringify({meta: {status: "success"}});

    const component = mount(
        <VerifyModal/>, {
        context: {
            muiTheme
        },
        childContextTypes: {
            muiTheme: PropTypes.object
        }
    });

    return flushPromises().then(() => {
        expect(component.find('h1')).toHaveLength(1);
        expect(jestMockFetch.mock.calls).toHaveLength(1);
    });
});

my setupTests.js

global.jestMockFetch = require('jest-fetch-mock');

And then this is the result of the test

 FAIL  src\views\VerifyModal.test.js
  ● renders without crashing

    expect(received).toHaveLength(length)

    Expected value to have length:
      1
    Received:
      {"length": 0, Symbol(enzyme.__unrendered__): null, Symbol(enzyme.__rendere
r__): {"batchedUpdates": [Function batchedUpdates], "getNode": [Function getNode
], "render": [Function render], "simulateEvent": [Function simulateEvent], "unmo
unt": [Function unmount]}, Symbol(enzyme.__root__): {"length": 1, Symbol(enzyme.
__unrendered__): <VerifyModal />, Symbol(enzyme.__renderer__): [Object], Symbol(
enzyme.__root__): [Circular], Symbol(enzyme.__node__): [Object], Symbol(enzyme._
_nodes__): [Array], Symbol(enzyme.__options__): [Object]}, Symbol(enzyme.__node_
_): undefined, Symbol(enzyme.__nodes__): Array [], Symbol(enzyme.__options__): {
"adapter": [Object], "childContextTypes": [Object], "context": [Object]}}
    received.length:
      0

      at flushPromises.then (src/views/VerifyModal.test.js:43:56)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:160:7)

  × renders without crashing (127ms)
  √ shows loading screen if formView is "loading"
  √ shows dob-form screen if formView is "dob-form"
  √ shows upload-form screen if formView is "upload-form"
  √ shows upload-success screen if formView is "upload-success"
  √ shows error-message screen if formView is "error-message"
  √ shows rejected-verification screen if formView is "rejected-verification"

Test Suites: 1 failed, 1 total
Tests:       1 failed, 6 passed, 7 total
Snapshots:   0 total
Time:        1.819s
Ran all test suites related to changed files.

  console.error node_modules\raven-js\src\console.js:32
    There was an error getting the settings: TypeError: Network request failed

As you can see at the bottom, my network request failed.

[jefflau]

Sorry for the late reply. Did you ever fix this?

If you didn't, did you try doing this? I think if you rename it, the mocking may not work as it's going to go through the normal fetch instead of the mocked versioon

global.fetch = require('jest-fetch-mock');

Can I see where you call fetch?

[martinmckenna]

@jefflau yeah changing it to global.fetch worked.

[jefflau]

Thanks for updating.