[BUG] Jest tests throw invalid parameter warning

[AdamAnSubtractM]

Summary

Prior to "Extensibility", when running the Jest tests (npm run test), a warning would throw for each test stating the following:

 console.warn
    Invalid Parameter for getCustomerBaskets: clientId

      at node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:182412
          at Array.forEach (<anonymous>)
      at e.<anonymous> (node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:182297)
      at xa (node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:22397)
      at Generator._invoke (node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:22147)
      at Generator.forEach.e.<computed> [as next] (node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:22771)
      at ca (node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:20356)
      at o (node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:20560)
      at node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:20621
      at e.<anonymous> (node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:20500)
      at e.<anonymous> (node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:183195)
      at node_modules/@salesforce/commerce-sdk-react/hooks/ShopperCustomers/query.js:170:38
      at asyncGeneratorStep (node_modules/@salesforce/commerce-sdk-react/hooks/ShopperCustomers/query.js:14:103)
      at _next (node_modules/@salesforce/commerce-sdk-react/hooks/ShopperCustomers/query.js:15:194)
      at node_modules/@salesforce/commerce-sdk-react/hooks/ShopperCustomers/query.js:15:364
      at node_modules/@salesforce/commerce-sdk-react/hooks/ShopperCustomers/query.js:15:97
      at method (node_modules/@salesforce/commerce-sdk-react/hooks/ShopperCustomers/query.js:173:20)
      at node_modules/@salesforce/commerce-sdk-react/hooks/useAuthorizationHeader.js:34:20
      at asyncGeneratorStep (node_modules/@salesforce/commerce-sdk-react/hooks/useAuthorizationHeader.js:14:103)
      at _next (node_modules/@salesforce/commerce-sdk-react/hooks/useAuthorizationHeader.js:15:194)

  console.warn
    Invalid Parameter for getCustomerBaskets: locale

      at node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:182412
          at Array.forEach (<anonymous>)
      at e.<anonymous> (node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:182297)
      at xa (node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:22397)
      at Generator._invoke (node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:22147)
      at Generator.forEach.e.<computed> [as next] (node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:22771)
      at ca (node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:20356)
      at o (node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:20560)
      at node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:20621
      at e.<anonymous> (node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:20500)
      at e.<anonymous> (node_modules/commerce-sdk-isomorphic/lib/index.cjs.js:1:183195)
      at node_modules/@salesforce/commerce-sdk-react/hooks/ShopperCustomers/query.js:170:38
      at asyncGeneratorStep (node_modules/@salesforce/commerce-sdk-react/hooks/ShopperCustomers/query.js:14:103)
      at _next (node_modules/@salesforce/commerce-sdk-react/hooks/ShopperCustomers/query.js:15:194)
      at node_modules/@salesforce/commerce-sdk-react/hooks/ShopperCustomers/query.js:15:364
      at node_modules/@salesforce/commerce-sdk-react/hooks/ShopperCustomers/query.js:15:97
      at method (node_modules/@salesforce/commerce-sdk-react/hooks/ShopperCustomers/query.js:173:20)
      at node_modules/@salesforce/commerce-sdk-react/hooks/useAuthorizationHeader.js:34:20
      at asyncGeneratorStep (node_modules/@salesforce/commerce-sdk-react/hooks/useAuthorizationHeader.js:14:103)
      at _next (node_modules/@salesforce/commerce-sdk-react/hooks/useAuthorizationHeader.js:15:194)

• This does not prevent the tests from passing, but it is a warning we'd like to get cleaned up

Now with "Extensibility" in place, running npm run test from our repo does not run the tests on the retail-react-app components as those are now in a package, however, if you implement Jest testing by extending the @salesforce/retail-react-app jest and babel configs, you getting this warning for each component you have tests set up for.

Steps To Reproduce

Reproducing prior to "Extensibility"

1. Download pwa-kit-3.3.0 from here
2. Extract the zip (doing it this way will not have "Extensibility" in place)
3. Make sure your node version is 18 or late and npm version is 9 or later
4. Via the CLI, in the root of the pwa-kit-3.3.0 directory you extracted, type: cd packages/template-retail-react-app && npm i && npm run test
5. Note the warnings above thrown

Reproducing with the latest version of pwa-kit-create-app

1. Make sure your node version is 18 or late and npm version is 9 or later
2. Via the CLI, run type: npx @salesforce/pwa-kit-create-app --preset "retail-react-app"
3. When prompted with "Do you wish to use template extensibility?", select "yes"
4. Go through the prompts fill out the rest of your commerce cloud details
5. Once complete with the prompts, this will install the dependencies of the project for you. Switch to that project root: (i.e cd retail-react-app)
6. Modify babel.config.js (this will allow jest to use the right runtime. No need to install extra dependencies)

const base = require('@salesforce/pwa-kit-dev/configs/babel/babel-config')

const configs = {
    // base config from Salesforce PWA Kit
    ...base,
    default: {
        ...base.default,
        env: {
            ...base.default.env,
            test: {
                ...base.default.env.test,
                presets: ['@babel/preset-env', ['@babel/preset-react', {runtime: 'automatic'}]],
                plugins: ['babel-plugin-dynamic-import-node-babel-7']
            }
        }
    }
}
module.exports = configs.default

7. Create a jest.config.js in the root of the project. Extend the default config to look like this:

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

// extend/override config below
const configs = {
    // base config from Salesforce PWA Kit
    ...base,
    collectCoverage: false,
    collectCoverageFrom: [
        ...base.collectCoverageFrom,
        'app/**/*.{js,jsx,ts,tsx}',
        'non-pwa/**/*.{js,jsx,ts,tsx}',
        '!worker/**/*.{js,jsx,ts,tsx}',
        'scripts/generator/*.{js,jsx,ts,tsx}',
        '!app/pages/test-container/**/*.{js,jsx,ts,tsx}',
        '!app/types/**'
    ],
    // maps aliases for Jest to understand
    // if you have any special aliases for your directories, include them in moduleNameMapper
    moduleNameMapper: {
        ...base.moduleNameMapper,
        '^@salesforce/retail-react-app(.*)$':
            '<rootDir>/node_modules/@salesforce/retail-react-app/$1',
    },
    roots: ['<rootDir>'],
    // directories jest will ignore
    testPathIgnorePatterns: [...base.testPathIgnorePatterns, 'dist'],
    // so we can use ESM with Jest as Jest is built on commonjs
    transform: {
        '\\.[jt]sx?$': ['babel-jest', {configFile: path.resolve(__dirname, 'babel.config.js')}]
    },
    transformIgnorePatterns: []
}

module.exports = configs

8. In the package.json update the "test" script to to look like this "test": "jest --passWithNoTests",
9. Create a basic Jest test (I recommend creating a shell component and write a test to expect it to be in the document OR grab one from the "retail-react-app" package
10. Via the CLI, run: npm run test
11. Observe, you get the same warning as above

Expected result

• Test should pass/fail without warnings of Invalid Parameters

Actual result

• Tests are passing / failing and there are warnings being thrown about Invalid Parameters

System Information (as applicable)

Browser: N/A Node version: v18.19.1 pwa-kit version:

• "@salesforce/retail-react-app": "2.2.0"
• "@salesforce/pwa-kit-dev": "3.3.0"

Desktop OS: macOS 14.4 (23E214) Mobile Device Info: N/A

Additional information

• I suspect this has something to do with the API mocking that is being done. Something in that mocking is passing an invalid parameter to those function mocks or those functions are not typed to expect those parameters