Der Elementtyp ist bei der Rendermethode „App“ mit Jest ungültigJavaScript

Javascript-Forum
Anonymous
 Der Elementtyp ist bei der Rendermethode „App“ mit Jest ungültig

Post by Anonymous »

Ich versuche, einen einfachen Jest-Test durchzuführen, um das App-Element zu rendern. Dies ist unser App.test.tsx:

Code: Select all

test('render application', () => {
render();
}
Dies ist der Fehler, der erzeugt wird:

Elementtyp ist ungültig: Es wurde eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse/Funktion (für zusammengesetzte Komponenten) erwartet, aber Folgendes wurde erhalten: undefiniert. Überprüfen Sie die Rendermethode von „App“.

Wenn ich Folgendes mache, ist der Test erfolgreich:

Code: Select all

function App() {
return (


Hello World


);
}
Wenn ich dies jedoch mache, schlägt es bei LocalizationProvider fehl:

Code: Select all

function App() {
return (



Hello World



);
}
Dies ist der LocalizationProvider.d.ts:

Code: Select all

export declare const LocalizationProvider: LocalizationProviderComponent;
export {};
Hier ist unsere App.tsx:

Code: Select all

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 (







);
}

export default App;
Hier ist meine setupTests.ts-Datei, in die ich versucht habe, viele Mocks einzubinden:

Code: Select all

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,
}));
Ich kann in App.tsx nichts ändern, da dies auf der Entwicklerseite liegt und ich auf der Testseite bin.

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post