Javascript 无法使用webpack和redux react获取fetch mock

我有以下设置。我现在正试图嘲笑我的后端

我有一个异步redux操作，如下所示：

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

这是我如何在我的网页配置设置中设置部件：

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']
                }
            },

我正在使用巴贝尔·波利菲尔来实现波利菲尔的承诺。这在上面的输入文件（route.jsx）中是必需的

import'babel polyfill'

，因此包含在

bundle.js

文件的顶部。此外，在浏览器控制台中，fetch作为全局文件提供

我使用

webpack dev server--content base build/--inline--hot--progress--colors

作为dev的服务器

在浏览器控制台中，我在URL上得到一个404，似乎路由请求没有被拦截<代码>获取http://localhost:8080/entry/1 404（未找到）。另外，catch抛出的错误如下

SyntaxError:Unexpected token C

谢谢

编辑：

我只是尝试使用nock，但也没有运气。我也从使用bable polyfill切换到es6 promise，但毫无效果。我已经想不出这个fetch mock为什么不拦截请求了。我在上面记录了控制台日志

fetchMock

，并定义了路由

_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

在chrome控制台中运行fetch也会产生以下功能

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

---

我在测试我编写的一些authToken中间件时遇到了类似的问题，问题是我在将同构fetch导入变量时做了相同的操作

import fetch from 'isomorphic-fetch'

这就是问题所在。这样做意味着您正在使用fetch no的实例来阻止fetchMock拦截

你应该这样做

import 'isomorphic-fetch'

这将向全局命名空间添加fetch

我在fetchMock文档中也错过了这个

如果在源代码中使用同构fetch，是否将其分配给fetch变量？你不应该这样。 导入“同构提取”，而不是从“同构提取”导入提取 require（'isomorphic-fetch'），而不是const fetch=require（'isomorphic-fetch'））

编辑 如果您正在测试客户端代码，这里还有一些其他重要信息。您应该在fetch-mock依赖项中使用client.js

你应该在你的网页插件中定义一个模块替换

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

---

你能让它工作吗？