高英健
152 lines
3.6 KiB
Markdown
152 lines
3.6 KiB
Markdown
# 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](https://jestjs.io/) and [vue-test-utils](https://github.com/vuejs/vue-test-utils)
|
|
|
|
## 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:
|
|
|
|
```js
|
|
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:
|
|
|
|
```js
|
|
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()
|
|
})
|
|
```
|
|
|
|
## Tests with mocked GraqhQL schema
|
|
|
|
You can also make some more deep and complicated tests with [mocked GraphQL schema](https://www.apollographql.com/docs/graphql-tools/mocking.html). 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:
|
|
|
|
```js
|
|
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:
|
|
|
|
```js
|
|
import { makeExecutableSchema } from 'graphql-tools'
|
|
...
|
|
const schema = makeExecutableSchema({
|
|
typeDefs: sourceSchema,
|
|
})
|
|
```
|
|
After this you need to add mock functions to schema:
|
|
|
|
```js
|
|
import { addMockFunctionsToSchema } from 'graphql-tools'
|
|
...
|
|
addMockFunctionsToSchema({
|
|
schema,
|
|
})
|
|
```
|
|
Specify the GraphQL query string:
|
|
|
|
```js
|
|
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:
|
|
|
|
```js
|
|
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:
|
|
|
|
```js
|
|
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:
|
|
|
|
```js
|
|
const schema = makeExecutableSchema({
|
|
typeDefs: sourceSchema,
|
|
resolvers,
|
|
})
|
|
|
|
addMockFunctionsToSchema({
|
|
schema,
|
|
preserveResolvers: true,
|
|
})
|
|
```
|
|
You can test mutations in the same way.
|
|
|
|
--- |