【Jest】GraphQLで定義したクエリがimportできない場合の対処法

現象

JestのテストでマウントしたVueコンポーネントの中で、Appolo Clientに読ませるためにファイルに保存したGraphQLクエリをimportすると以下のエラーが発生する

SyntaxError: Unexpected identifier

      113 | import Component from '~/plugins/nuxt-class-component'
    > 114 | import getDataGql from '~/apollo/queries/getData.graphql'
          | ^
      115 | import createDatasGql from '~/apollo/queries/createData.graphql'
      116 | import deleteDatasGql from '~/apollo/queries/deteleData.graphql'
      117 | import updateDatasGql from '~/apollo/queries/updateData.graphql'

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (pages/data.vue:114:1)
      at Object.<anonymous> (test/page/DataPage.spec.js:2:1)

対応

• jest-transform-graphqlを導入し、jest.config.jsのtransformに設定を追記することで、マウントしたVueファイルでGraphQLクエリのimportが機能するようになる

yarn add -D jest-transform-graphql

jest.config.js

module.exports = {
  setupFiles: ['<rootDir>/test/jest.setup.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1'
  },
  transform: {
    '\\.(gql|graphql)$': 'jest-transform-graphql',  // add transform module
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  moduleFileExtensions: ['js', 'json', 'vue']
}

参考

• SyntaxError: Unexpected token export · Issue #2134 · wallabyjs/public