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

Posted 2023-02-22

【中文标题】无法使用 webpack 和 redux-react 获取 fetch-mock

【英文标题】：Unable to get fetch-mock working with webpack and redux-react

【发布时间】：2016-04-07 02:14:46

【问题描述】：

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

我有一个异步 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 文件的顶部。 fetch 在浏览器控制台中也可以作为全局变量使用。

我使用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.

谢谢

编辑：

我只是尝试使用 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…

【问题讨论】：

你让它工作了吗？

【参考方案1】：

我在测试我编写的一些 authToken 中间件时遇到了类似的问题，问题是我所做的与您将 isomorphic-fetch 导入变量时相同。

import fetch from 'isomorphic-fetch'

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

你应该这样做。

import 'isomorphic-fetch'

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

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

如果在您的源代码中使用 isomorphic-fetch，您是否将其分配给 fetch 变量？你不应该是 导入“isomorphic-fetch”，而不是从“isomorphic-fetch”导入 fetch require('isomorphic-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'))
]