跳到主要内容
版本:25.x.

使用webpack.

jest可以在使用的项目中使用网客管理资产,样式和汇编。网客提供一些独特的挑战,因为它直接与您的应用程序集成,以允许管理样式表,如图像和字体等资产以及编译到JavaScript语言和工具的广泛生态系统。

网页示例

让我们从一个常见的webpack配置文件开始并将其转换为jest setup。

// webpack.config.js.
模块 出口 = {
模块 {
装载机 [
{ 排除 [ 'node_modules' ] 装载机 “巴别塔” 测试 / \ .jsx?$ / }
{ 装载机 '风格装载机!CSS-Loader' 测试 / \ .css $ / }
{ 装载机 'URL-Loader' 测试 / \ .gif $ / }
{ 装载机 “file-loader” 测试 / \。(ttf | EOT | SVG)$ / }
]
}
解决 {
别名 {
config $ './configs/app-config.js'
反应 './vendor/reacont-master'
}
延期 [ '' 'js' 'JSX' ]
模块 [
'node_modules'
'bower_components'
“共享”
'/共享/供应商/模块'
]
}
} ;

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

处理静态资产

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

// package.json.
{
“开玩笑” {
“modulenamapper” {
“\\。(JPG | JPEG | PNG | GIF | EOT | OTF |网页| SVG | TTF | WOFF | WOFF2 | MP4 | WAV | MP3 | MP3 | MP1 | AAC | OGA)$” / __模拟__ / filemock.js”
“\\。(CSS |少)$” / __模拟__ / stylemock.js”
}
}
}

和模拟文件本身:

// __mocks __ / stylemock.js
模块 出口 = { } ;
// __mocks __ / filemock.js
模块 出口 = 'test-file-stup' ;

嘲笑CSS模块

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

添加 - - - dev identity-obj-proxy

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

// package.json(对于CSS模块)
{
“开玩笑” {
“modulenamapper” {
“\\。(JPG | JPEG | PNG | GIF | EOT | OTF |网页| SVG | TTF | WOFF | WOFF2 | MP4 | WAV | MP3 | MP3 | MP1 | AAC | OGA)$” / __模拟__ / filemock.js”
“\\。(CSS |少)$” “Identity-Obj-Proxy”
}
}
}

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

如果moduleNameMapper无法满足您的要求,您可以使用jest的要求变换配置选项以指定如何转换资产。例如,返回文件的基本名的变形式器(例如需要('logo.jpg');回报'商标')可以写作:

// filetransformer.js.
const 小路 = 要求 '小路' ;
模块 出口 = {
过程 src 文件名 配置 选项 {
返回 'module.exports =' + 杰森 stringify 小路 basename 文件名 + “;” ;
}
} ;
// package.json(用于自定义变换器和CSS模块)
{
“开玩笑” {
“modulenamapper” {
“\\。(CSS |少)$” “Identity-Obj-Proxy”
}
“转换” {
“\\。(JPG | JPEG | PNG | GIF | EOT | OTF |网页| SVG | TTF | WOFF | WOFF2 | MP4 | WAV | MP3 | MP3 | MP1 | AAC | OGA)$” /filetransformer.js”
}
}
}

我们已经告诉Jest忽略匹配样式表或图像扩展的文件,而是要求我们的模拟文件。您可以调整正则表达式以匹配WebPack配置句柄的文件类型。

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

“转换” {
“\\。JS $” “babel-jest”
“\\。CSS $” “自定义变压器”
......
}

配置Jest以查找我们的文件

现在jest知道如何处理我们的文件,我们需要告诉它如何他们。webpack的ModulesDirectories,延期jest的选项有直接类似物moduledirectoriesmodulefileextensions.选项。

// package.json.
{
“开玩笑” {
“modulfileextensions” [ “js” “JSX” ]
“moduledirectories” [ “node_modules” “bower_components” “共享” ]
“modulenamapper” {
“\\。(CSS |少)$” / __模拟__ / stylemock.js”
“\ \ (gif。| ttf |测试结束| svg) $” / __模拟__ / filemock.js”
}
}
}

笔记:< rootDir >是一个特殊的令牌,它与您的项目根目录被Jest替换。大多数时间这将是你的文件夹package.json.位于,除非您指定自定义rootdir.配置中的选项。

同样地,网客解析选项功能(如设置)NODE_PATHenv变量,您可以设置,或使用Modulepaths.选择。

// package.json.
{
“开玩笑” {
“modulepaths” [ “/共享/供应商/模块” ]
“modulfileextensions” [ “js” “JSX” ]
“moduledirectories” [ “node_modules” “bower_components” “共享” ]
“modulenamapper” {
“\\。(CSS |少)$” / __模拟__ / stylemock.js”
“\ \ (gif。| ttf |测试结束| svg) $” / __模拟__ / filemock.js”
}
}
}

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

// package.json.
{
“开玩笑” {
“modulepaths” [ “/共享/供应商/模块” ]
“modulfileextensions” [ “js” “JSX” ]
“moduledirectories” [ “node_modules” “bower_components” “共享” ]
“modulenamapper” {
“\\。(CSS |少)$” / __模拟__ / stylemock.js”
“\ \ (gif。| ttf |测试结束| svg) $” / __模拟__ / filemock.js”
“^反应(。*)$” /供应商/反应 - 掌握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——no - cache

如果使用动态导入(导入('某些文件.js')。然后(模块=> ......)),您需要启用动态导入节点插件。

// .babelrc.
{
“预设” [ [ “env” { “模块” 错误的 } ] ]
“插件” [ “语法 - 动态导入” ]
“env” {
“测试” {
“插件” [ “动态导入节点” ]
}
}
}

有关如何使用JEST与WebPack的Jest与React,Redux和Node一起使用的示例,您可以查看一个在这里

上次更新了经过Sebastien Lorber