Unable to create unit tests for components that contain a Jimu-ui

AlejandroMari1 — Thu, 04 Jul 2024 18:54:49 GMT

Hello, I'm having problems with the 'jimu-for-test' library when my components contains a <Checkbox> imported from the Jimu-ui library.

This is my component:

export class MyComponent extends React.PureComponent<{ }, { }> { render() { return (<div> <Checkbox checked={true} onChange={() => { }} /> </div>) } }

And this is the unit test:

import { React } from 'jimu-core'; import { render } from 'jimu-for-test'; import { MockResizeObserver } from '../../../testing/mocks'; describe('Sortable List', () => { MockResizeObserver(); it('renders checkbox', async () => { const component = render(<MyComponent />) expect(component.getByRole("checkbox")).toBeTruthy(); }) })

However this fails on line 8, when it tries to render the component:

C:\...\client>npm run sampletest > exb-client@1.14.0 sampletest > jest --runInBand sampletest.test ts-jest[ts-jest-transformer] (WARN) Define `ts-jest` config under `globals` is deprecated. Please do transform: { <transform_regex>: ['ts-jest', { /* ts-jest config goes here in Jest */ }], }, FAIL sample.test.tsx ● Sortable List › renders checkbox TypeError: Cannot read properties of undefined (reading 'checkbox') 1382 | box-shadow: 0 0 0 1px ${a.focusColor}; 1383 | } */ > 1384 | &.disabled { | ^ 1385 | &, 1386 | &.checked, &.indeterminate { 1387 | background: ${r.disabled.bg}; at eo (dist/jimu-ui/index.js:1384:111) at dist/jimu-theme/index.js:46:85554 at qP (dist/jimu-core/index.js:46:744751) at eD (dist/jimu-core/index.js:46:745060) at dist/jimu-core/index.js:147:51225 at dist/jimu-core/index.js:46:746094 at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18) at updateForwardRef (node_modules/react-dom/cjs/react-dom.development.js:19226:20) at beginWork (node_modules/react-dom/cjs/react-dom.development.js:21636:16) at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:27426:14) at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26560:12) at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5) at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7) at recoverFromConcurrentError (node_modules/react-dom/cjs/react-dom.development.js:25850:20) at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25750:22) at flushActQueue (node_modules/react/cjs/react.development.js:2667:24) at act (node_modules/react/cjs/react.development.js:2582:11) at node_modules/@testing-library/react/dist/act-compat.js:46:25 at renderRoot (node_modules/@testing-library/react/dist/pure.js:161:26) at render (node_modules/@testing-library/react/dist/pure.js:247:10) at render (jimu-for-test/lib/test-utils.tsx:19:17)

Any thoughts? I'm quite lost.

Thanks!

Alejandro

Re: Unable to create unit tests for components that contain a Jimu-ui

AlejandroMari1 — Thu, 04 Jul 2024 21:53:58 GMT

I found the solution to this. Turns out the Jimu-ui component is likely dependent on the Theme provider or the Intl provider. The testing library provides a way to generate a render() that will pass the context and seems to do the trick:

import { React } from 'jimu-core'; import { withStoreThemeIntlRender } from 'jimu-for-test'; import { MockResizeObserver } from '../../../testing/mocks'; const render = withStoreThemeIntlRender() describe('Sortable List', () => { MockResizeObserver(); it('renders checkbox', async () => { const component = render(<MyComponent />) expect(component.getByRole("checkbox")).toBeTruthy(); }) })

topic Re: Unable to create unit tests for components that contain a Jimu-ui <Checkbox> in Developers Questions

Unable to create unit tests for components that contain a Jimu-ui

Re: Unable to create unit tests for components that contain a Jimu-ui