next.js 使用MSW.js和Cypress拦截Auth0 getSession

tyky79it  于 2022-11-29  发布在  其他
关注(0)|答案(1)|浏览(182)

我正在用SSR构建NextJS应用程序。我已经编写了调用supabase的getServerSideProps函数。在进行调用之前,我试图通过从@auth0/nextjs-auth0包中调用getSession函数来获得用户会话。
我试着在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
};

任何关于如何使它在Cypress测试中工作的建议都会很棒。
我希望我能够使用MSW.js库模拟getServerSideProps函数中发出的请求。

dtcbnfnu

dtcbnfnu1#

我终于做到了。看起来我不需要模拟任何调用。我需要复制我的用户appSession cookie并将其保存在cypress/fixtures/appSessionCookie.json文件中:

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

然后在测试中使用,如下所示:

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

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

相关问题