无法使用webpack和redux-react进行fetch-mock

Question

我有以下设置.我现在想嘲笑我的后端.

我有一个async 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))
    }
}

这就是我在webpack配置设置中的部件:

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

我正在使用babel-pollyfillPromise pollyfill.这在上面的条目文件(route.jsx)中是必需的,import 'babel-polyfill'因此被包含在bundle.js文件的顶部.此外,fetch还可在浏览器控制台中作为全局提供.

我webpack-dev-server --content-base build/ --inline --hot --progress --colors用作dev的服务器.

在浏览器控制台中,我在URL上获得了404,似乎路由请求没有被截获？GET http://localhost:8080/entry/1 404 (Not Found).从捕获中抛出的错误如下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…

Answer 1

我在测试一些我写过的authToken中间件时遇到了类似的问题,问题是我在将isomorphic-fetch导入变量时也是如此.

import fetch from 'isomorphic-fetch'

这是问题所在.这样做意味着您正在使用fetch实例,而不是全局阻止fetchMock拦截.

你应该做.

import 'isomorphic-fetch'

这将添加到全局命名空间的提取.

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

如果在源中使用isomorphic-fetch,是否将其分配给fetch变量？你不应该是导入'isomorphic-fetch',而不是从'isomorphic-fetch'require('isomorphic-fetch')导入fetch,而不是const fetch = require('isomorphic-fetch')

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

您应该在webpack插件中定义模块替换...

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