Naoki Otsu

Wallaby + Vue CLI + GraphQLの環境構築

2019-06-13

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.jstransformを下記のように修正する

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も同様にちゃんと動いてるのが確認出来た。