我有这个webpack配置作为我的grunt构建过程的一部分:
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'
}
}
我们现在正在移动到react,我需要在我的测试文件中导入一些文件,其中包含此依赖项,但jest无法找到它们:
Cannot find module 'lib/select2.min' from 'helpers.js'
Cannot find module 'jst/templates_jst' from 'base-view.js
解决这个问题的正确方法是什么?
4条答案
按热度按时间q3qa4bjr1#
以下是目前使用
webpack@4.11.1
和jest@23.1.0
的情况。假设这是你的外部webpack配置:您需要Map每个外部库,以便在jest配置中正确解析,如下所示:
在调试问题时,请确保检查构建的组件文件的外观。您需要确保看到类似以下内容:
重要的是
react
用于commonjs和amd,React
用于浏览器。zlhcx6iw2#
您需要mock外部库。
使用jquery:
1.在__test__文件夹的同一级别创建__mocks__文件夹。
1.在其中,创建一个与依赖项同名的文件,在本例中为jquery(jquery.js)。
1.在测试文件中,使用 jest.mock 函数引用mock外部依赖:jest.mock('jquery');
从jest the docs:https://facebook.github.io/jest/docs/manual-mocks.html
希望能帮上忙。
46qrfjad3#
对于我的例子来说,使用
__mocks__
有点冗长,但是我使用了如果
__mocks__
的建议对您来说太冗长,请查看此处的文档dhxwm5r44#
您也可以使用moduleNameMapper,但如果您不需要该功能,只需使用jest-transform-stub对其进行存根。