Vuetifyを使ったVueのテストを書くときに気をつけること

はじめに

最近業務で Vue を書くことが多くなりました。ほぼ学生時代に勉強したときの知識しかないのでいろいろ ChatGPT に聞きながらやっています。特にテストを書くときに Vuetify 周りでエラーがでてなかなかテストが書けず困ったのでその時の話です。テストでは、Jestや@vue/test-utilsを使っています。

ブレークポイントでエラーが出る

TypeError: Cannot read properties of undefined (reading ‘mobileBreakpoint’)というエラーが出ました。これは breakpoint をモック化することで解決しました。Vuetify でモック化が必要なオブジェクトは公式ドキュメントにのっています。

import { shallowMount } from "@vue/test-utils";
import HogeComponent from "components/HogeComponent.vue";
import Vuetify from "vuetify";
import { jest } from "@jest/globals";

const breakpoint = {
  init: jest.fn(),
  framework: {},
  smAndDown: true,
};
const vuetify = new Vuetify();
vuetify.framework.breakpoint = breakpoint;

const wrapper = shallowMount(HogeComponent, {
  vuetify,
});

画像ファイル読み込み時に SyntaxError が出る

Jest では jpeg や svg などを読み取れず（JavaScript ファイルと見なしてしまい）、シンタックスエラーになっていました。これを対策するために画像ファイルを Jest の設定で JavaScript ファイルに差し替えるようにします。

Jest の設定で、画像ファイルの拡張子の場合は、別の JavaScript ファイルを読み込むように設定します。

 moduleNameMapper: {
    "\\.(jpg|jpeg|png|gif|webp|svg)$": "<rootDir>/__mocks__/fileMock.js",
  },

画像ファイルの代わりに読み込む JavaScript のコードはこのようにしました。

module.exports = "test-file-stub";

最後に

モバイル開発のテストではあまり意識することがないような箇所もフロントエンド開発では必要なんだなと思いました。今回悩んだ箇所は、Web 上で検索してもあまり出てこず、ChatGPT に聞いて実装していました。ChatGPT が優秀過ぎてプログラミングをする上で手放せない…となりました。

参考サイト

• [Bug Report] Unit testing - cannot mock breakpoints
• Vuetify の Mocking