# 测试

要为 vue-apollo 查询和变更创建单元测试,你可以选择简单测试或使用模拟 GraqhQL schema 进行测试。所有的示例都使用了 Jest (opens new window)vue-test-utils (opens new window)

# 简单测试

对于简单的查询测试,你只需要设置组件数据并检查组件如何使用 Jest 快照功能进行渲染。比如说,如果你有一个展示所有 Vue 英雄的查询,你可以添加一个包含单个英雄的模拟数组:

test('displayed heroes correctly with query data', () => {
  const wrapper = shallowMount(App, { localVue })
  wrapper.setData({
    allHeroes: [
      {
        id: 'some-id',
        name: 'Evan You',
        image: 'https://pbs.twimg.com/profile_images/888432310504370176/mhoGA4uj_400x400.jpg',
        twitter: 'youyuxi',
        github: 'yyx990803',
      },
    ],
  })
  expect(wrapper.element).toMatchSnapshot()
})

对于简单的变更测试,你需要检查组件中是否调用了 $apollomutate 方法。接下来的示例在 addHero 方法中调用了变更:

test('called Apollo mutation in addHero() method', () => {
  const mutate = jest.fn()
  const wrapper = mount(App, {
    localVue,
    mocks: {
      $apollo: {
        mutate,
      },
    },
  })
  wrapper.vm.addHero()
  expect(mutate).toBeCalled()
})

# 使用模拟 $apollo 测试加载状态

如果需要测试组件在 GraphQL API 返回的结果仍在加载时会如何渲染,你可以在相应的 Apollo 查询中模拟加载的状态:

test('renders correctly when loading allHeroes', () => {
  const wrapper = mount(App, {
    mocks: {
      $apollo: {
        queries: {
          allHeroes: {
            loading: true,
          },
        },
      },
    },
  })

  expect(wrapper.element).toMatchSnapshot();
})

# 使用模拟 GraqhQL schema 进行测试

你还可以使用 模拟 GraphQL schema (opens new window) 进行更深入、更复杂的测试。这种方法并不包含 Apollo,但能够让你检查某些查询是否能够在给定的 schema 中正确执行。

为此,首先需要建立 schema:

const sourceSchema = `
  type VueHero {
    id: ID!
    name: String!
    image: String
    github: String
    twitter: String
  }

  input HeroInput {
    name: String!
    image: String
    github: String
    twitter: String
  }


  type Query {
    allHeroes: [VueHero]
  }

  type Mutation {
    addHero(hero: HeroInput!): VueHero!
    deleteHero(name: String!): Boolean
  } 
`

下一步是使用 graphql-tools 方法创建可执行的 schema:

import { makeExecutableSchema } from 'graphql-tools'
...
const schema = makeExecutableSchema({
  typeDefs: sourceSchema,
})

之后你需要向 schema 添加模拟函数:

import { addMockFunctionsToSchema } from 'graphql-tools'
...
addMockFunctionsToSchema({
  schema,
})

指定 GraphQL 查询字符串:

const query = `
  query {
    allHeroes {
      id
      name
      twitter
      github
      image
    }
  }
`

在测试用例中调用 GraphQL 查询,保存响应到组件数据中,然后检查渲染完成的组件是否与快照匹配:

graphql(schema, query).then(result => {
  wrapper.setData(result.data)
  expect(wrapper.element).toMatchSnapshot()
})

在这个用例中,所有字符串字段将等于 Hello World 且所有数值都将为负数。如果你想要获得更贴近现实的响应,则应当为某些查询指定解析器:

const resolvers = {
  Query: {
    allHeroes: () => [
      {
        id: '-pBE1JAyz',
        name: 'Evan You',
        image:
          'https://pbs.twimg.com/profile_images/888432310504370176/mhoGA4uj_400x400.jpg',
        twitter: 'youyuxi',
        github: 'yyx990803',
      },
    ],
  },
}

然后你需要将解析器添加到可执行 schema,并在添加模拟函数时将 preserveResolvers 属性设置为 true:

const schema = makeExecutableSchema({
  typeDefs: sourceSchema,
  resolvers,
})

addMockFunctionsToSchema({
  schema,
  preserveResolvers: true,
})

你可以用同样的方法来测试变更。


上次更新时间: 2021/2/11 上午11:36:26