使用依赖于 tRCP 的测试库测试 Next.js 中的组件答案

【问题标题】：Testing a component in Next.js with testing-library that relies on tRCP使用依赖于 tRCP 的测试库测试 Next.js 中的组件
【发布时间】：2022-08-10 13:35:17
【问题描述】：

我正在试验 tRCP，并认真按照此处官方文档中描述的 Next.js 项目的设置进行操作：https://trpc.io/docs/nextjs

但是我注意到一个依赖于 tRPC 的简单组件，例如

export const Sample = () => {
  const { data } = trpc.useQuery([\'hello\', { text: \'User\' }]);
  if (data === undefined) {
    return <div>Loading...</div>;
  }
  return <div>{data.greeting}</div>;
};

由于以下琐碎的测试，无法正确测试

describe(\'Sample\', () => {
  it(\'should render successfully\', () => {
    const { baseElement } = render(<Sample />);
    expect(baseElement).toBeTruthy();
  });
});

因为没有提供程序设置，例如用于应用程序本身的withTRCP HOC 设置。因此，测试失败，声称 client（可能是 trcpClient，与 queryClient 不同）是未定义的。

我想知道如何正确设置测试，在这种情况下提供正确的客户端以及模拟查询，因为在调用测试时我没有运行相应的服务器端代码。

标签： reactjs next.js react-testing-library trpc.io

【解决方案1】：

由于您对 trpc 客户端实现未定义，因此您可以尝试监视查询调用。

import trpc from 'utils/trpc'; // This is the client implementation

describe('Sample', () => {
  it('should render successfully', () => {
    jest.spyOn(trpc, 'useQuery')
        .mockReturnValue({ greeting: "Greeting" });

    const { baseElement } = render(<Sample />);
    expect(baseElement).toBeTruthy();
  });
});

突变也可以做到这一点，但您需要为 mutate 属性的 useMutation 响应提供模拟实现。

【讨论】：