I've encountered an issue while trying to integrate my stories into unit tests using Jest and React Testing Library in a NextJS application. When viewing the components in Storybook, everything works smoothly with the Storybook Addon Next Router. However, during the Jest testing process, I face an error because useRouter() returns null. I believe I have correctly configured all the necessary addons.

Here is my setup:

• NextJS 12
• Jest and React Testing Library
• Storybook
• Storybook Addon Next Router (used for Next router in Storybook)
• @storybook/testing-react (to integrate stories, args, and params with testing library)

The problem at hand:

I followed the documentation to set up all the files properly. The story renders fine in Storybook and useRouter() functions as expected thanks to the Storybook Next addon. However, when the composeStories() function from @storybook/testing-react is called to render the composed story in React Testing Library, it fails to initialize the Next router Provider from the initial addon. This results in a failure of my unit test with the following error:

Test suite failed to run
TypeError: Cannot read property 'locale' of null

The error points to the following line within my component:

// Events.tsx
const { locale = "en" } = useRouter();

This is my test file:

// Events.test.tsx
import React from 'react';
import { render, screen } from '@testing-library/react';
import { composeStories } from '@storybook/testing-react';
import * as stories from './Events.stories'


const { WithSeasonsAndEvents } = composeStories(stories);

describe('Events Screen', () => {
  render(<WithSeasonsAndEvents />);
  it('renders input data', () => {
    // set up test
  });
});

As well as my stories file:

// Events.stories.tsx
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import Events from './Events';

export default {
  title: 'Events/Events Screen',
  component: Events
} as ComponentMeta<typeof Events>;


const Template: ComponentStory<typeof Events> = (args) => <Events {...args} />;

export const WithSeasonsAndEvents = Template.bind({});
WithSeasonsAndEvents.args = {
  // many args here
};

In Storybook, the story renders perfectly fine with useRouter() functionality working as expected. However, the useRouter() function unexpectedly returns null when the composed story is rendered through React Testing Library.

What I have attempted so far:

• Confirmed installation of @storybook/testing-react and proper global configuration setup in jest setup file:

// jest-setup.ts
import '@testing-library/jest-dom/extend-expect';
import { setGlobalConfig } from '@storybook/testing-react';

// Location of Storybook's preview file
import * as globalStorybookConfig from './.storybook/preview';

setGlobalConfig(globalStorybookConfig);

• Ensured that jest recognizes my setup file and locates my Storybook preview file
• Verified that both .storybook/preview.js and .storybook/main.js align with the usage guide:

preview.js

// .storybook/preview.js
import '../styles/tailwind.css';
import { RouterContext } from "next/dist/shared/lib/router-context"; 

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  nextRouter: {
    Provider: RouterContext.Provider,
    locale: 'en',
  },
}

main.js

// .storybook/main.js
module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
    "../components/**/*.stories.@(js|jsx|ts|tsx|mdx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "storybook-addon-next-router",
  ],
  "framework": "@storybook/react"
}

• Stories display without issues in Storybook and all features of useRouter() work as intended. When logging the return value of useRouter(), the complete NextJS useRouter object properties are visible.

// >> console.log(useRouter()); inside Storybook
{
    route: "/",
    pathname: "/",
    query: {},
    asPath: "/",
    events: {},
    isFallback: false,
    locale: 'en'
}

• However, during the unit test, upon logging the return value of useRouter(); within my component, it shows null. Consequently, since it is null, the assignment of { locale } results in an error within the unit test.
• When inspecting the value of the useRouter variable, both in my Storybook preview and within the unit test, the following function is displayed:

// >> console.log(useRouter.toString())
function useRouter() {
    return _react.default.useContext(_routerContext.RouterContext);
}

If anyone has insights on what might be causing this issue, I would greatly appreciate any suggestions. While I am still new to Storybook, I have tried researching GitHub issues and online resources without success. It remains unclear why useRouter() returns null within Jest despite the expectation that composeStories() should handle the resolution of Storybook arguments and parameters. Any help or insights would be welcomed.