Community
Select to view content in your preferred language

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

262
1
07-04-2024 11:53 AM
AlejandroMari1
by
Frequent Contributor
‎07-04-2024 11:53 AM

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

0 Kudos
1 Reply
AlejandroMari1
by
Frequent Contributor
‎07-04-2024 02:53 PM

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();
    })
})

 

 

0 Kudos