0

我试图弄清楚在使用 React 测试库测试下一个 js 应用程序时如何模拟对 auth0 身份验证后端的调用。我正在使用auth0/nextjs-auth0来处理身份验证。我的意图是使用MSW为所有 API 调用提供模拟。

我在 nextjs 文档next.js/examples/with-msw中按照这个示例为客户端和服务器 API 调用设置了模拟。auth0/nextjs-auth0包（/api/auth/login、/api/auth/callback和）生成/api/auth/logout的所有 API 调用/api/auth/me都会收到模拟响应。

/api/auth/me下面显示了一个模拟响应

import { rest } from 'msw';

export const handlers = [
  // /api/auth/me
  rest.get(/.*\/api\/auth\/me$/, (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({
        user: { name: 'test', email: 'email@domain.com' },
      }),
    );
  }),
];

当我在浏览器中运行应用程序时，示例设置工作正常。但是当我运行我的测试时，模拟并没有被拾起。

示例测试块如下所示

import React from 'react';
import {render , screen } from '@testing-library/react';

import Home from 'pages/index';
import App from 'pages/_app';

describe('Home', () => {
  it('should render the loading screen', async () => {
    render(<App Component={Home} />);
    const loader = screen.getByTestId('loading-screen');
    expect(loader).toBeInTheDocument();
  });
});

App我像这样在组件内渲染页面，<App Component={Home} />以便我可以访问包装页面的各种上下文。

我花了大约 2 天的时间尝试各种配置，但我仍然不知道我可能做错了什么。任何和每一个帮助表示赞赏。

4

0 回答 0