具体例を書くと、jQuery + Slickを使っているサイトをNuxt.jsに移植している際に発生しました。 import $ from 'jquery'; import 'slick-carousel'; import 'slick-carousel/slick/slick.css'; という感じで、slickをインポートしているComponentをテストし…

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

Nuxt.jsにて、 import '~/assets/css/common.scss'; という感じで、scssをインポートしているComponentをテストしようとすると、 SyntaxError: Unexpected identifier と、SCSSがパースできずJestがコケて困ってました。解決策を探してみたところ、 vue-jest…

Jestを使ってCSSをimportしているコンポーネントをテストする 💯

locationのテストの例 JavaScript Jest 変数を受け取る例 navigatorのテストの例 JavaScript Jest 変数を受け取る例 locationのテストの例 JavaScript const isProduction = () => { return location.hostname === 'kimizuka.fm'; }; export default isProdu…

Jestを使ってwindow.locationやwindow.navigatorなどのwindow直下の変数（グローバル変数）にアクセスする関数のテストをする 💯

すべてはドキュメントに書いてある通りなので、僕がまとめるまでもないのですが、一応ことの顛末をまとめておきます。jestjs.io Jestでテストする Nuxt.jsのプロジェクトのテストにはJestを使ってます。例えば、 expect(wrapper.vm.width).toBe(1200); // 幅…

Jestを使って配列が期待通りのものかテストする 💯

www.npmjs.comNuxt.jsでSVGをいい感じに使いたいときはnuxt-svg-loaderを使うと便利です。 <template> <div> <icon /> </div> </template> <script lang="ts"> import Icon from '~/assets/svg/icon.svg'; @Component({ components: { Icon } }) export default class Button extends Vue {} </script> こんな感じで、SVGをコンポ…

nuxt-svg-loaderとJestを共存させる 💯