I've got a NextJS project that uses Grommet UI. When I try and test it using Jest I get the following error:
TypeError: Cannot read properties of undefined (reading 'pageHeader') (see full stack trace at the end).
I wrap a Layout with the Grommet component like this:
type LayoutProps = {
children: React.ReactNode,
};
export default function Layout({ children }: LayoutProps) {
return (
<Grommet plain>
<Page kind="narrow">
<PageContent>
<main>{children}</main>
</PageContent>
</Page>
</Grommet>
)
}
and then my app.ts file looks like this:
function MyApp({ Component, pageProps }: AppProps) {
return <Layout>
<Component {...pageProps} />
</Layout>
};
Then I have a basic component that contains Gommet's PageHeader component:
const RegionDetail: React.FC<{ title: string }> = ({title}) => {
return (
<section>
<PageHeader title={ title }></PageHeader>
</section>
);
};
Then the test itself is failing on the first line:
describe('RegionDetails', () => {
test('Region Details', () => {
render(<RegionDetail title="test" />);
});
});
If I add the Gromet component to the test it passes:
describe('RegionDetails', () => {
test('Region Details', () => {
render(<Grommet plain><RegionDetail title="test" /></Grommet>);
});
});
The full stack trace looks like this:
Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'pageHeader')]
at reportException (/usr/src/app/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
at innerInvokeEventListeners (/usr/src/app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:343:9)
at invokeEventListeners (/usr/src/app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:276:3)
at HTMLUnknownElementImpl._dispatch (/usr/src/app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:223:9)
at HTMLUnknownElementImpl.dispatchEvent (/usr/src/app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (/usr/src/app/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
at Object.invokeGuardedCallbackDev (/usr/src/app/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
at invokeGuardedCallback (/usr/src/app/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
at beginWork$1 (/usr/src/app/node_modules/react-dom/cjs/react-dom.development.js:27451:7)
at performUnitOfWork (/usr/src/app/node_modules/react-dom/cjs/react-dom.development.js:26560:12) {
detail: TypeError: Cannot read properties of undefined (reading 'pageHeader')
at /usr/src/app/node_modules/grommet/components/PageHeader/PageHeader.js:44:41
at renderWithHooks (/usr/src/app/node_modules/react-dom/cjs/react-dom.development.js:16305:18)
at updateForwardRef (/usr/src/app/node_modules/react-dom/cjs/react-dom.development.js:19226:20)
at beginWork (/usr/src/app/node_modules/react-dom/cjs/react-dom.development.js:21636:16)
at HTMLUnknownElement.callCallback (/usr/src/app/node_modules/react-dom/cjs/react-dom.development.js:4164:14)
at HTMLUnknownElement.callTheUserObjectsOperation (/usr/src/app/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (/usr/src/app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:340:25)
at invokeEventListeners (/usr/src/app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:276:3)
at HTMLUnknownElementImpl._dispatch (/usr/src/app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:223:9)
at HTMLUnknownElementImpl.dispatchEvent (/usr/src/app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (/usr/src/app/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
at Object.invokeGuardedCallbackDev (/usr/src/app/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
at invokeGuardedCallback (/usr/src/app/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
at beginWork$1 (/usr/src/app/node_modules/react-dom/cjs/react-dom.development.js:27451:7)
at performUnitOfWork (/usr/src/app/node_modules/react-dom/cjs/react-dom.development.js:26560:12)
at workLoopSync (/usr/src/app/node_modules/react-dom/cjs/react-dom.development.js:26466:5)
at renderRootSync (/usr/src/app/node_modules/react-dom/cjs/react-dom.development.js:26434:7)
at performConcurrentWorkOnRoot (/usr/src/app/node_modules/react-dom/cjs/react-dom.development.js:25738:74)
at flushActQueue (/usr/src/app/node_modules/react/cjs/react.development.js:2667:24)
at act (/usr/src/app/node_modules/react/cjs/react.development.js:2582:11)
at /usr/src/app/node_modules/@testing-library/react/dist/act-compat.js:63:25
at renderRoot (/usr/src/app/node_modules/@testing-library/react/dist/pure.js:159:26)
at render (/usr/src/app/node_modules/@testing-library/react/dist/pure.js:246:10)
at Object.<anonymous> (/usr/src/app/test/regions/RegionDetails.spec.tsx:34:11)
at Promise.then.completed (/usr/src/app/node_modules/jest-circus/build/utils.js:333:28)
at new Promise (<anonymous>)
at callAsyncCircusFn (/usr/src/app/node_modules/jest-circus/build/utils.js:259:10)
at _callCircusTest (/usr/src/app/node_modules/jest-circus/build/run.js:277:40)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at _runTest (/usr/src/app/node_modules/jest-circus/build/run.js:209:3)
at _runTestsForDescribeBlock (/usr/src/app/node_modules/jest-circus/build/run.js:97:9)
at _runTestsForDescribeBlock (/usr/src/app/node_modules/jest-circus/build/run.js:91:9)
at run (/usr/src/app/node_modules/jest-circus/build/run.js:31:3)
at runAndTransformResultsToJestFormat (/usr/src/app/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:135:21)
at jestAdapter (/usr/src/app/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:92:19)
at runTestInternal (/usr/src/app/node_modules/jest-runner/build/runTest.js:411:16)
at runTest (/usr/src/app/node_modules/jest-runner/build/runTest.js:499:34)
at Object.worker (/usr/src/app/node_modules/jest-runner/build/testWorker.js:133:12),
type: 'unhandled exception'
}