Reading time: 6 min read
Efficiently Mocking Sitecore Layout Data and NextAuth Sessions in Storybook
Streamlining Sitecore and NextAuth mocking in Storybook
Start typing to search...
Developing React components with Next.js and Sitecore presents unique challenges, especially when your components depend on Sitecore's context data and authentication states managed by NextAuth. While Storybook offers a powerful environment for building and testing UI components in isolation, integrating it with Sitecore's layout data and NextAuth sessions in a Next.js project requires some extra setup.
In this guide, we'll show you how to efficiently mock Sitecore context data alongside NextAuth sessions within Storybook for a Next.js application. By mocking these contexts, you can simulate different Sitecore layouts and authentication states, allowing you to thoroughly test your components in isolation. This approach enhances your development workflow, making it more streamlined and efficient.
Components that rely on Sitecore's layout data or NextAuth's authentication states can't function properly without these contexts. When running your components in Storybook, the absence of these contexts can lead to errors or unexpected behavior. Mocking these contexts allows you to simulate different states and test your components thoroughly.
In Storybook, decorators are wrappers that allow you to add context providers or modify the rendering of your stories. They are essential for injecting providers like Context, Theme, or any custom context your components depend on.
Using decorators to wrap your stories ensures that every component has the necessary context to function. This approach:
We'll start by configuring global decorators in Storybook's preview.tsx file.
Note: If your preview file is currently named preview.ts, it's preferable
to rename it to preview.tsx since we'll be using JSX syntax. TypeScript requires the .tsx
extension to properly parse JSX code.
// .storybook/preview.tsx
import React from 'react';
import { AppProvider } from '../path/to/AppProvider';
import { SessionProvider } from 'next-auth/react';
import { SitecoreContext } from '@sitecore-jss/sitecore-jss-react';
const mockSession = {
// Your mock Session data here
};
const mockLayoutData = {
// Your mock Sitecore layout data here
};
const mockComponentFactory = (componentName) => {
// Return a mock component based on the componentName
};
export const decorators = [
(Story) => (
<AppProvider>
<SessionProvider session={mockSession}>
<SitecoreContext
layoutData={mockLayoutData}
componentFactory={mockComponentFactory}
>
<Story />
</SitecoreContext>
</SessionProvider>
</AppProvider>
),
];
mockSession: Mocks NextAuth session data to simulate
authenticated states.mockLayoutData and mockComponentFactory: Provides
mocked Sitecore layout data and a factory to render components.Components that rely on authentication states need to know whether a user is logged in or not. Mocking NextAuth sessions allows you to simulate both authenticated and unauthenticated states.
const mockSession = {
expires: '2023-01-01T00:00:00Z',
user: {
name: 'Storybook User',
email: '[email protected]',
},
};
You can override mockSession in individual stories to test different scenarios, such as:
Sitecore's layoutData represents the data that Sitecore provides to render components, including
placeholders and fields. The componentFactory is responsible for mapping component names to React
components.
const mockLayoutData = {
sitecore: {
context: {
pageEditing: false,
},
route: {
name: 'Home',
placeholders: {
'main-content': [
{
uid: '1',
componentName: 'Header',
fields: {
title: { value: 'Welcome to Storybook' },
},
},
// Add more mock components as needed
],
},
},
},
};
const mockComponentFactory = (componentName) => {
const components = {
Header: (props) => <h1>{props.fields.title.value}</h1>,
// Map other components as needed
};
return components[componentName] || (() => <div>Component not found</div>);
};
Different stories often require unique context data to accurately test various scenarios. Overriding mocks at the story level allows you to:
In this example, we’ll see how to override both the Sitecore context and the NextAuth
session at the story level for a component called MyComponent.
// src/components/MyComponent.stories.tsx
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { SitecoreContext } from '@sitecore-jss/sitecore-jss-react';
import { SessionProvider } from 'next-auth/react';
import MyComponent from './MyComponent';
export default {
title: 'Components/MyComponent',
component: MyComponent,
parameters: {
layout: 'fullscreen',
},
} as ComponentMeta<typeof MyComponent>;
// Define a basic template
const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
// Default story using global decorators in preview.tsx
export const Default = Template.bind({});
// Customized story with unique Sitecore context data and NextAuth session
const customMockLayoutData = {
sitecore: {
context: {
pageEditing: false,
language: 'en',
},
route: {
name: 'Custom Page',
displayName: 'Custom Page Display Name',
fields: {
pageTitle: { value: 'Custom Page Title' },
pageDescription: { value: 'Custom page description' },
},
placeholders: {},
},
},
};
const customMockSession = {
expires: '2024-12-31T00:00:00Z',
user: {
name: 'Custom Story User',
email: '[email protected]',
},
};
export const CustomContextAndSessionStory = Template.bind({});
CustomContextAndSessionStory.decorators = [
(Story) => (
<SessionProvider session={customMockSession}>
<SitecoreContext layoutData={customMockLayoutData}>
<Story />
</SitecoreContext>
</SessionProvider>
),
];
preview.tsx to provide default mock
session and Sitecore context data.SitecoreContext uses customMockLayoutData to simulate a custom page layout.SessionProvider uses customMockSession to simulate an authenticated user with custom
data.By overriding both the session and context at the story level, you can easily test how your component behaves with different user states and layouts, giving you powerful flexibility in Storybook.
Mocking Sitecore context data and NextAuth sessions in Storybook enables you to create a streamlined, effective development environment. By applying these techniques, you can:
Using Storybook with mocked Sitecore and NextAuth contexts creates a more flexible, reliable, and robust component testing process, enabling you to deliver higher-quality components with confidence.