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

使用webpack

Jest可以用于使用webpack来管理资源、 样式和编译的项目中。webpack确实相比超过其他类似工具来说,展示出一些特有的优势,因为它直接与你的应用整合,允许管理资源文件,如图像和字体,并带有可以将系统编译为JavaScript语言和工具。

Webpack示例#

我们通过以下常见的webpack配置文件,将其转化为符合开玩笑使用的配置。

/ / 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处理变换配置选项。非babel JavaScript转换可以用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

然后在样式对象上,你的所有类名查找都会原样返回(如风格。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,请确保你通过调用节点——harmony_proxies node_modules。bin /笑话来使用笑话。

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

注:如果你bael-jest和额外的代码预处理器,你必须明确的定义babel-jest为你的Js代码的转换器,并且你需要映射所有. js文件到babel-jest模块。

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

配置开玩笑来搜寻文件#

现在开玩笑知道如何处理我们的文件了,接下来我们需要告诉它如何找到它们。webpack的modulesDirectories, 和扩展选项都是和玩笑的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会用项目的根替换它。注意:< 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别名。最后,我们必须处理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是一个复杂和灵活的工具,所以你可能需要做一些调整,以符合你的特定应用的需要。幸运的是对于大多数项目来说,使用开玩笑来处理webpack配置,应该会更灵活。

注︰对于更复杂的webpack配置,你可能需要研究一些项目,例如︰babel-plugin-webpack-loaders

使用webpack 2#

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

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

注意:开玩笑会通过缓存文件来加速测试的执行。如果你更新了.babelrc文件,但是开玩笑还是不工作,尝试加入——no - cache参数来运行笑话。

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

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

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