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が古いため、エラーが発生する。

https://github.com/TypeStrong/ts-loader/issues/726

$ 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が古いため、コンパイルに失敗する。

https://github.com/webpack-contrib/worker-loader/issues/125

$ 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に対応していないため、エラーが発生する。

https://github.com/webpack/webpack/issues/6568

$ 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に置き換える。

https://github.com/webpack-contrib/extract-text-webpack-plugin/tree/0b69b72aa7cf702a01a42a733432da5c344eed1c#usage

$ 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は挙動に癖がある¹らしく(?)、使わない方が良いそう。

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))};`;
  },
};

https://gfx.hatenablog.com/entry/2017/11/24/135343 ↩