Element type is invalid on render method of "App" using Jest

Question

I am attempting to run a simple Jest test to render the App element. This is our App.test.tsx:

test('render application', () => {
   render(<App />);
}

This is the error that is being produced:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of 'App'.

If I do the following, the test passes:

function App() {
  return (
    <AuthProvider>
      <ApolloProvider client={apolloClient}>
        <h1>Hello World</h1>
      </ApolloProvider>
    </AuthProvider>
  );
}

However, if I do this, it fails on LocalizationProvider:

function App() {
  return (
    <AuthProvider>
      <ApolloProvider client={apolloClient}>
        <LocalizationProvider dateAdapter={AdapterLuxon}>
          <h1>Hello World</h1>
        </LocalizationProvider>
      </ApolloProvider>
    </AuthProvider>
  );
}

This is the LocalizationProvider.d.ts:

export declare const LocalizationProvider: LocalizationProviderComponent;
export {};

Here is our App.tsx:

import React from "react";
import { ApolloProvider } from "@apollo/client";
import CssBaseline from "@mui/material/CssBaseline";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
import { apolloClient } from "./apollo/client";
import AuthProvider from "./providers/AuthProvider";

function App() {
  return (
    <AuthProvider>
      <ApolloProvider client={apolloClient}>
        <LocalizationProvider dateAdapter={AdapterLuxon}>
          <CssBaseline />
        </LocalizationProvider>
      </ApolloProvider>
    </AuthProvider>
  );
}

export default App;

Here is my setupTests.ts file which I attempted to include a lot of mocks:

import '@testing-library/jest-dom';

Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: (query: string) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: function () {},
    removeListener: function () {},
    addEventListener: function () {},
    removeEventListener: function () {},
    dispatchEvent: function () {
      return false;
    },
  }),
});

jest.mock('@mui/x-date-pickers/LocalizationProvider', () => ({
  __esModule: true,
  default: (p: { children?: any }) => p.children,
}));

I am unable to change anything in App.tsx as that is on the developer side and I am on the testing side.

DHZA · Accepted Answer · 2025-10-21 12:08:37Z

0

Resolved the issue, if anyone comes across the same issue, ensure that your mocks are properly mocked:

Failing:

jest.mock('@mui/x-date-pickers/LocalizationProvider', () => ({
  __esModule: true,
  default: (p: { children?: any }) => p.children,
}));

Passing:

jest.mock('@mui/x-date-pickers/LocalizationProvider', () => ({
  __esModule: true,
  LocalizationProvider: (p: { children?: any }) => p.children,
}));

answered Oct 21 at 12:08

DHZA

73 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Element type is invalid on render method of "App" using Jest

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related