こんにちは。
私はReactは1年位書いていますが、本格的にやり始めたのはここ最近で、webpackなどに対する理解も浅いレベルです。
最近、Reactプロジェクトにテストコードを書いていこうということになりjestを導入しようとしています。
本格的にテストコードを書くのはほぼ初めてです。
実現したいことと概要
webpackを用いて、コンポーネントの読み込みを絶対パスで行っているのですが、jest、enzymeを用いたテストコードを追加し、テストを動かそうとすると、以下のようなエラーが表示されます。
Cannot find module '~/components/Button' from 'index.js'
今の設定の絶対path読み込みを変えずにテストを実行できるようにしたいと思っています。
絶対パスで読み込めるのは、webpack.js
で以下のような設定をしているからです。
これはwebpack.config.js
の中の一部です。
理解が浅いので、抜き出す部分がこれだけでは不十分かも知れません。
その時はご指摘願います。
javascript
1// webpack.config.js 2module.exports = { 3 context: __dirname, 4 resolve: { 5 root: [path.join(__dirname, 'src'), path.join(__dirname, 'node_modules')], 6 extensions: ['', '.js', '.jsx', '.json', '.css', '.html', '.styl'], 7 alias: { 8 '~': path.resolve(__dirname, 'src/'), // ←これ 9 }, 10 }, 11};
だいぶ端折っていますが、ディレクトリ構成は以下のようになっています。
. ├── build │ └── dist │ └── src ├── src │ ├── components │ │ ├── atoms │ │ ├── index.js │ │ ├── molecules │ │ ├── organisms │ │ └── templates │ └── stores ├── tsconfig.json ├── tslint.json └── webpack.config.js
Reactコンポーネント内では以下のようにして子コンポーネントをimportしています。
import { ChildComponent } from '~/components';
試したこと
このドキュメントページを参考にして、package.json内のjest.moduleNmaeMapper
の部分を以下のように書いてみました。
正規表現の理解が甘いのでそもそも文法的に合っているかも怪しいです。
"moduleNameMapper": { "^\~/(.+)": "src/$1" }
Reactファイルの中ではチルダ記号から書いているので、このエイリアス作成部分でも「チルダから始まる○○」と書きたいのですが、jsonファイル内で「~」と書くとlinterに怒られるのでうまくいきません。
聞きたいこと
- そもそもこの方法(moduleNameMapperの編集)で合っているのか
- 合っているとしたらこの正規表現の部分はなんと書くべきか
- 間違っているとしたら他に何か良い方法がないか
などを教えていただけると嬉しいです。
よろしくおねがいします。
あなたの回答
tips
プレビュー