单元测试错误 - Clerk 和 Vitest

Question

我正在做一个工作项目，我们对单元测试有严格的要求。我决定使用 Vitest，我们使用 Clerk 进行身份验证。我遇到了两个不同的问题，我不确定哪条路径更容易解决。当我使用 @testing-library/react 中的 render 方法运行测试（迄今为止的一个）时，我收到一条错误“AuthContext not found”。

当我这样做时，我收到一个新错误，指出 ClerkProvider.js 2 似乎是一个 ES 模块，但在 CommonJS 包中提供。您可能想在 package.json 中的包

@clerk/nextjs" asking them to ship the file in .mjs extension or add "type": "module

中创建一个问题。

我不确定如何继续，因为我目前与 Clerk 遇到的唯一问题是他们对如何在身份验证上下文中设置任何测试的指导为零。希望有人遇到过这个问题并提供解决方案。

对于 AuthContext 未找到问题，我使用了我们在不同应用程序中使用的方法。我制作了一个渲染包装器，将所有子项包装在 ClerkProvider 中。

当我这样做时，我收到一个新错误，指出 ClerkProvider.js 2 似乎是一个 ES 模块，但在 CommonJS 包中提供。您可能想在 package.json 中的包

@clerk/nextjs" asking them to ship the file in .mjs extension or add "type": "module

中创建一个问题。

我不确定如何继续，因为我目前与 Clerk 遇到的唯一问题是他们对如何在身份验证上下文中设置任何测试的指导为零。希望有人遇到过这个问题并提供解决方案。

Answer 1

解决此问题需要两件事：

1. require 语法解决了模块问题
2. 我导入了 AppRouterContext 提供程序来解决无法在应用程序路由器之外工作的后续错误。

const AllTheProviders: FC<{ children: ReactNode }> = ({ children }) => (
    <AppRouterContext.Provider value={{} as AppRouterInstance}>
        <React.StrictMode>
            <ClerkProvider>
                <TRPCReactProvider>
                    {children}
                </TRPCReactProvider>
            </ClerkProvider>
        </React.StrictMode>
    </AppRouterContext.Provider>
);

const customRender = (
    ui: ReactElement,
    options?: Omit<RenderOptions, "wrapper">,
) => render(ui, { wrapper: AllTheProviders, ...options });

export * from "@testing-library/react";
export { customRender as render };