Migrate tests for v4

Author: frederikprijck

Sample-01/tests/app/csr.test.jsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { UserProvider } from '@auth0/nextjs-auth0/client';
+import { Auth0Provider } from '@auth0/nextjs-auth0';
 
 import CSRPage from '../../app/csr/page';
 
 describe('csr', () => {
   it('should render without crashing', async () => {
     render(
-      <UserProvider user={{}}>
+      <Auth0Provider user={{}}>
         <CSRPage />
-      </UserProvider>
+      </Auth0Provider>
     );
 
     expect(screen.getByTestId('csr')).toBeInTheDocument();

Sample-01/tests/app/external.test.jsx

@@ -2,12 +2,12 @@ import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 
 import _External from '../../app/external/page';
-import { UserProvider } from '@auth0/nextjs-auth0/client';
+import { Auth0Provider } from '@auth0/nextjs-auth0';
 
 const External = () => (
-  <UserProvider user={{}}>
+  <Auth0Provider user={{}}>
     <_External />
-  </UserProvider>
+  </Auth0Provider>
 );
 
 describe('index', () => {

Sample-01/tests/app/profile.test.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 
-import { withUserProvider, mockUser } from '../fixtures';
+import { withAuth0Provider, mockUser } from '../fixtures';
 import Profile from '../../app/profile/page';
 
 describe('profile', () => {
   it('should render without crashing', async () => {
-    render(<Profile />, { wrapper: withUserProvider({ user: mockUser }) });
+    render(<Profile />, { wrapper: withAuth0Provider({ user: mockUser }) });
 
     expect(screen.queryByTestId('loading')).not.toBeInTheDocument();
     expect(screen.getByTestId('profile')).toBeInTheDocument();
@@ -16,14 +16,14 @@ describe('profile', () => {
   });
 
   it('should render a spinner when the user is loading', async () => {
-    render(<Profile />, { wrapper: withUserProvider({ user: undefined }) });
+    render(<Profile />, { wrapper: withAuth0Provider({ user: undefined }) });
 
     waitFor(() => screen.getByTestId('loading').toBeInTheDocument());
     waitFor(() => screen.queryByTestId('profile').not.toBeInTheDocument());
   });
 
   it('should render the user profile', async () => {
-    render(<Profile />, { wrapper: withUserProvider({ user: mockUser }) });
+    render(<Profile />, { wrapper: withAuth0Provider({ user: mockUser }) });
 
     waitFor(() => screen.queryByTestId('loading').not.toBeInTheDocument());
     Object.keys(mockUser).forEach(key => {

Sample-01/tests/components/Layout.test.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 
-import { withUserProvider } from '../fixtures';
+import { withAuth0Provider } from '../fixtures';
 import Layout from '../../components/Layout';
 
 describe('Layout', () => {
   it('should render without crashing', async () => {
-    render(<Layout>Text</Layout>, { wrapper: withUserProvider({ user: undefined }) });
+    render(<Layout>Text</Layout>, { wrapper: withAuth0Provider({ user: undefined }) });
 
     await waitFor(() => expect(screen.getByTestId('layout')).toBeInTheDocument());
     expect(screen.getByTestId('navbar')).toBeInTheDocument();

Sample-01/tests/components/NavBar.test.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 
-import { withUserProvider, mockUser } from '../fixtures';
+import { withAuth0Provider, mockUser } from '../fixtures';
 import NavBar from '../../components/NavBar';
 
 describe('NavBar', () => {
   it('should render in logged out state', async () => {
-    render(<NavBar />, { wrapper: withUserProvider({ user: undefined }) });
+    render(<NavBar />, { wrapper: withAuth0Provider({ user: undefined }) });
 
     expect(screen.getByTestId('navbar')).toBeInTheDocument();
     expect(screen.getByTestId('navbar-toggle')).toBeInTheDocument();
@@ -20,7 +20,7 @@ describe('NavBar', () => {
   });
 
   it('should render in logged in state', async () => {
-    render(<NavBar />, { wrapper: withUserProvider({ user: mockUser }) });
+    render(<NavBar />, { wrapper: withAuth0Provider({ user: mockUser }) });
 
     expect(screen.getByTestId('navbar-items').children).toHaveLength(4);
     expect(screen.getByTestId('navbar-home')).toBeInTheDocument();

Sample-01/tests/fixtures.jsx

@@ -1,4 +1,4 @@
-import { UserProvider } from '@auth0/nextjs-auth0/client';
+import { Auth0Provider } from '@auth0/nextjs-auth0';
 
 export const mockUser = {
   email: 'foo@example.com',
@@ -10,6 +10,6 @@ export const mockUser = {
   updated_at: null
 };
 
-export const withUserProvider = ({ user, profileUrl } = {}) => {
-  return props => <UserProvider {...props} user={user} profileUrl={profileUrl} />;
+export const withAuth0Provider = ({ user, profileUrl } = {}) => {
+  return props => <Auth0Provider {...props} user={user} profileUrl={profileUrl} />;
 };

Sample-01/tests/setup.js

@@ -14,15 +14,15 @@ vi.mock('next/navigation', () => ({
   usePathname: () => ''
 }));
 
-vi.mock('@auth0/nextjs-auth0', () => {
+vi.mock('./../lib/auth0', () => {
   return {
-    getSession: () => ({
-      user: {
-        sub: 'bob'
-      }
-    }),
-    getAccessToken: () => 'access_token',
-    withApiAuthRequired: handler => handler,
-    withPageAuthRequired: page => () => page()
+    auth0: {
+      getSession: () => ({
+        user: {
+          sub: 'bob'
+        }
+      }),
+      getAccessToken: () => 'access_token',
+    }
   };
-});
+});