【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']
}
参考
Author And Source
この問題について(【Jest】GraphQLで定義したクエリがimportできない場合の対処法), 我々は、より多くの情報をここで見つけました https://qiita.com/nakano-shingo/items/817a2541dca5829ecae5著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .