跳转到主要内容
版本: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处理变换配置选项。

Обробкастатичнихресурсів#

Тепердавайтеналаштуємод开玩笑лякоректноїобробкистатичнихфайлів,таких,кстилітазображення。Зазвичайціфайлинепотрібнідлятесті,ваотжемиможемопростоїхімітувати。Проте,якщовивикористовуєт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

ТодізапитclassNameзобє“ктастилівбудеповернутийякє(наприклад,风格。foobar = = =“foobar”)。这对React来说非常方便快照测试

/ / package.json(для 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知道如何处理我们的文件,我们需要告诉它如何处理找到他们。ДляпараметрівwebpackmodulesDirectoriesта扩展є прямі аналоги в笑话:moduleDirectoriesтаmoduleFileExtensions

/ / 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的示例,你可以查看其中一个在这里