时间戳

首页 > 解决方案 > 我怎样才能 spyOn `useMutation` 以便我可以看到传递的值是什么？

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

问题描述

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

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

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

我希望做类似的事情：

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

标签： graphqljestjs

解决方案

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

这是文档：

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

推荐阅读