Vue CLI + GraphQL な環境に Wallaby を入れる時にハマってしまったので、忘れないうちに備忘録 公式ドキュメントに沿ったやり方で進めていたがそれだとエラーが起きてしまったので、その対処法という感じ GraphQL のライブラリは、広く使われていそうなvue-apolloを使う

流れ

• Vue CLI でプロジェクト作成
• Jest を導入
• vue-apollo を導入
• Wallaby を導入

Vue CLI で新しくプロジェクト作成

Vue CLI でプロジェクトを作成(現時点だと Vue CLI v3)

vue create hogehoge

Jest を導入

Vue CLI で作っただけだと Jest は入ってないので、Jest を導入する 一般的な Jest の構成を Vue CLI Plugin を使って導入

vue add @vue/unit-jest

vue-apollo を導入

こちらも Vue CLI Plugin で vue-apollo が入れられるので導入する

vue add apollo

Wallaby を導入

ここがハマったところ 特に GraphQL が絡んでいるので、Wallaby 公式の Vue のやり方をそのままやっても動かない

まずは必要なモジュールをインストール

yarn add -D wallaby-vue-compiler
yarn add -D jest-transform-graphql

wallaby.jsをルートに配置

module.exports = (wallaby) => {
  process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;

  const compiler = wallaby.compilers.babel({
    presets: [["@vue/app", { modules: "commonjs" }]],
  });

  return {
    files: ["src/**/*", "jest.config.js", "package.json"],

    tests: ["tests/**/*.spec.js"],

    env: {
      type: "node",
      runner: "node",
    },

    compilers: {
      "**/*.js": compiler,
      "**/*.vue": require("wallaby-vue-compiler")(compiler),
    },

    preprocessors: {
      "**/*.vue": (file) =>
        require("vue-jest").process(file.content, file.path),
    },

    setup: function (wallaby) {
      const jestConfig = require("./package").jest || require("./jest.config");
      delete jestConfig.transform["\\.vue$"];
      delete jestConfig.transform["\\.jsx?$"];
      wallaby.testFramework.configure(jestConfig);
    },

    testFramework: "jest",

    debug: true,
  };
};

この wallaby.js の中身で公式ドキュメントと違う部分が唯一あって

delete jestConfig.transform["\\.vue$"];
delete jestConfig.transform["\\.jsx?$"];

の部分 こうしないと、.gqlの GraphQL ファイルを Wallaby が変換しようとして、SyntaxError: Invalid or unexpected tokenのようなエラーが発生してしまう

最後に、jest.config.jsのtransformを下記のように修正する

transform: {
  '\\.gql$': 'jest-transform-graphql',
  '\\.vue$': 'vue-jest',
  '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
  '\\.jsx?$': 'babel-jest',
},

Jest で GraphQL ファイルを扱えるようにする jest-transform-graphql を指定するのと

'\\.vue$': 'vue-jest',
'\\.jsx?$': 'babel-jest',

の指定方法を変えないと [Vue warn]: Failed to mount component: template or render function not defined. のような warn が出たり、 TypeError: wrapper.vm.hoge is not a function のようなエラーが出て、Wallaby が正常に動かない

結果的にyarn testは通るけど Wallaby だけエラーが出て、Wallaby を使う意味がなくなってしまう ので、上記のように修正する必要があった

この状態で Wallaby を動かすと、GraphQL を読んでる vue ファイルを import しても無事に Wallaby は動いてくれた。 yarn testも同様にちゃんと動いてるのが確認出来た。