Nuxt.jsではJestを使ったテストを作成していたのですが、Next.jsに導入したことがなかったので導入方法を調べました。 Next.jsのドキュメントにJestの導入方法がまとまっていたのでここを参考にしました。nextjs.org ライブラリの導入 yarn add -D jest @tes…

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

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

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

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

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をコンポ…