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

Question

I have the following setup. I'm currently trying to make fun of my server.

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

Here is how I have the details in configuring the web package:

 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 use babel-pollyfill for babel-pollyfill 's sake. This is required in the input file (route.jsx) above import 'babel-polyfill' and is thus included at the beginning of bundle.js . In addition, the selection is available as 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 get 404 URLs, it seems that the route request is not intercepted? GET http://localhost:8080/entry/1 404 (Not Found) . In addition, the error that occurs from the catch is as follows SyntaxError: Unexpected token C

thanks

EDIT

I just tried using nok with no luck. I also switched from using bable-polyfill to es6-promise to no avail. I have run out of ideas why this fetch-mock does not intercept the request. I console registered fetchMock above and the route is determined.

 _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 the chrome console gives 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 with testing some authToken middleware that I wrote, and the problem was that I was doing the same thing as importing an isomorphic selection into a variable.

 import fetch from 'isomorphic-fetch' 

That was the problem. This means that you are using an instance of fetch no global that prevents fetchMock from being intercepted.

You have to do.

 import 'isomorphic-fetch' 

This will add the selection to the global namespace.

I also missed this in fetchMock docs ...

If you use isomorphic selection in your source, do you assign it to a variable? You should not be. import 'isomorphic-fetch', not import a selection from 'isomorphic-fetch' require ('isomorphic-fetch'), not const fetch = require ('isomorphic-fetch')

EDIT There is also other important information if you are checking the code on the client side. You must use client.js depending on fetch-mock.

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

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