graphql - 我怎样才能 spyOn `useMutation` 以便我可以看到正在传递的值是什么？

Question

我不想创建大规模的 E2E 测试，而是想验证 useMutation 从组件接收的内容。在我的组件“发布”之前有很多业务逻辑，我想测试 GraphQL 突变函数是否正在接收数据的形状。

在这种情况下手动模拟查询没有提供值(value)，因为它跳过了我想要跟踪的业务逻辑。现在让查询返回完整数据和响应没有任何值(value)，因为在成功返回数据后我的组件将卸载并且 URL 将更改。

理想情况下，我们只是在调用 useMutation Hook 时停止测试。

我希望做这样的事情:

const mutationSpy = jest.spyOn(graphQL, 'useMutation');
...
expect(mutationSpy).toHaveBeenCalledWith(myDataShape);

Answer 1

跟踪是否已调用突变的最佳方法是使用来自 @apollo/react-testing (react-native) 或 @apollo/client 的 MockedProvider ( react )为您的模拟响应提供回调函数，该函数更改测试范围中的变量，以便在测试运行后可以检查它。像这样。

这是文档:

https://www.apollographql.com/docs/react/development-testing/testing/#testing-mutation-components

测试.js

let createMutationCalled = false

const mocks = [
    {
        request,
        result: () => {
            createMutationCalled = true
            return { data }
        }
    }
];

describe('test', () => {
    test('should call createTicket mutation', async () => {
        const { getByTestId } = render(
            <MockedProvider mocks={mocks}>
              <SelfReportPage />
            </MockedProvider>
        )

        let input = getByTestId('sr-description')
        let submit = getByTestId('sr-submit')
        fireEvent.changeText(input, 'Test text.')
        fireEvent.press(submit)

        await new Promise(r => setTimeout(r, 0));
    
        expect(createMutationCalled).toBe(true)
    })
})