无法在 jest vue 中导入 graphql 查询文件答案

【问题标题】：cannot import graphql query files in jest vue无法在 jest vue 中导入 graphql 查询文件
【发布时间】：2021-03-15 21:14:11
【问题描述】：

我将单元测试添加到我的 Nuxt/Vue 项目中，并且我正在使用 Jest 进行单元测试，我正在使用 Apollo 客户端从服务器端获取数据，并且我在将 .gql 文件导入测试文件时遇到了问题。

这里是查询文件names.gql

{
 names {
  created_at
  id
  name
  published_at
  updated_at
 }
}

我正在像这样在 Vue 组件中导入查询

import namesQuery from "@/queries/names";

测试文件：

import { mount } from '@vue/test-utils';

import Names from '@/components/Names';

describe('Names', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(Names)
    expect(wrapper.vm).toBeTruthy()
  })
})

当我运行测试时，它会说：

SyntaxError: Unexpected token '{'

请指教。

【问题讨论】：

标签： vue.js jestjs nuxt.js apollo-client

【解决方案1】：

根据 graphql-tag 文档，您需要使用 jest-transform-graphql 来处理导入。

将此添加到您的 jest 配置文件中：

"transform": {
  "\\.(gql|graphql)$": "jest-transform-graphql",
}

然后让派对开始?

【讨论】：