我有以下设置。我现在正在尝试模拟我的后端。

我有一个如下所示的异步 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']
                }
            },

我正在为 Promise pollyfill 使用 babel-pollyfill。这在 import 'babel-polyfill' 上方的入口文件 (route.jsx) 中是必需的，因此被包含在 bundle.js 文件的顶部。还可以在浏览器控制台中以全局方式获取。

我正在使用 webpack-dev-server --content-base build/--inline --hot --progress --colors 作为开发服务器。

在浏览器控制台中，我在 URL 上收到 404，似乎路由请求没有被拦截？ 获取 http://localhost:8080/entry/1 404(未找到)。此外，从 catch 中抛出的错误如下 SyntaxError: Unexpected token C。

谢谢

编辑:

我只是尝试使用箭尾，但也不走运。我也从使用 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 中间件时遇到了类似的问题，问题是我正在做与将同构获取导入变量相同的事情。

import fetch from 'isomorphic-fetch'

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

你应该这样做。

import 'isomorphic-fetch'

这会将 fetch 添加到全局命名空间。

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

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

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

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

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

关于javascript - 无法使用 webpack 和 redux-react 获取模拟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34574682/