用Auth0和Cypress拦截Auth0 getSession

Question

我正在用SSR构建NextJS应用程序。我编写了调用supabase的getServerSideProps函数。在进行调用之前，我试图通过从getSession包调用@auth0/nextjs-auth0函数来获取用户会话。

我试图在handlers.ts文件中模拟它：

import { rest } from 'msw';

export const handlers = [
  // this is the endpoint called by getSession
  rest.get('/api/auth/session', (_req, res, ctx) => {
    return res(ctx.json(USER_DATA));
  }),

  rest.get('https://<supabase-id>.supabase.co/rest/v1/something', (_req, res, ctx) => {
    return res(ctx.json(SOMETHING));
  }),
];

我的模拟文件：requestMocks/index.ts

export const initMockServer = async () => {
  const { server } = await import('./server');
  server.listen();

  return server;
};

export const initMockBrowser = async () => {
  const { worker } = await import('./browser');
  worker.start();

  return worker;
};

export const initMocks = async () => {
  if (typeof window === 'undefined') {
    console.log('<<<< setup server');
    return initMockServer();
  }

  console.log('<<<< setup browser');
  return initMockBrowser();
};

initMocks();

最后，我在_app.tsx文件中调用它：

if (process.env.NEXT_PUBLIC_API_MOCKING === 'true') {
  require('../requestMocks');
}

不幸的是，它确实对我有用。在我的页面组件中的getServerSideProps函数中没有用户会话数据：

import { getSession } from '@auth0/nextjs-auth0';

export const getServerSideProps = async ({ req, res }: { req: NextApiRequest; res: NextApiResponse }) => {
  const session = getSession(req, res);

  if (!session?.user.accessToken) {
    // I'm constantly falling here
    console.log('no.session');
    return { props: { something: [] } };
  }

  // DO something else
};

任何关于如何让它在柏树测试中工作的建议都是很棒的。

我希望能够用getServerSideProps库模拟在MSW.js函数中提出的请求。

Answer 1

我终于成功了。看来我没必要嘲笑任何电话。我需要复制我的用户appSession cookie并将其保存在cypress/fixtures/appSessionCookie.json文件中：

{
  "appSession": "<cookie-value>"
}

然后将其用于测试，如下所示：

  before(() => {
    cy.fixture('appSessionCookie').then((cookie) => {
      cy.setCookie('appSession', cookie.appSession);
    });
  });

这使得用户自动使用Auth0登录。