[BUG] Cannot find module '@chakra-ui/utils/context' from 'node_modules/@chakra-ui/react/dist/cjs/checkbox/checkbox-context.cjs' when running unit tests

[axciccu]

Summary

Not able to run unit tests

Steps To Reproduce

Install the last version
npx '@salesforce/pwa-kit-create-app@latest' --preset retail-react-app-demo

install the dependencies
npm install

add the unit test for the my-new-route component importing renderWithProviders from test-utils

import React from 'react'

import {screen} from '@testing-library/react'
import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
import '@testing-library/jest-dom/extend-expect'
import MyNewRoute from './index'

describe('MyNewRoute', () => {
    test('renders the heading with correct text', () => {
        renderWithProviders(<MyNewRoute />)
        const headingElement = screen.getByText(/hello new route!/i)
        expect(headingElement).toBeInTheDocument()
        expect(headingElement).toHaveStyle('text-align: center')
        expect(headingElement).toHaveStyle('font-size: 4rem')
    })
})

and run the tests
npm run test

Expected result

The test should run

Actual result

The test suite fails to run

Test suite failed to run

Cannot find module '@chakra-ui/utils/context' from 'node_modules/@chakra-ui/react/dist/cjs/checkbox/checkbox-context.cjs'

Require stack:
  node_modules/@chakra-ui/react/dist/cjs/checkbox/checkbox-context.cjs
  node_modules/@chakra-ui/react/dist/cjs/checkbox/checkbox.cjs
  node_modules/@chakra-ui/react/dist/cjs/index.cjs
  node_modules/@salesforce/retail-react-app/app/components/shared/ui/Accordion/index.jsx
  node_modules/@salesforce/retail-react-app/app/components/shared/ui/index.jsx
  node_modules/@salesforce/retail-react-app/app/utils/test-utils.js
  overrides/app/pages/product-list/index.test.js

  16 | import {screen, waitFor} from '@testing-library/react'
  17 | import {Route, Switch} from 'react-router-dom'
> 18 | import {
     | ^
  19 |     createPathWithDefaults,
  20 |     renderWithProviders
  21 | } from '@salesforce/retail-react-app/app/utils/test-utils'

[kevinxh]

I also ran into this issue @axciccu , I believe the recent @chakra-ui releases has changed their package dist directory structure which is a breaking change and that surprised me. I pinned @chakra-ui/[email protected] and that fixes the issue.

[axciccu]

Thank you @kevinxh. The same workaround works for me as well.