MSW Testing with GraphQL API and how to?

[SamDev9228]

I was wondering how to test my GraphQL API in my vue application. I'm currently using the JEST framework and was wondering what should I expect and how to make the mocked graphQL requests? Do I just mount my component and pass in an Apollo mock etc.?
There is not many examples of setting up a test in a vue application using the GraphQL side of things so was wondering if anyone can point me in the right direction here?

Very much appreciated :)

[kettanaito]

Hey, @SamDev9228.

Please follow the Mocking GraphQL API part of our tutorial to learn more about how to do it with MSW. In nutshell, mocking GraphQL API is very similar to mocking REST API:

1. Define request handlers (in this case using the graphql handler).
2. Define mocked responses.
3. Instantiate the setupServer in your tests.

You may also find this React GraphQL (Apollo) usage example useful. I trust you to see through React-specific code in the test, as it has nothing to do with the testing setup. You can apply the same testing setup for your Vue application.

[SamDev9228]

Hi @kettanaito,
Thank you for the quick response I have already followed the guide and set up request handlers and a mocked response i.e. in the handler.js and when I run the application it shows in the console using MWS however in the tests what should my structure be for a test. Should it be something like create a mock in the test for an Apollo query and expect the response data has something in it?
Thanks

[kettanaito]

Please see the linked React GraphQL usage example, it has all the necessary Jest setup done and explained in the README. In short, your testing setup has no special points for GraphQL—no mocked providers, no mocked state. You can start simple and evolve your setup according to your needs. That example repository illustrates a good starting point.

[SamDev9228]

Heya,

Thank you I did the suggested however I am getting the following error:

[MSW] Warning: captured a request without a matching request handler:
    
      • GET http://localhost:3000/graphql

on

  it("should get all product details", async () => {
    const res = await fetch("http://localhost:3000/graphql");
    const json = await res.json();

and in my handlers I have a Gql query that returns data etc?

[kettanaito]

As the warning suggests, you don't have the graphql.query handler to match that request. Once you do, the warning will be gone and the query will be captured and mocked. Examine your handlers closely and see what's going wrong.

[SamDev9228]

Sorry I have a query already for the said request i.e. getProductDetails in the handlers.js which returns some data is my fetch incorrect? as its just going to the graphql endpoint which will know of that query name and should get the data? when I do a POST i.e.

it("should get all product details", async () => {
    const res = await fetch('http://localhost:3000/graphql', {
      method: 'POST',
      headers: {
        accept: '*/*',
        'content-type': 'application/json',
      },
      body:
          '{"operationName":"GetProductDetails" etc...
    })
    const json = await res.json()

    expect(json).toContain({ productName: "Test ProductZ"});
  });

the error is removed?

[kettanaito]

import { setupServer } from 'msw/node'
import { graphql } from 'msw'

const server = setupServer(
  graphql.query('GetProductDetails', (req, res, ctx) => {
    return res(ctx.data({
      productName: 'Test Product'
    }))
  })
)

beforeAll(() => server.listen())
afterAll(() => server.close())

it('should get all product details', ...)

This setup should be what you need. Have you tried this?

[SamDev9228]

Turns out I got just abit confused with graphQL and the query being called a get but when posting to the graphQL endpoint it is deemed as a "POST" after changing my fetch to method: "POST" it is now appearing as expected.

Thank you :)

[kettanaito]

Glad you've spotted that. Good work.