如何将外部从 webpack 传递到 jest?
How to pass externals from webpack to jest?
我在 grunt 构建过程中得到了这个 webpack 配置:
module.exports = {
options: {
output: {
path: path.resolve('../ui/static/js'),
filename: '[name].js',
chunkFilename: '[id].[name].js',
libraryTarget: 'amd',
library: '[name]'
},
externals: [
'jquery',
'lodash',
'backbone',
'backbone.layoutmanager',
'moment',
'spin',
'lib/select2.min',
'dispatcher'
],
resolve: {
root: path.resolve('../ui'),
alias: {
'jst': 'static/jst'
}
}
我们现在开始做出反应,我需要在我的测试文件中导入一些文件,其中包含这些依赖项,但 jest 找不到它们:
Cannot find module 'lib/select2.min' from 'helpers.js'
Cannot find module 'jst/templates_jst' from 'base-view.js
解决这个问题的正确方法是什么?
您需要模拟 外部库。
示例jquery:
- 在 __test__ 文件夹的同一级别创建一个 __mocks__ 文件夹。
- 在其中,创建一个与依赖项同名的文件,在本例中为 jquery (jquery.js).
- 在测试文件中,使用jest.mock函数引用模拟外部依赖:jest.mock('jquery');
来自开玩笑的文档:
https://facebook.github.io/jest/docs/manual-mocks.html
希望对您有所帮助。
以下是今天适用于 webpack@4.11.1
和 jest@23.1.0
的内容。假设这是你的外部 webpack 配置:
externals: {
react: {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react',
},
}
您需要映射每个外部库,以便在您的 jest 配置中正确解析,如下所示:
moduleNameMapper: {
"^./react": path.resolve(__dirname, 'node_modules/react'),
}
调试问题时,请务必检查构建的组件文件的外观。你想确定你看到的是这样的东西:
!function(e,t){if("object"==typeof exports&&"object"==typeof module)
module.exports=t(require("react"));
else if("function"==typeof define&&define.amd)define(["react"],t);
else{var n="object"==typeof exports?t(require("react")):t(e.React);
重要的一点是 react
用于 commonjs 和 amd,React
用于浏览器。
对于我的情况,使用 __mocks__
会有点冗长,但我使用了
jest.mock('myModule', () => {/* module impl */}, {virtual: true})
如果 __mocks__
建议对您来说太冗长,请查看文档 here
我在 grunt 构建过程中得到了这个 webpack 配置:
module.exports = {
options: {
output: {
path: path.resolve('../ui/static/js'),
filename: '[name].js',
chunkFilename: '[id].[name].js',
libraryTarget: 'amd',
library: '[name]'
},
externals: [
'jquery',
'lodash',
'backbone',
'backbone.layoutmanager',
'moment',
'spin',
'lib/select2.min',
'dispatcher'
],
resolve: {
root: path.resolve('../ui'),
alias: {
'jst': 'static/jst'
}
}
我们现在开始做出反应,我需要在我的测试文件中导入一些文件,其中包含这些依赖项,但 jest 找不到它们:
Cannot find module 'lib/select2.min' from 'helpers.js'
Cannot find module 'jst/templates_jst' from 'base-view.js
解决这个问题的正确方法是什么?
您需要模拟 外部库。
示例jquery:
- 在 __test__ 文件夹的同一级别创建一个 __mocks__ 文件夹。
- 在其中,创建一个与依赖项同名的文件,在本例中为 jquery (jquery.js).
- 在测试文件中,使用jest.mock函数引用模拟外部依赖:jest.mock('jquery');
来自开玩笑的文档: https://facebook.github.io/jest/docs/manual-mocks.html
希望对您有所帮助。
以下是今天适用于 webpack@4.11.1
和 jest@23.1.0
的内容。假设这是你的外部 webpack 配置:
externals: {
react: {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react',
},
}
您需要映射每个外部库,以便在您的 jest 配置中正确解析,如下所示:
moduleNameMapper: {
"^./react": path.resolve(__dirname, 'node_modules/react'),
}
调试问题时,请务必检查构建的组件文件的外观。你想确定你看到的是这样的东西:
!function(e,t){if("object"==typeof exports&&"object"==typeof module)
module.exports=t(require("react"));
else if("function"==typeof define&&define.amd)define(["react"],t);
else{var n="object"==typeof exports?t(require("react")):t(e.React);
重要的一点是 react
用于 commonjs 和 amd,React
用于浏览器。
对于我的情况,使用 __mocks__
会有点冗长,但我使用了
jest.mock('myModule', () => {/* module impl */}, {virtual: true})
如果 __mocks__
建议对您来说太冗长,请查看文档 here