如何在 jest 单元测试中使用导入的 graphql 文件？

Question

我正在尝试使用 jest 运行单元测试，但出现以下错误：

\n\n

  \xe2\x97\x8f Test suite failed to run\n\n/apollo/queries/articles.gql:1\n({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){query articles($orderBy: [OrderByClause!], $stripTags: Boolean, $maxCharacters: Int) {\n                                                                                               ^^^^^^^^\n\nSyntaxError: Unexpected identifier\n

\n\n

我已经安装了

\n\n

\n

https://github.com/jagi/jest-transform-graphql

\n

\n\n

它应该转换 GQL 文件。

\n\n

我的 package.json （玩笑部分）

\n\n

"jest": {\n    "moduleFileExtensions": [\n        "js",\n        "json",\n        "vue",\n        "gql"\n    ],\n    "watchman": false,\n    "moduleNameMapper": {\n        "^~/(.*)$": "<rootDir>/$1",\n        "^~~/(.*)$": "<rootDir>/$1"\n    },\n    "transform": {\n        "^.+\\\\.js$": "<rootDir>/node_modules/babel-jest",\n        ".*\\\\.(vue)$": "<rootDir>/node_modules/vue-jest",\n        "\\\\.(gql|graphql)$": "@jagi/jest-transform-graphql"\n    },\n    "snapshotSerializers": [\n        "<rootDir>/node_modules/jest-serializer-vue"\n    ],\n    "collectCoverage": true,\n    "collectCoverageFrom": [\n        "<rootDir>/components/**/*.vue",\n        "<rootDir>/pages/*.vue"\n    ]\n}\n

\n\n

测试文件

\n\n

import Index from "../index";\n\nconst factory = () =>\n    shallowMount(Index, {\n        propsData: {\n            label: "click me!"\n        }\n    });\n\ndescribe("Index", () => {\n    test("mounts properly", () => {\n        const wrapper = factory();\n        expect(wrapper.isVueInstance()).toBeTruthy();\n    });\n\n    test("renders properly", () => {\n        const wrapper = factory();\n        expect(wrapper.html()).toMatchSnapshot();\n    });\n});\n

\n\n

index.vue 文件（去掉不重要的东西）

\n\n

<template>\n    <div></div>\n</template>\n\n<script lang="ts">\nimport Vue from "vue";\nimport ArticlesQuery from "~/apollo/queries/articles.gql";\n\nexport default Vue.extend({\n    name: "Homepage",\n    apollo: {\n        articles: {\n            query: ArticlesQuery,\n            variables() {\n                return {\n                    orderBy: [{ field: "id", order: "DESC" }],\n                    stripTags: true,\n                    maxCharacters: 150\n                };\n            },\n\n            prefetch: true\n        }\n    }\n});\n</script>\n

\n\n

这是我第一次做单元测试，所以我对这方面的知识为零。

\n

Answer 1

我在 Nuxt 上也遇到了同样的问题。我安装了这个依赖项：https://www.npmjs.com/package/jest-transform-graphql ，并在 jest.config 中添加：'\.(gql|graphql)$': 'jest-transform-graphql' 。 js 文件，它对我有用

  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest',
    '\\.(gql|graphql)$': 'jest-transform-graphql'
  },