[BUG] Default Jest test will fail with some files overridden

[Hecsall]

Summary

Trying to run the default jest test on the Product Detail page results in an error if you override product-detail, product-view, and the use-add-to-cart-modal hook.

Steps To Reproduce

Create a new demo project with npx @salesforce/pwa-kit-create-app@latest --preset retail-react-app-demo

Create a jest.config.js file inside the project root folder with this content

const base = require('@salesforce/retail-react-app/jest.config.js')

const configs = {
    ...base,
    transformIgnorePatterns: ['node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)'],
    moduleNameMapper: {
        ...base.moduleNameMapper,
        '^@salesforce/retail-react-app(.*)$':
            '<rootDir>/node_modules/@salesforce/retail-react-app/$1'
    },
    testPathIgnorePatterns: ['node_modules', 'build', '@salesforce']
}

module.exports = configs

Context: npm run test will throw an error for "unexpected token export" without the transformIgnorePattern, and won't be able to resolve @salesforce packages from the overrides folder without the moduleNameMapper.

With the next steps we will copy some files from the retail-react-app to our overrides folder, faking an ipothetic customization.

• Copy node_modules/@salesforce/retail-react-app/app/hooks/use-add-to-cart-modal.js to overrides/app/hooks/use-add-to-cart-modal.js

• Copy node_modules/@salesforce/retail-react-app/app/components/product-view/index.jsx to overrides/app/components/product-view/index.jsx

• Copy node_modules/@salesforce/retail-react-app/app/pages/product-detail/index.jsx to overrides/app/pages/product-detail/index.jsx

• Copy node_modules/@salesforce/retail-react-app/app/pages/product-detail/index.test.js to overrides/app/pages/product-detail/index.test.js

At this point, we need to update the copied files to point at our overridden files.

Inside overrides/app/pages/product-detail/index.jsx change this at line 31

- import ProductView from '@salesforce/retail-react-app/app/components/product-view'
+ import ProductView from '../../components/product-view'

Inside overrides/app/components/product-view/index.jsx change this at line 25

- import {useAddToCartModalContext} from '@salesforce/retail-react-app/app/hooks/use-add-to-cart-modal'
+ import {useAddToCartModalContext} from '../../hooks/use-add-to-cart-modal'

Inside overrides/app/pages/product-detail/index.test.js remove everything below line 84, leaving only the first test “should render product details page”

Run npm run test -> This will fail with an error TypeError: Cannot read properties of undefined (reading 'isOpen')

From further testing, I noticed that this issue happens only when both product-detail AND product-view are overridden.

Keeping the overridden use-add-to-cart-modal hook:

• If you override only product-detail and not product-view, the test works.
• If you override only product-view and not product-detail, the test works.
• If you override both, the test fails.

Expected result

The test should succeed without issues

Actual result

The test throws an error

System Information (as applicable)

Node version: 18.17.0 pwa-kit version: 3.1.0 Desktop OS: macOS 13.5 / Windows 11

[vcua-mobify]

Hi @Hecsall

Thanks for reporting this issue.

What you've found is a weird quirk around contexts. In use-add-to-cart-modal, there is a code to create and export the AddToCartModalContext.

In your overrides file, you need to make sure you are using the exact same context as in the base template. When copying the use-add-to-cart-modal as-is, you end up duplicating the creation of the AddToCartModalContext.

In the copy of use-add-to-cart-modal in overrides, the problem changes if you remove the line to create the AddToCartModalContext and instead import the context from the base template.

import {AddToCartModalContext} from '@salesforce/retail-react-app/app/hooks/use-add-to-cart-modal'

export const useAddToCartModalContext = () => useContext(AddToCartModalContext)

Following the above change, you'll see warnings around an update to RecommendedProducts not being wrapped in act. I'm looking into this next; there likely will need to be further changes made to the test file.

[Hecsall]

Hi @vcua-mobify, Thank you for the quick response!

I probably misunderstood how the overrides work, I thought that overriding a hook file would completely "ignore" the one defined inside the @salesforce package, that's why I didn't bother checking for duplicate contexts.

Anyway, your solution worked and we can now proceed with writing our tests, thanks!

I can leave this issue open for future updates on your mentioned warning.