0

解决了

啊啊啊啊

原来graphql片段不能很好地与msw一起使用。亲爱的上帝开枪打死我，那是 5 小时我不会回来的。

我有一个带有 msw 的模拟 graphql 服务器设置，下面的基本设置是我导入到我的测试文件中的：

// 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();
    });
}

我可以确认我的查询确实被拦截了，而且确实返回了

    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,
                })
            );
        }
    }),

当我得到这个输出

  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)

未定义的输出是我试图 console.debug(data) 的地方，当在调试器中时，我还可以看到数据永远不会被解析！

这是测试

    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();
    });

我确实使用await screen...而且我已经确认它与路由器无关，因为处理程序已为路由正确触发，并且 console.debug 是从我尝试安装的组件中触发的。

我该如何开始调试呢？！为什么数据不解析？

4

0 回答 0