ContextError: useModalStyles returned is 'undefined'. Seems you forgot to wrap the components in "<Modal />"

Question

this is jest unit test

ContextError: useModalStyles returned is 'undefined'. Seems you forgot to wrap the components in ""

jest.mock('@chakra-ui/react', () => {
  const originalModule = jest.requireActual('@chakra-ui/react');

  return {
    ...originalModule,
    useModalStyles: jest.fn(() => ({}))
  };
});

describe('AppPage Component', () => {
  const eventId = 'your-event-id';
  it('renders without crashing', () => {
    const mockCalendarEventQueryData = {
      data: {
        calendarEvent: {
          title: 'Mocked Event Title',
          children: [],
          members: []
        }
      }
    };
    (useCalendarEventQuery as jest.Mock).mockImplementation(() => ({
      ...mockCalendarEventQueryData
    }));

    // Mocking the useUpdateSessionMutation hook

    render(<EditEvent eventId={eventId} />);
  });
});

this is component

give me some suggestion to solve this error

Answer 1

You might have to wrap your tests in the ChakraProvider like was done for the app. This is part of their "Getting Started" documentation but also needs to be done in tests.

The useModalStyles hook (and other components that may be in the React tree) probably relies on information from that context to function.

import { ChakraProvider } from '@chakra-ui/react'; // import 

jest.mock('@chakra-ui/react', () => {
    // ...you can keep the mock, but may not need it if
    // it functions correctly with the provider
});

describe('EditEvent Component', () => {
  it('renders without crashing', () => {
    render(
      <ChakraProvider>
        <EditEvent eventId="your-event-id" />
      </ChakraProvider>
    );

    // ...continue test here
  });
});