SOLVED

ARRGGHHH

Turns out graphql fragments don't play well with msw. Dear god shoot me, that's 5h I won't get back.

I have a mock graphql server setup with msw, with the basic setup below that I import into my test file:

// Setup requests interception using the given handlers.
export const server = setupServer(...handlers);

export function setup() {
    beforeAll(() => {
        // Enable the mocking in tests.
        server.listen();
    });

    beforeEach(() => {
        // Ensure Apollo cache is cleared between tests.
        // https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.clearStore
        return client.clearStore();
    });

    afterEach(() => {
        // Reset any runtime handlers tests may use.
        server.resetHandlers();
    });

    afterAll(() => {
        // Clean up once the tests are done.
        server.close();
    });
}

I can confirm that my query is indeed being intercepted, and indeed the return too

    graphql.query('getAgenda', (req, res, ctx) => {
        console.debug('in handlers')
        const { id } = req.variables;

        if (id === '1') {
            console.debug('returning res')
            return res(
                ctx.data({
                    agenda,
                })
            );
        }
    }),

As I get this output

  console.debug
    undefined

      at Component (src/pages/Agenda/ViewAgenda.js:70:10)

  console.debug
    undefined

      at Component (src/pages/Agenda/ViewAgenda.js:71:10)

  console.debug
    in handlers

      at resolver (src/__tests__/__mocks__/handlers.js:8:11)

  console.debug
    returning res

      at resolver (src/__tests__/__mocks__/handlers.js:12:11)

  console.debug
    undefined

      at Component (src/pages/Agenda/ViewAgenda.js:70:10)

  console.debug
    undefined

      at Component (src/pages/Agenda/ViewAgenda.js:71:10)

  console.debug
    in handlers

      at resolver (src/__tests__/__mocks__/handlers.js:8:11)

  console.debug
    returning res

      at resolver (src/__tests__/__mocks__/handlers.js:12:11)

  console.debug
    undefined

      at Component (src/pages/Agenda/ViewAgenda.js:70:10)

  console.debug
    undefined

      at Component (src/pages/Agenda/ViewAgenda.js:71:10)

  console.debug
    in handlers

      at resolver (src/__tests__/__mocks__/handlers.js:8:11)

  console.debug
    returning res

      at resolver (src/__tests__/__mocks__/handlers.js:12:11)

  console.debug
    undefined

      at Component (src/pages/Agenda/ViewAgenda.js:70:10)

  console.debug
    undefined

      at Component (src/pages/Agenda/ViewAgenda.js:71:10)

  console.debug
    in handlers

      at resolver (src/__tests__/__mocks__/handlers.js:8:11)

  console.debug
    returning res

      at resolver (src/__tests__/__mocks__/handlers.js:12:11)

The undefined output is where I'm trying to console.debug(data), and when in the debugger I can also see that data is never resolved!

Here's the test

    it('matches its returned data snapshot', async () => {
        const history = createMemoryHistory();
        history.push('/agenda/1');
        const { asFragment } = render(<ViewAgenda />, { wrapperProps: { history }});


        await screen.findByText('Planerat mötesdatum');
        expect(asFragment(<ViewAgenda />)).toMatchSnapshot();
    });

I do use the await screen... also I've confirmed it's not something to do with the router, as the handler is fired correctly for the route and the console.debug is fired from within the component I'm trying to mount.

How do I go about starting to debug this?! Why isn't data resolving?

As per Cathal Mac Donnacha's request, the solution was to not use graphql fragments. The solution I used was to use string interpolation.