DEPRECATED (2019.07.06)
古くからの「HTMLとスタイルは別ファイルに分割すべし」との考えに従ってスタイルはコンポーネント毎に専用のCSSを用意してcss-loaderで読み込ませていたが、Css in JSの方が有用と判断したため本記事は有用性を失っている。
css-loaderによるlocalidentnameを開発/テスト/ビルド環境で使うための整備方法の備忘録。
環境
- node: 10.11.0
- react: 16.5.2
- webpack: 4.20.2
Eject実行
開発とビルドで異なるwebpack設定を用いるため、Ejectを行う。
$ yarn eject && yarn
開発環境整備
開発環境整備の手順を記す。
Packageアップデート
config/webpack.config.dev.jsで使われているパッケージをアップデートする。
$ yarn add autoprefixer path webpack html-webpack-plugin case-sensitive-paths-webpack-plugin react-dev-utils fork-ts-checker-webpack-plugin tsconfig-paths-webpack-plugin
react-dev-utilsの最新化
html-webpack-pluginがwebpack 4に対応していないため、エラーが発生する。
Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found.
BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatibility layer for this hook, hook into 'this._pluginCompat'.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
node_modules/react-dev-utils/InterpolateHtmlPlugin.jsにて、プラグイン追加のコードがwebpack 4と整合しないのでreact-dev-utilsを最新化する。
$ yarn add react-dev-utils@next
コードの差分は以下の通り。
node_modules/react-dev-utils/InterpolateHtmlPlugin.js
- constructor(replacements) {
- this.replacements = replacements;
- }
+ constructor(htmlWebpackPlugin, replacements) {
+ this.htmlWebpackPlugin = htmlWebpackPlugin;
+ this.replacements = replacements;
+ }
- apply(compiler) {
- compiler.plugin('compilation', compilation => {
- compilation.plugin(
- 'html-webpack-plugin-before-html-processing',
- (data, callback) => {
- // Run HTML through a series of user-specified string replacements.
- Object.keys(this.replacements).forEach(key => {
- const value = this.replacements[key];
- data.html = data.html.replace(
- new RegExp('%' + escapeStringRegexp(key) + '%', 'g'),
- value
- );
- });
- callback(null, data);
- }
- );
- });
- }
+ apply(compiler) {
+ compiler.hooks.compilation.tap('InterpolateHtmlPlugin', compilation => {
+ this.htmlWebpackPlugin
+ .getHooks(compilation)
+ .beforeEmit.tap('InterpolateHtmlPlugin', data => {
+ // Run HTML through a series of user-specified string replacements.
+ Object.keys(this.replacements).forEach(key => {
+ const value = this.replacements[key];
+ data.html = data.html.replace(
+ new RegExp('%' + escapeStringRegexp(key) + '%', 'g'),
+ value
+ );
+ });
+ });
+ });
+ }
new InterpolateHtmlPluginの引数変更
html-webpack-pluginに関数getHooksが存在しないため、エラーになる。
$ yarn start
yarn run v1.10.1
$ node scripts/start.js
this.htmlWebpackPlugin.getHooks is not a function
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
`config/webpack.config.dev.js`にて、インスタンス`InterpolateHtmlPlugin`作成時の引数を変更する。
config/webpack.config.dev.js
- new InterpolateHtmlPlugin(env.raw),
+ new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
加えて、`html-webpack-plugin`を最新化する。
$ yarn add html-webpack-plugin@next
ts-loaderの最新化
ts-loaderが古いため、エラーが発生する。
$ yarn start
Failed to compile.
./src/index.js
TypeError: Cannot read property 'ts' of undefined
URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
ts-loaderを最新化する。
$ yarn add ts-loader@latest
file-loaderの最新化
file-loaderが古いため、コンパイルに失敗する。
$ yarn start
Failed to compile.
./src/logo.svg
Syntax error: Cannot read property 'context' of undefined
URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
file-loaderを最新化する。
$ yarn add file-loader@latest
@types/webpackのインストール
@types/webpackが存在しないため、コンパイルエラーが発生する。
$ yarn start
Failed to compile.
/Users/thara/Desktop/10022018/01/node_modules/fork-ts-checker-webpack-plugin/lib/types/index.d.ts
ERROR in /Users/thara/Desktop/10022018/01/node_modules/fork-ts-checker-webpack-plugin/lib/types/index.d.ts(4,26):
TS7016: Could not find a declaration file for module 'webpack'. '/Users/thara/Desktop/10022018/01/node_modules/webpack/lib/webpack.js' implicitly has an 'any' type.
Try `npm install @types/webpack` if it exists or add a new declaration (.d.ts) file containing `declare module 'webpack';`
@types/webpackをインストールする。
$ yarn add @types/webpack
動作確認
yarn startが成功し、ページが表示されることを確認する。
$ yarn start
Compiled with warnings.
configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
mode警告を抑制
modeを設定して警告を抑制する。
config/webpack.config.dev.js
module.exports = {
+ mode: 'development',
最終確認
警告なくyarn startが成功することを確認する。
$ yarn start
Compiled successfully!
You can now view et in the browser.
Local: http://localhost:3000/
On Your Network: http://192.168.11.6:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.
ここまでのまとめ
開発環境整備のために実施したコマンド、編集の要点は以下の通り。
$ yarn add autoprefixer path webpack html-webpack-plugin@next case-sensitive-paths-webpack-plugin react-dev-utils@next fork-ts-checker-webpack-plugin tsconfig-paths-webpack-plugin ts-loader@latest file-loader@latest @types/webpack
config/webpack.config.dev.js
module.exports = {
+ mode: 'development',
- new InterpolateHtmlPlugin(env.raw),
+ new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
テスト環境整備
テスト環境整備の手順を記す。
src/App.tsxの編集
src/App.tsxを以下のように編集する。
src/App.tsx
import * as React from 'react';
import * as style from './App.css';
import * as logo from './logo.svg';
class App extends React.Component {
public render() {
return (
<div className={style.App}>
<header className={style.appHeader}>
<img src={logo} className={style.appLogo} alt="logo" />
<h1 className={style.appTitle}>Welcome to React</h1>
</header>
<p className={style.appIntro}>
To get started, edit <code>src/App.tsx</code> and save to reload.
</p>
</div>
);
}
}
export default App;
tslintにより、エラーCannot find module './App.css'.が出力されるため、モジュールの記述を行う。
src/images.d.ts
declare module '*.tiff'
+ declare module '*.css'
config/webpack.config.dev.jsの編集
config/webpack.config.dev.jsを以下のように編集する。
config/webpack.config.dev.js
- {
- test: /\.css$/,
- use: [
- require.resolve('style-loader'),
- {
- loader: require.resolve('css-loader'),
- options: {
- importLoaders: 1,
- },
- },
- {
- loader: require.resolve('postcss-loader'),
- options: {
- // Necessary for external CSS imports to work
- // https://github.com/facebookincubator/create-react-app/issues/2677
- ident: 'postcss',
- plugins: () => [
- require('postcss-flexbugs-fixes'),
- autoprefixer({
- browsers: [
- '>1%',
- 'last 4 versions',
- 'Firefox ESR',
- 'not ie < 9', // React doesn't support IE8 anyway
- ],
- flexbox: 'no-2009',
- }),
- ],
- },
- },
- ],
- },
+ {
+ test: /\.css$/,
+ use: [
+ require.resolve('style-loader'),
+ {
+ loader: 'css-loader',
+ options: {
+ modules: true,
+ sourceMap: true,
+ camelCase: true,
+ localIdentName: '[local]-[hash:base64:5]',
+ importLoaders: 1
+ }
+ }
+ ]
+ },
css-loader動作確認
yarn startを停止して再実行し、デザインに変化が無いことを確認する。
^C
$ yarn start
テストコード追記
src/App.test.tsxにて、以下のテストを追記する。
src/App.test.tsx
+ import { create } from 'react-test-renderer';
+ it('snapshot test', () => {
+ const tree = create(<App />)
+ .toJSON();
+ expect(tree).toMatchSnapshot();
+ });
テスト実行 => 失敗
テストを実行し、失敗することを確認する。原因はクラス名の展開が行われていないためであり、TypeScriptは厳密にコンパイルエラーを出力する。
$ yarn add react-test-renderer @types/react-test-renderer
$ yarn test
FAIL src/App.test.tsx
● renders without crashing
TypeError: Cannot read property 'App' of undefined
identity-obj-proxyインストール
パッケージidentity-obj-proxyをインストールし、package.jsonを以下の通りに追記する。
$ yarn add -D identity-obj-proxy
package.json
"moduleNameMapper": {
- "^react-native$": "react-native-web"
+ "^react-native$": "react-native-web",
+ "\\.(css|less)$": "identity-obj-proxy"
},
動作確認
yarn testが成功する。スナップショット内でクラス名が展開されていることを確認する。
$ yarn test
PASS src/App.test.tsx
✓ renders without crashing (4ms)
✓ snapshot test (1ms)
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 1 passed, 1 total
Time: 0.393s, estimated 1s
Ran all test suites.
Watch Usage: Press w to show more.
src/__snapshots__/App.test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`snapshot test 1`] = `
<div
className="App"
>
<header
className="appHeader"
>
<img
alt="logo"
className="appLogo"
src="logo.svg"
/>
<h1
className="appTitle"
>
Welcome to React
</h1>
</header>
<p
className="appIntro"
>
To get started, edit
<code>
src/App.tsx
</code>
and save to reload.
</p>
</div>
`;
ここまでのまとめ
テスト環境整備のために実施したコマンド、編集の要点は以下の通り。
$ yarn add -D identity-obj-proxy
package.json
"moduleNameMapper": {
- "^react-native$": "react-native-web"
+ "^react-native$": "react-native-web",
+ "\\.(css|less)$": "identity-obj-proxy"
},
config/webpack.config.dev.js
- {
- test: /\.css$/,
- use: [
- require.resolve('style-loader'),
- {
- loader: require.resolve('css-loader'),
- options: {
- importLoaders: 1,
- },
- },
- {
- loader: require.resolve('postcss-loader'),
- options: {
- // Necessary for external CSS imports to work
- // https://github.com/facebookincubator/create-react-app/issues/2677
- ident: 'postcss',
- plugins: () => [
- require('postcss-flexbugs-fixes'),
- autoprefixer({
- browsers: [
- '>1%',
- 'last 4 versions',
- 'Firefox ESR',
- 'not ie < 9', // React doesn't support IE8 anyway
- ],
- flexbox: 'no-2009',
- }),
- ],
- },
- },
- ],
- },
+ {
+ test: /\.css$/,
+ use: [
+ require.resolve('style-loader'),
+ {
+ loader: 'css-loader',
+ options: {
+ modules: true,
+ sourceMap: true,
+ camelCase: true,
+ localIdentName: '[local]-[hash:base64:5]',
+ importLoaders: 1
+ }
+ }
+ ]
+ },
ビルド環境整備
ビルド環境整備の手順を記す。
Packageアップデート
config/webpack.config.prod.jsで使われているパッケージをアップデートする。なお、開発環境構築時に追加済みのパッケージは除外する。
$ yarn add webpack-manifest-plugin sw-precache-webpack-plugin
new InterpolateHtmlPluginの引数変更
開発環境整備と同様のエラー。
$ yarn build
yarn run v1.10.1
$ node scripts/build.js
Creating an optimized production build...
Failed to compile.
this.htmlWebpackPlugin.getHooks is not a function
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
同様に修正する。
config/webpack.config.prod.js
- new InterpolateHtmlPlugin(env.raw),
+ new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
extract-text-webpack-pluginの置き換え
extract-text-webpack-pluginがwebpack 4に対応していないため、エラーが発生する。
$ yarn build
yarn run v1.10.1
$ node scripts/build.js
Creating an optimized production build...
(node:52482) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
/Users/thara/Desktop/just-eject/node_modules/webpack/lib/Chunk.js:827
throw new Error(
^
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
at Chunk.get (/Users/thara/Desktop/just-eject/node_modules/webpack/lib/Chunk.js:827:9)
at /Users/thara/Desktop/just-eject/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
at Array.forEach (<anonymous>)
at /Users/thara/Desktop/just-eject/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/thara/Desktop/just-eject/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:7:1)
at AsyncSeriesHook.lazyCompileHook (/Users/thara/Desktop/just-eject/node_modules/tapable/lib/Hook.js:154:20)
at Compilation.seal (/Users/thara/Desktop/just-eject/node_modules/webpack/lib/Compilation.js:1215:27)
at hooks.make.callAsync.err (/Users/thara/Desktop/just-eject/node_modules/webpack/lib/Compiler.js:541:17)
at _done (eval at create (/Users/thara/Desktop/just-eject/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
at _err1 (eval at create (/Users/thara/Desktop/just-eject/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:32:22)
at _addModuleChain (/Users/thara/Desktop/just-eject/node_modules/webpack/lib/Compilation.js:1066:12)
at processModuleDependencies.err (/Users/thara/Desktop/just-eject/node_modules/webpack/lib/Compilation.js:982:9)
at process._tickCallback (internal/process/next_tick.js:61:11)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
extract-text-webpack-pluginをmini-css-extract-pluginに置き換える。
$ yarn add mini-css-extract-plugin
config/webpack.config.prod.js
- const ExtractTextPlugin = require('extract-text-webpack-plugin');
+ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
- // ExtractTextPlugin expects the build output to be flat.
- // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
- // However, our output is structured with css, js and media folders.
- // To have this structure working with relative paths, we have to use custom options.
- const extractTextPluginOptions = shouldUseRelativeAssetPaths
- ? // Making sure that the publicPath goes back to to build folder.
- { publicPath: Array(cssFilename.split('/').length).join('../') }
- : {};
- // The notation here is somewhat confusing.
- // "postcss" loader applies autoprefixer to our CSS.
- // "css" loader resolves paths in CSS and adds assets as dependencies.
- // "style" loader normally turns CSS into JS modules injecting <style>,
- // but unlike in development configuration, we do something different.
- // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
- // (second argument), then grabs the result CSS and puts it into a
- // separate file in our build process. This way we actually ship
- // a single CSS file in production instead of JS code injecting <style>
- // tags. If you use code splitting, however, any async bundles will still
- // use the "style" loader inside the async code so CSS from them won't be
- // in the main CSS file.
- {
- test: /\.css$/,
- loader: ExtractTextPlugin.extract(
- Object.assign(
- {
- fallback: {
- loader: require.resolve('style-loader'),
- options: {
- hmr: false,
- },
- },
- use: [
- {
- loader: require.resolve('css-loader'),
- options: {
- importLoaders: 1,
- minimize: true,
- sourceMap: shouldUseSourceMap,
- },
- },
- {
- loader: require.resolve('postcss-loader'),
- options: {
- // Necessary for external CSS imports to work
- // https://github.com/facebookincubator/create-react-app/issues/2677
- ident: 'postcss',
- plugins: () => [
- require('postcss-flexbugs-fixes'),
- autoprefixer({
- browsers: [
- '>1%',
- 'last 4 versions',
- 'Firefox ESR',
- 'not ie < 9', // React doesn't support IE8 anyway
- ],
- flexbox: 'no-2009',
- }),
- ],
- },
- },
- ],
- },
- extractTextPluginOptions
- )
- ),
- // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
- },
+ {
+ test: /\.css$/,
+ use: [
+ MiniCssExtractPlugin.loader,
+ {
+ loader: 'css-loader',
+ options: {
+ modules: true,
+ camelCase: true,
+ minimize: true,
+ localIdentName: '[local]-[hash:base64:5]',
+ importLoaders: 1
+ }
+ }
+ ]
+ },
- }), // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
- new ExtractTextPlugin({
- filename: cssFilename,
- }),
+ }),
+ new MiniCssExtractPlugin({
+ filename: 'static/css/[name].[hash:8].css',
+ }),
ビルド確認
ビルドが成功することを確認する。
$ yarn build
yarn run v1.10.1
$ node scripts/build.js
Creating an optimized production build...
Compiled with warnings.
configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
File sizes after gzip:
37.58 KB build/static/js/main.bb9d475b.js
308 B build/static/css/main.3f8bfe3a.css
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build
Find out more about deployment here:
http://bit.ly/CRA-deploy
✨ Done in 17.77s.
mode警告を抑制
modeを設定して警告を抑制する。
config/webpack.config.prod.js
module.exports = {
+ mode: 'production',
動作確認
警告なくビルドが完了する。serve -s buildを実行して正常な動作を確認すること。
$ yarn build
yarn run v1.10.1
$ node scripts/build.js
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
37.58 KB build/static/js/main.bb9d475b.js
308 B build/static/css/main.243fe7ef.css
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build
Find out more about deployment here:
http://bit.ly/CRA-deploy
✨ Done in 7.29s.
ここまでのまとめ
ビルド環境整備のために実施した編集の要点は以下の通り。
$ yarn add webpack-manifest-plugin sw-precache-webpack-plugin mini-css-extract-plugin
config/webpack.config.prod.js
- const ExtractTextPlugin = require('extract-text-webpack-plugin');
+ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
+ mode: 'production',
- // ExtractTextPlugin expects the build output to be flat.
- // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
- // However, our output is structured with css, js and media folders.
- // To have this structure working with relative paths, we have to use custom options.
- const extractTextPluginOptions = shouldUseRelativeAssetPaths
- ? // Making sure that the publicPath goes back to to build folder.
- { publicPath: Array(cssFilename.split('/').length).join('../') }
- : {};
- // The notation here is somewhat confusing.
- // "postcss" loader applies autoprefixer to our CSS.
- // "css" loader resolves paths in CSS and adds assets as dependencies.
- // "style" loader normally turns CSS into JS modules injecting <style>,
- // but unlike in development configuration, we do something different.
- // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
- // (second argument), then grabs the result CSS and puts it into a
- // separate file in our build process. This way we actually ship
- // a single CSS file in production instead of JS code injecting <style>
- // tags. If you use code splitting, however, any async bundles will still
- // use the "style" loader inside the async code so CSS from them won't be
- // in the main CSS file.
- {
- test: /\.css$/,
- loader: ExtractTextPlugin.extract(
- Object.assign(
- {
- fallback: {
- loader: require.resolve('style-loader'),
- options: {
- hmr: false,
- },
- },
- use: [
- {
- loader: require.resolve('css-loader'),
- options: {
- importLoaders: 1,
- minimize: true,
- sourceMap: shouldUseSourceMap,
- },
- },
- {
- loader: require.resolve('postcss-loader'),
- options: {
- // Necessary for external CSS imports to work
- // https://github.com/facebookincubator/create-react-app/issues/2677
- ident: 'postcss',
- plugins: () => [
- require('postcss-flexbugs-fixes'),
- autoprefixer({
- browsers: [
- '>1%',
- 'last 4 versions',
- 'Firefox ESR',
- 'not ie < 9', // React doesn't support IE8 anyway
- ],
- flexbox: 'no-2009',
- }),
- ],
- },
- },
- ],
- },
- extractTextPluginOptions
- )
- ),
- // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
- },
+ {
+ test: /\.css$/,
+ use: [
+ MiniCssExtractPlugin.loader,
+ {
+ loader: 'css-loader',
+ options: {
+ modules: true,
+ camelCase: true,
+ minimize: true,
+ localIdentName: '[local]-[hash:base64:5]',
+ importLoaders: 1
+ }
+ }
+ ]
+ },
- new InterpolateHtmlPlugin(env.raw),
+ new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
- }), // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
- new ExtractTextPlugin({
- filename: cssFilename,
- }),
+ }),
+ new MiniCssExtractPlugin({
+ filename: 'static/css/[name].[hash:8].css',
+ }),
備忘録
非モジュールのimport
TypeScriptを理解していなかったため、画像のimportでハマった。
テスト用にApp.tsxを変更する際、CSS対策のみの確認を想定していたため、logo.svgのimportはデフォルトのままとしていた。
javascript/App.tsx
import logo from './logo.svg';
この状態でyarn testを実行すると、imgのsrcはundefinedと展開される。
src/__snapshots__/App.test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`snapshot test 1`] = `
<div
className="App"
>
<header
className="appHeader"
>
<img
alt="logo"
className="appLogo"
src={undefined}
/>
<h1
className="appTitle"
>
Welcome to React
</h1>
</header>
<p
className="appIntro"
>
To get started, edit
<code>
src/App.tsx
</code>
and save to reload.
</p>
</div>
`;
根本的な解決策はimport * as hoge from 'hoge.svg'の書式を使うことである。試行錯誤の末に見つけた、jestのtransformを使う解決策を備忘録として書き残すが、exports.defaultは挙動に癖がある1らしく(?)、使わない方が良いそう。
package.json
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.tsx?$": "<rootDir>/config/jest/typescriptTransform.js",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+ "^.+\\.svg$": "<rootDir>/config/jest/imageTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
config/jest/imageTransform.js
'use strict';
const path = require('path');
// This is a custom Jest transformer turning file imports into filenames.
// http://facebook.github.io/jest/docs/en/webpack.html
module.exports = {
process(src, filename) {
return `exports.default = ${JSON.stringify(path.basename(filename))};`;
},
};