我正在使用 fetch-mock 来模拟对服务器的一些请求。这是发出所有请求的地方:
import fetchMock from 'fetch-mock'
import initialState from 'src/initial-state'
if (process.env.NODE_ENV === 'development') {
fetchMock.post('/some/endpoint', initialState.entities.multichannelEngagement)
}
但不仅这个端点被模拟,而且所有使用 isomorphic-fetch 发出的请求
import 'isomorphic-fetch'
export function makeRequest(endpoint, config = {}) {
return window.fetch(endpoint, config)
.then(response => {
return response.json()
.then(json => ({ json, response }))
.catch(() => ({ response }))
})
.then(({ json, response }) => {
if (!response.ok) {
throw json ? json : new Error(response.statusText)
} else {
return json
}
})
.catch((e) => {
return Promise.reject(e)
})
}
我的 webpack.config.js 如下:
import path from 'path'
import dotenv from 'dotenv'
import webpack from 'webpack'
import info from './package.json'
const resolvePath = p => path.join(__dirname, p)
const __DEV__ = process.env.NODE_ENV !== 'production'
const { parsed: env } = dotenv.load()
env.NODE_ENV = process.env.NODE_ENV
Object.keys(env).forEach(k => env[k] = JSON.stringify(env[k]))
const config = {
name: info.name,
entry: {
app: 'src/index',
vendor: Object.keys(info.dependencies)
},
output: {
path: __DEV__ ? resolvePath('public') : resolvePath('../analytics-server/server/public'),
filename: '/js/[name].js',
publicPath: '/',
debug: __DEV__,
pathinfo: __DEV__
},
module: {
preLoaders: [{
// NOTE: Run linter before transpiling
test: /\.js$/,
loader: 'eslint-loader',
exclude: /node_modules/
}],
loaders: [{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}, {
// TODO: Remove after upgrading to webpack 2
test: /\.json$/,
loader: 'json'
}]
},
resolve: {
alias: {
src: resolvePath('src'),
core: resolvePath('src/core'),
components: resolvePath('src/components'),
modules: resolvePath('src/modules'),
services: resolvePath('src/services'),
resources: resolvePath('src/resources'),
locales: resolvePath('src/locales')
},
// NOTE: Empty string to properly resolve when providing extension
// TODO: Remove after upgrading to webpack 2
extensions: ['', '.js']
},
plugins: [
// NOTE: `NoErrorsPlugin` causes eslint warnings to stop the build process
// new webpack.NoErrorsPlugin(),
new webpack.optimize.CommonsChunkPlugin('commons', '/js/commons.js'),
new webpack.DefinePlugin({ process: { env } })
// new webpack.NormalModuleReplacementPlugin( /^fetch-mock$/, path.resolve( __dirname, 'node_modules', 'fetch-mock/src/client.js' ) )
],
eslint: {
configFile: resolvePath('.eslintrc')
}
}
if (__DEV__) {
config.devtool = 'source-map'
config.devServer = {
contentBase: 'public',
// NOTE: Options `inline` and `hot` shall be passed as CLI arguments
// inline: true,
// hot: true,
historyApiFallback: true
}
} else {
config.plugins.push(...[
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: true,
acorn: true
})
])
}
export default config
运行应用程序时出现的错误是“fetch-mock.js:93 Uncaught Error: No fallback response defined for GET to http://localhost:3000/api/session ”,这是应用程序中发出的第一个请求。
不知道为什么 fetch-mock 会模拟所有请求。在 chrome 控制台上进行评估时,makeRequest 函数上的 fetch 值是 fetch-mock 函数,但据我所知这是正确的。
顺便说一句,我不在测试环境,我正在开发,因为我需要嘲笑我的后端,因为它还没有完成。
知道为什么会这样吗?
提前致谢