How to use imported graphql files in jest unit testing?

Question

I'm trying to run unit tests with jest but I'm getting the following error:

  ● 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

I have installed

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

It's suppose to transform GQL files.

My package.json (jest part)

"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"
    ]
}

Test file

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();
    });
});

index.vue file (stripped out unimportant things)

<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>

This is my first time doing unit testing, so I have zero knowledge on this subject.

Answer 1

I had the same problem with Nuxt. I installed this dependence: https://www.npmjs.com/package/jest-transform-graphql, and add this: '\.(gql|graphql)$': 'jest-transform-graphql' in jest.config.js file, it works for me

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