# Testing
To create unit tests for vue-apollo
queries and mutations you can choose either a simple testing or tests with mocked GraqhQL schema. All examples here use Jest (opens new window) and vue-test-utils (opens new window)
# Simple tests
For simple query testing you can just set the components data and check how component renders with a Jest snapshot feature. Say, if you have a query to display all Vue heroes, you can add a mocked array with a single hero:
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()
})
For simple mutation test you need to check if $apollo
method mutate
is called in your component. In the next example mutation was called in the addHero
method:
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()
})
# Testing loading state with mocking $apollo
If you want to test how your component renders when results from the GraphQL API are still loading, you can also mock a loading state in respective Apollo queries:
test('renders correctly when loading allHeroes', () => {
const wrapper = mount(App, {
mocks: {
$apollo: {
queries: {
allHeroes: {
loading: true,
},
},
},
},
})
expect(wrapper.element).toMatchSnapshot();
})
# Tests with mocked GraqhQL schema
You can also make some more deep and complicated tests with mocked GraphQL schema (opens new window). This method doesn't include Apollo, but lets you check if certain query will be executed correctly with given schema.
To do so, first you need the 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
}
`
Next step is to create an executable schema with graphql-tools
method:
import { makeExecutableSchema } from 'graphql-tools'
...
const schema = makeExecutableSchema({
typeDefs: sourceSchema,
})
After this you need to add mock functions to schema:
import { addMockFunctionsToSchema } from 'graphql-tools'
...
addMockFunctionsToSchema({
schema,
})
Specify the GraphQL query string:
const query = `
query {
allHeroes {
id
name
twitter
github
image
}
}
`
Call GraphQL query in the test case, save response to component data and then check if rendered component matches a snapshot:
graphql(schema, query).then(result => {
wrapper.setData(result.data)
expect(wrapper.element).toMatchSnapshot()
})
In this case all string fields will be equal to Hello World
and all number values will be negative. If you want to have more real-life response, you should specify resolvers for certain queries:
const resolvers = {
Query: {
allHeroes: () => [
{
id: '-pBE1JAyz',
name: 'Evan You',
image:
'https://pbs.twimg.com/profile_images/888432310504370176/mhoGA4uj_400x400.jpg',
twitter: 'youyuxi',
github: 'yyx990803',
},
],
},
}
Then you need to add resolvers to executable schema and set preserveResolvers
property to true when adding mock functions:
const schema = makeExecutableSchema({
typeDefs: sourceSchema,
resolvers,
})
addMockFunctionsToSchema({
schema,
preserveResolvers: true,
})
You can test mutations in the same way.