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

我试图用jest运行单元测试，但出现以下错误：

  ● Test suite failed to run

/apollo/queries/articles.gql:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){query articles($orderBy: [OrderByClause!], $stripTags: Boolean, $maxCharacters: Int) {
                                                                                               ^^^^^^^^

SyntaxError: Unexpected identifier

index.vue文件（去掉不重要的内容）

从“Vue”导入Vue；
从“~/apollo/querys/articles.gql”导入ArticlesQuery；
导出默认Vue.extend({
名称：“主页”，
阿波罗：{
文章：{
查询：物品查询，
变量（）{
返回{
orderBy:[{字段：“id”，顺序：“DESC”}]，
是的，
最大字符数：150
};
},
预回迁：真
}
}
});

这是我第一次做单元测试，所以我对这个问题一无所知。

看起来不错。也许

“\\（gql | graphql）$”：“@jagi/jest-transform-graphql”

需要是

“*\（gql | graphql）$”：“jest-transform-graphql”

？

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

import Index from "../index";

const factory = () =>
    shallowMount(Index, {
        propsData: {
            label: "click me!"
        }
    });

describe("Index", () => {
    test("mounts properly", () => {
        const wrapper = factory();
        expect(wrapper.isVueInstance()).toBeTruthy();
    });

    test("renders properly", () => {
        const wrapper = factory();
        expect(wrapper.html()).toMatchSnapshot();
    });
});

<template>
    <div></div>
</template>

<script lang="ts">
import Vue from "vue";
import ArticlesQuery from "~/apollo/queries/articles.gql";

export default Vue.extend({
    name: "Homepage",
    apollo: {
        articles: {
            query: ArticlesQuery,
            variables() {
                return {
                    orderBy: [{ field: "id", order: "DESC" }],
                    stripTags: true,
                    maxCharacters: 150
                };
            },

            prefetch: true
        }
    }
});
</script>