无法使用 webpack 和 redux-react 获取模拟

Question

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

我有一个异步 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-pollyfill 作为 Promise pollyfill。这在 import 'babel-polyfill' 上方的条目文件 (route.jsx) 中是必需的，因此被包含在 bundle.js 文件的顶部。也可以在浏览器控制台中作为全局获取。

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

在浏览器控制台中，我在 URL 上收到 404，看来路由请求没有被拦截？ GET http://localhost:8080/entry/1 404 (Not Found)。此外，从 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 控制台中进行提取会产生以下功能。

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 中间件时遇到了类似的问题，问题是我正在做与将同构提取导入变量相同的事情。

import fetch from 'isomorphic-fetch'

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

你应该这样做。

import 'isomorphic-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'))
]

无法使用 webpack 和 redux-react 获取模拟

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

javascript

ecmascript-6

reactjs

webpack

babeljs