Jestを使ってslick-carouselを使っている（node-modules以下のCSSを読み込んでいる）コンポーネントをテストする 💯

具体例を書くと、jQuery + Slickを使っているサイトをNuxt.jsに移植している際に発生しました。

import $ from 'jquery';
import 'slick-carousel';
import 'slick-carousel/slick/slick.css';

という感じで、slickをインポートしているComponentをテストしようとすると、エラーになり、

● Test suite failed to run

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

と、

1. node_modules以下をignoreしたいとき、transformIgnorePatternsを使ってね
2. transformを調整したい時はtransformオプションを使ってね
3. JS以外のモジュールをモックにしたい場合は、moduleNameMapperオプションを使えばスタブ化できるよ

とメッセージが表示されました。

もしかすると、vue-slick-carouselを使えば解決するかもしれないのですが、今回はのっぴきならない事情で使えず。

解決策を探していると、

❶ CSSをnode_modulesの外にコピー
❷ node_modules以下の画像・フォントを読み込んでいる箇所を修正

stackoverflow.com

という手段を見つけ、Jestを使ってCSSをimportしているコンポーネントをテストするとの併せ技で解決を図ったのですが、釈然としませんでした。（一応解決しました）

blog.kimizuka.org

が、jest-transform-stub の FAQ を参考に、moduleNameMapperとtransformを試してみたところ、node_modules以下のままでも解決できたので、手順を残しておきます。

Nuxt.jsでの設定方法

❶ jest-transform-stubの導入

yarn add -D jest-transform-stub

※ yarnを使っている場合

❷ jest.config.jsを編集

module.exports = {
  moduleNameMapper: {
    '^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub'
  },
  transform: {
    '^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub'
  }
};

これで、

import 'slick-carousel';
import 'slick-carousel/slick/slick.css';

と、node_module以下のCSSを読み込んでもテストが通るようになりました。

実際、CSSだけなら、

module.exports = {
  transform: {
    '^.+\\.(css)$': 'jest-transform-stub'
  }
};

で充分なのですが、今後のためにたくさん設定しておきました。