跳转到主要内容
版本:26.倍

使用webpack

Jest可以用于使用webpack管理资产、样式和编译。webpack与其他工具相比,它提供了一些独特的挑战,因为它直接与应用程序集成,允许管理样式表、图像和字体等资产,以及扩展的编译为javascript的语言和工具生态系统。

一个webpack例子#

让我们从常见的webpack配置文件开始,并将其转换为Jest设置。

/ / webpack.config.js
模块 出口 = {
模块 : {
加载器 : (
{ 排除 : ( “node_modules” ] , 加载程序 : “巴别塔” , 测试 : / 美元\ .jsx吗? / } ,
{ 加载程序 : “style-loader css-loader !” , 测试 : / 美元\ . css / } ,
{ 加载程序 : “url-loader” , 测试 : / 美元\ gif / } ,
{ 加载程序 : “file-loader” , 测试 : / \ (ttf |测试结束| svg)美元 / } ,
] ,
} ,
解决 : {
别名 : {
配置美元 : “/配置/ app-config.js。” ,
反应 : “/供应商/ react-master。” ,
} ,
扩展 : ( , js的 , “jsx” ] ,
模块 : (
“node_modules” ,
“bower_components” ,
“共享” ,
/共享/供应商/模块的 ,
] ,
} ,
} ;

如果您有由Babel转换的JavaScript文件,那么您可以启用对Babel的支持通过安装babel-jest插件。非babel JavaScript转换可以用Jest处理变换配置选项。

处理静态资产#

接下来,让我们配置Jest,以优雅地处理样式表和图像等资产文件。通常,这些文件在测试中并不是特别有用,因此我们可以安全地模拟它们。但是,如果您使用的是CSS模块,那么最好模拟一个用于查找类名的代理。

/ / package.json
{
“开玩笑” : {
“moduleNameMapper” : {
“\ \ (jpg | jpeg。| png | gif |测试结束|传递| webp svg | | ttf woff | | woff2 | mp4 | webm | mp3 | m4a格式wav | | aac |简称oga) $” : “< rootDir > / __mocks__ / fileMock.js” ,
“\ \ (css |更少)美元。” : “< rootDir > / __mocks__ / styleMock.js”
}
}
}

以及模拟文件本身:

/ / __mocks__ / styleMock.js
模块 出口 = { } ;
/ / __mocks__ / fileMock.js
模块 出口 = “test-file-stub” ;

嘲笑CSS模块#

你可以使用ES6代理嘲笑CSS模块:

添加 - - - dev identity-obj-proxy

然后你在styles对象上查找的所有类名都将按原样返回(例如,风格。foobar = = =“foobar”)。这对React来说非常方便快照测试

/ / package.json(for CSS Modules)
{
“开玩笑” : {
“moduleNameMapper” : {
“\ \ (jpg | jpeg。| png | gif |测试结束|传递| webp svg | | ttf woff | | woff2 | mp4 | webm | mp3 | m4a格式wav | | aac |简称oga) $” : “< rootDir > / __mocks__ / fileMock.js” ,
“\ \ (css |更少)美元。” : “identity-obj-proxy”
}
}
}

注意,默认情况下,在节点6中启用了代理。如果您还没有在节点6上,请确保使用Jest调用节点——harmony_proxies node_modules。bin /笑话

如果moduleNameMapper不能满足你的要求,你可以使用笑话变换配置选项,以指定资产如何转换。例如,一个转换器返回一个文件的基名(例如要求(“logo.jpg”);返回“标志”)可以写成:

/ / fileTransformer.js
常量 路径 = 需要 ( “路径” ) ;
模块 出口 = {
过程 ( src , 文件名 , 配置 , 选项 ) {
返回 的模块。出口=' + JSON stringify ( 路径 basename ( 文件名 ) ) + “;” ;
} ,
} ;
/ / package.json(for custom transformers and CSS Modules)
{
“开玩笑” : {
“moduleNameMapper” : {
“\ \ (css |更少)美元。” : “identity-obj-proxy”
} ,
“转换” : {
“\ \ (jpg | jpeg。| png | gif |测试结束|传递| webp svg | | ttf woff | | woff2 | mp4 | webm | mp3 | m4a格式wav | | aac |简称oga) $” : “< rootDir > / fileTransformer.js”
}
}
}

我们告诉Jest忽略匹配样式表或图像扩展名的文件,而需要我们的模拟文件。你可以调整正则表达式来匹配你的webpack配置句柄的文件类型。

注意:如果使用带有额外代码预处理器的babel-jest,则必须显式地将babel-jest定义为JavaScript代码要映射的转换器. js文件到babel-jest模块。

“转换” : {
“美元\ \ . js” : “babel-jest” ,
“美元\ \ . css” : “custom-transformer” ,
}

配置Jest以查找我们的文件#

现在Jest知道如何处理我们的文件,我们需要告诉它如何处理找到他们。webpack的modulesDirectories,扩展在Jest’s中也有类似的选项moduleDirectoriesmoduleFileExtensions选项。

/ / package.json
{
“开玩笑” : {
“moduleFileExtensions” : ( “js” , “jsx” ] ,
“moduleDirectories” : ( “node_modules” , “bower_components” , “共享” ] ,
“moduleNameMapper” : {
“\ \ (css |更少)美元。” : “< rootDir > / __mocks__ / styleMock.js” ,
“\ \ (gif。| ttf |测试结束| svg) $” : “< rootDir > / __mocks__ / fileMock.js”
}
}
}

注意:< rootDir >是一个特殊的令牌,Jest会用项目的根替换它。大多数时候这是你的文件夹package.json位置,除非你指定一个定制rootDir选项。

同样,webpack的resolve.root选项功能,如设置NODE_PATHenv变量,您可以设置或使用modulePaths选择。

/ / package.json
{
“开玩笑” : {
“modulePaths” : ( “/共享/供应商/模块” ] ,
“moduleFileExtensions” : ( “js” , “jsx” ] ,
“moduleDirectories” : ( “node_modules” , “bower_components” , “共享” ] ,
“moduleNameMapper” : {
“\ \ (css |更少)美元。” : “< rootDir > / __mocks__ / styleMock.js” ,
“\ \ (gif。| ttf |测试结束| svg) $” : “< rootDir > / __mocks__ / fileMock.js”
}
}
}

最后,我们必须处理webpack别名。为此,我们可以利用moduleNameMapper再次选择。

/ / package.json
{
“开玩笑” : {
“modulePaths” : ( “/共享/供应商/模块” ] ,
“moduleFileExtensions” : ( “js” , “jsx” ] ,
“moduleDirectories” : ( “node_modules” , “bower_components” , “共享” ] ,
“moduleNameMapper” : {
“\ \ (css |更少)美元。” : “< rootDir > / __mocks__ / styleMock.js” ,
“\ \ (gif。| ttf |测试结束| svg) $” : “< rootDir > / __mocks__ / fileMock.js” ,
“^反应(. *)$” : “< rootDir > /供应商/ react-master 1美元” ,
“^配置美元” : “< rootDir > /配置/ app-config.js”
}
}
}

就是这样!webpack是一个复杂而灵活的工具,因此您可能需要做一些调整来处理特定应用程序的需求。幸运的是,对于大多数项目来说,Jest应该足够灵活来处理你的webpack配置。

注意:对于更复杂的webpack配置,你可能还想研究以下项目:babel-plugin-webpack-loaders

使用webpack 2#

webpack 2提供了对ES模块的原生支持。然而,Jest运行在Node中,因此需要将ES模块编译为CommonJS模块。因此,如果你使用的是webpack 2,你很可能需要配置Babel来将ES模块编译成CommonJS模块测试环境。

/ / .babelrc
{
“预设” : ( ( “env” , { “模块” : } ] ] ,
“env” : {
“测试” : {
“插件” : ( “transform-es2015-modules-commonjs” ]
}
}
}

注意:Jest缓存文件以加速测试执行。如果你更新了。babelrc,但是Jest仍然不能工作,试着运行Jest with——no - cache

如果你使用动态导入(进口(“some-file.js”)。然后(模块= >…)),你需要启用dynamic-import-node插件。

/ / .babelrc
{
“预设” : ( ( “env” , { “模块” : } ] ] ,
“插件” : ( “syntax-dynamic-import” ] ,
“env” : {
“测试” : {
“插件” : ( “dynamic-import-node” ]
}
}
}

关于如何使用Jest、Webpack、React、Redux和Node的示例,你可以查看其中一个在这里

最后一次更新在通过Sebastien Lorber