Unable to get fetch-mock working with webpack and redux-react

Question

I have the following setup. I am trying to mock my backend for now.

I have an async redux action as follows:

import * as types               from './../constants/actionTypes.jsx'
import fetch                    from 'isomorphic-fetch'
var fetchMock = require('fetch-mock');
export function fetchEntry(entry){
    return dispatch => {
        dispatch(requestEntry(entry));
        fetchMock
            .mock(`http://localhost:8080/entry/${entry}`, {content: 'blah blah'});
        return fetch(`http://localhost:8080/entry/${entry}`)
            .then(response => response.json())
            .then(json => dispatch(receiveEntry(entry, json)))
            .catch(err => console.log(err))
    }
}

This is how i have parts on my webpack config setup:

entry: {
    app: path.resolve(__dirname, 'app/routes.jsx'),
    vendor: [
        'react',
        'react-dom',
        'history',
        'react-router',
        'redux',
        'react-redux',
        'redux-simple-router',
        'react-css-modules',
        'alloyeditor',
        'redux-form',
        'react-toggle',
        'react-select',
        'isomorphic-fetch',
        'redux-thunk',
        'fetch-mock'
    ]
},
 loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                  presets: ['react', 'es2015']
                }
            },

I am using babel-pollyfill for the Promise pollyfill. This is being required in the entry file(route.jsx) above import 'babel-polyfill' and is thus being included at the top of the bundle.js file. Also fetch is available as a global in the browser console.

I am using webpack-dev-server --content-base build/ --inline --hot --progress --colors as the server for dev.

In the browser console I am getting a 404 on the URL, its seems that the route request isnt being intercepted? GET http://localhost:8080/entry/1 404 (Not Found). Also the err being thrown from catch is as follows SyntaxError: Unexpected token C.

Thanks

EDIT:

I just attempted to use nock with no luck either. I also switched from using the bable-polyfill to es6-promise to no avail. I have run out of ideas as why this fetch-mock is not intercepting the request. I console logged fetchMock above and the route is defined.

_calls: Object
__proto__: Object
_matchedCalls: Array[0]
length: 0
__proto__: Array[0]
_unmatchedCalls: Array[0]
isMocking: true
mockedContext: Window
realFetch: ()
routes: Array[2]
0: Object
__unnamed: true
matcher: (url, options)
name: "http://localhost:8080/entry/1"
response: Object
content: "blah blah"
__proto__: Object
__proto__: Object
1: Object
__unnamed: true
matcher: (url, options)
name: "http://localhost:8080/entry/1"
response: Object
content: "blah blah"
__proto__: Object
__proto__: Object
length: 2
__proto__: Array[0]
__proto__: FetchMock

Also running fetch in chrome console yields the following function.

function mock(url, opts) {
                    var response = _this.router(url, opts);
                    if (response) {
                        debug('response found for ' + url);
                        return mockResponse(url, response);
                    } else {
                        deb…

Answer 1

I had a similar problem testing some authToken middleware I had written and the issue was that I was doing the same as you importing isomorphic-fetch to a variable.

import fetch from 'isomorphic-fetch'

This was the problem. Doing this means you are using an instance of fetch no the global which prevents fetchMock from intercepting.

You should do.

import 'isomorphic-fetch'

This will add fetch to the global namespace.

I also missed this in the fetchMock docs...

If using isomorphic-fetch in your source, are you assigning it to a fetch variable? You shouldn't be i.e. import 'isomorphic-fetch', not import fetch from 'isomorphic-fetch' require('isomorphic-fetch'), not const fetch = require('isomorphic-fetch')

EDIT There are also some other important info on there if you are testing client side code. You should use the client.js in the fetch-mock dependency.

You should define a module replacement in your webpack plugins...

plugins: [
    ...
    new webpack.NormalModuleReplacementPlugin(/^fetch-mock$/, path.resolve(__dirname, 'node_modules', 'fetch-mock/es5/client.js'))
]