I'm trying to test for the call of fetch() inside of my changeIt() function using jest/enzyme. But obviously I'm doing something wrong:

example.js

import fetch from 'node-fetch'

export default class Example extends Component {
  changeIt (id, value) {
    fetch('http://localhost/set-status?id=' + id + '&value=' + value)
  }

  render () {
    return (
      <div>something </div>
    )
  }
}

example.test.js

jest.mock('node-fetch')
test('should call fetch()', () => {
  const id = 1
  const value = 50
  const fetch = jest.fn() // <- This is wrong
  const wrapper = shallow(<Example />)
  wrapper.instance().changeIt(id, value)
  expect(fetch).toHaveBeenCalled() // <- This is wrong
})

I'm trying to test for the call of fetch() inside of my changeIt() function using jest/enzyme. But obviously I'm doing something wrong:

example.js

import fetch from 'node-fetch'

export default class Example extends Component {
  changeIt (id, value) {
    fetch('http://localhost/set-status?id=' + id + '&value=' + value)
  }

  render () {
    return (
      <div>something </div>
    )
  }
}

example.test.js

jest.mock('node-fetch')
test('should call fetch()', () => {
  const id = 1
  const value = 50
  const fetch = jest.fn() // <- This is wrong
  const wrapper = shallow(<Example />)
  wrapper.instance().changeIt(id, value)
  expect(fetch).toHaveBeenCalled() // <- This is wrong
})

• javascript
• reactjs
• unit-testing
• jestjs
• enzyme

Share Improve this question Follow edited Oct 31, 2018 at 15:12 skyboyer 23.8k77 gold badges6262 silver badges7171 bronze badges asked Oct 20, 2018 at 8:01 user3142695user3142695 17.4k5555 gold badges199199 silver badges375375 bronze badges 3

• 1 have you mocked 'node-fetch'? – axm__ Commented Oct 20, 2018 at 8:06
• @axm__ yes, like shown in the test code – user3142695 Commented Oct 20, 2018 at 8:09
• But then you create a new local mock function, unrelated to node-fetch, inside the test function. Look again at jestjs.io/docs/en/mock-functions.html#mocking-modules – jonrsharpe Commented Oct 20, 2018 at 8:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You need to properly mock the node-fetch module. Because it is in node_modules, you need to put node-fetch inside a __mocks__ folder on the same level as node_modules like:

├── node_modules/
│   ├── node-fetch/
├── __mocks__/
│   ├── node-fetch.js

Inside node-fetch.js put:

export default jest.fn();

Finally import fetch in your test file and mock it like this:

import Example from './Bla';
import { shallow } from 'enzyme';
import React from 'react';
import fetch from 'node-fetch';
/**
 * Important! Import the mocked function.
 * Start the mocking with jest.mock('node-fetch').
 * Stop the mocking with jest.unmock('node-fetch').
 */    
jest.mock('node-fetch');

test('should call fetch()', () => {
  const id = 1
  const value = 50
  const wrapper = shallow(<Example />)
  wrapper.instance().changeIt(id, value)
  expect(fetch).toHaveBeenCalled() // now it works
})

Read more about mocking node_modules packages in jest here.