@shopgate/pwa-unit-test 7.31.5-beta.6 → 7.31.6-beta.1

package/README.md

@@ -66,12 +66,69 @@ const defaultConfig = require('@shopgate/pwa-unit-test/jest.config');
 module.exports = {
   ...defaultConfig,
   moduleNameMapper: {
-    '^Components(.*)$': '<rootDir>/components',
-    '^Styles(.*)$': '<rootDir>/styles',
+    // Keep the default mappings - they would be replaced otherwise
+    ...defaultConfig.moduleNameMapper,
+    '^Components(.*)$': '<rootDir>/components$1',
+    '^Styles(.*)$': '<rootDir>/styles$1',
   },
 };
 ```
 
+__NOTE: Options which hold an object or an array - like `moduleNameMapper`, `setupFiles` or
+`transformIgnorePatterns` - are replaced and not merged when they are set. Spread the value of the
+default configuration first to keep it, as shown above. Without that, the mappings for styles and
+assets are lost, and imports of stylesheets or images within the tested components fail.__
+
+## Test utilities
+
+### `createMockStore`
+
+Creates a minimal Redux store for component tests. It implements the contract that `react-redux`
+relies on, without pulling in the reducers of the application:
+
+```js
+import { createMockStore } from '@shopgate/pwa-unit-test/testUtils';
+
+const store = createMockStore({ counter: 0 });
+
+mount(
+  <Provider store={store}>
+    <MyComponent />
+  </Provider>
+);
+```
+
+Dispatched actions are recorded, so they can be asserted on. `store.dispatch` is a jest mock:
+
+```js
+expect(store.getActions()).toEqual([{ type: 'INCREMENT' }]);
+expect(store.dispatch).toHaveBeenCalledWith({ type: 'INCREMENT' });
+
+store.clearActions();
+```
+
+__NOTE: `getActions()` reads the recorded calls of the `dispatch` mock, so a `jest.clearAllMocks()`
+- e.g. within a `beforeEach` - also clears the recorded actions. Create the store after that call,
+or use `store.clearActions()` to reset only this store.__
+
+By default the state doesn't change when an action is dispatched, which keeps it predictable. Use
+`setState` to simulate a state change - the subscribers are notified, so connected components
+re-render:
+
+```js
+store.setState({ counter: 5 });
+store.setState(current => ({ counter: current.counter + 1 }));
+```
+
+Pass a reducer as second argument to also apply dispatched actions to the state, e.g. to assert
+what a component renders after it dispatched something:
+
+```js
+const store = createMockStore({ counter: 0 }, (state, action) => (
+  action.type === 'INCREMENT' ? { counter: state.counter + 1 } : state
+));
+```
+
 ## About Shopgate
 
 Shopgate is the leading mobile commerce platform.

package/envSetup.js

@@ -10,70 +10,59 @@ expect.extend({
     const isFn = fn => typeof fn === 'function';
 
     // Prefer Enzyme's API when available (shallow)
-    let empty =
-      isFn(received.isEmptyRender) ? received.isEmptyRender() : null;
+    let empty = isFn(received.isEmptyRender) ? received.isEmptyRender() : null;
 
     // Fallback: try to infer from HTML (mount / generic wrappers)
     if (empty === null) {
       const html = isFn(received.html) ? received.html() : undefined;
       empty = html == null || /^\s*$/.test(String(html));
     }
-
     const pass = empty === true;
     return {
       pass,
-      message: () =>
-        (pass
-          ? 'expected wrapper NOT to be an empty render'
-          : 'expected wrapper to be an empty render'),
+      message: () => pass ? 'expected wrapper NOT to be an empty render' : 'expected wrapper to be an empty render'
     };
   },
   toExist(received) {
     const pass = typeof received.exists === 'function' ? received.exists() : !!received.length;
     return {
       pass,
-      message: () =>
-        (pass ? 'expected wrapper NOT to exist' : 'expected wrapper to exist'),
+      message: () => pass ? 'expected wrapper NOT to exist' : 'expected wrapper to exist'
     };
-  },
+  }
 });
-
 global.SGEvent = {
-  __call: () => { },
+  __call: () => {}
 };
-
 jest.setTimeout(10000);
-
 global.mutationConstructorSpy = jest.fn();
 global.mutationObserveSpy = jest.fn();
 global.mutationDisconnectSpy = jest.fn();
-
-global.MutationObserver = class {
-  constructor(callback) { global.mutationConstructorSpy(callback); }
-
-  observe(element, initObject) { global.mutationObserveSpy(element, initObject); }
-
-  disconnect() { global.mutationDisconnectSpy(); }
-};
-
+global.MutationObserver = /*#__PURE__*/function () {
+  function _class(callback) {
+    global.mutationConstructorSpy(callback);
+  }
+  var _proto = _class.prototype;
+  _proto.observe = function observe(element, initObject) {
+    global.mutationObserveSpy(element, initObject);
+  };
+  _proto.disconnect = function disconnect() {
+    global.mutationDisconnectSpy();
+  };
+  return _class;
+}();
 global.IntersectionObserver = jest.fn((callback, options) => ({
-  observe: jest.fn((element) => {
-
-  }),
-  unobserve: jest.fn((element) => {
-
-  }),
-  disconnect: jest.fn(() => {
-
-  }),
+  observe: jest.fn(element => {}),
+  unobserve: jest.fn(element => {}),
+  disconnect: jest.fn(() => {}),
   takeRecords: jest.fn(() => []),
-  trigger: (entries) => {
+  trigger: entries => {
     callback(entries, {
       disconnect: jest.fn(),
-      unobserve: jest.fn(),
+      unobserve: jest.fn()
     });
-  },
+  }
 }));
 
 /* eslint-enable require-jsdoc, extra-rules/potential-point-free, class-methods-use-this, no-unused-vars */
-/* eslint-enable max-len */
+/* eslint-enable max-len */

package/jest.config.js

@@ -4,13 +4,21 @@ const babelJest = require.resolve('babel-jest');
 const babelOptions = {
   babelrc: false,
   configFile: false,
-  presets: [
-    require.resolve('@babel/preset-env'),
-    require.resolve('@babel/preset-react'),
-    require.resolve('@babel/preset-typescript'),
-  ],
+  presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-react'), require.resolve('@babel/preset-typescript')]
 };
 const babelTransform = [babelJest, babelOptions];
+const stylesMock = require.resolve("./mocks/styles.js");
+
+/**
+ * Swiper exposes its React build via the "exports" field of its package.json, which jest can't
+ * resolve. Mapping it to the concrete file fixes that. Resolving it from this package works for
+ * consumers as well, and only falls back to the rootDir of the consumer when swiper is installed
+ * somewhere this package can't reach.
+ */
+let swiperReact = '<rootDir>/node_modules/swiper/swiper-react.mjs';
+try {
+  swiperReact = require.resolve('swiper/react');
+} catch (e) {/* swiper is not installed */}
 
 /** @type {import('jest').Config} */
 module.exports = {
@@ -19,46 +27,30 @@ module.exports = {
   moduleFileExtensions: ['js', 'jsx', 'json', 'mjs', 'ts', 'tsx'],
   moduleNameMapper: {
     // Mock styles since they are not needed for unit tests
-    '\\.(css|sass)$': '<rootDir>/__mocks__/styleMock.js',
-    // Fix issue with Swiper ES module imports that work via "exports" field in package.json
-    '^swiper/react$': '<rootDir>/node_modules/swiper/swiper-react.mjs',
+    '\\.(css|sass|scss|less)$': stylesMock,
+    // Mock assets since they are not needed for unit tests
+    '\\.(jpg|jpeg|png|gif|webp|svg|ico|eot|otf|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': require.resolve("./mocks/assets.js"),
+    '^swiper/react$': swiperReact,
+    // Mock Swiper styles - they are imported without a file extension
+    '^swiper/css(?:/.*)?$': stylesMock
   },
   transform: {
     '^.+\\.jsx?$': babelTransform,
     '^.+\\.mjs$': babelTransform,
-    '^.+\\.[jt]sx?$': babelTransform,
+    '^.+\\.[jt]sx?$': babelTransform
   },
-  snapshotSerializers: [
-    'enzyme-to-json/serializer',
-  ],
+  snapshotSerializers: ['enzyme-to-json/serializer'],
   testRegex: '(/__tests__/.*|(\\.|/)spec)\\.(js|jsx|ts|tsx)?$',
-  testPathIgnorePatterns: [
-    '/node_modules/',
-    '/dist/',
-    '/coverage/',
-    '/config/',
-  ],
-  transformIgnorePatterns: [
-    'node_modules/(?!(swiper|dom7|intl-messageformat|@formatjs|tslib)/)',
-  ],
-  unmockedModulePathPatterns: [
-    'node_modules/react/',
-    'node_modules/enzyme/',
-  ],
-  collectCoverageFrom: [
-    '**/*.{js,jsx,ts,tsx}',
-    '!**/node_modules/**',
-    '!**/coverage/**',
-    '!.eslintrc.js',
-    '!**/jest.config.js',
-  ],
-  setupFiles: [
-    '@shopgate/pwa-unit-test/testSetup.js',
-  ],
-  setupFilesAfterEnv: [
-    '@shopgate/pwa-unit-test/envSetup.js',
-  ],
+  testPathIgnorePatterns: ['/node_modules/', '/dist/', '/coverage/', '/config/'],
+  // @shopgate packages are published untranspiled, so they need to be transformed as well. Within
+  // this repository they are symlinked to their sources outside of node_modules, which is why the
+  // missing entry didn't surface here, but only within extensions which install them for real.
+  transformIgnorePatterns: ['node_modules/(?!(@shopgate|swiper|dom7|intl-messageformat|@formatjs|tslib)/)'],
+  unmockedModulePathPatterns: ['node_modules/react/', 'node_modules/enzyme/'],
+  collectCoverageFrom: ['**/*.{js,jsx,ts,tsx}', '!**/node_modules/**', '!**/coverage/**', '!.eslintrc.js', '!**/jest.config.js'],
+  setupFiles: ['@shopgate/pwa-unit-test/testSetup.js'],
+  setupFilesAfterEnv: ['@shopgate/pwa-unit-test/envSetup.js'],
   testEnvironmentOptions: {
-    url: 'http://localhost',
-  },
-};
+    url: 'http://localhost'
+  }
+};

package/mocks/appCommand.js

@@ -0,0 +1,65 @@
+/**
+ * Mock for @shopgate/pwa-core/classes/AppCommand.
+ *
+ * The published packages don't contain their __mocks__ folders, so consumers like extensions can't
+ * rely on the manual mock of the package itself. Without a chainable mock the app commands that
+ * are dispatched on module level - e.g. by the Scanner class - throw as soon as a component from
+ * @shopgate/engage is imported.
+ */
+let dispatchError = false;
+const mockedSetCommandName = jest.fn(name => name);
+const mockedSetCommandParams = jest.fn(params => params);
+const mockedSetLibVersion = jest.fn(version => version);
+const mockedBuildCommand = jest.fn(command => command);
+const mockedDispatch = jest.fn(params => params);
+
+/**
+ * Causes that the dispatch method resolves with FALSE.
+ * @param {boolean} value Trigger an error or not.
+ */
+const triggerDispatchError = (value = true) => {
+  dispatchError = value;
+};
+const mockedAppCommand = jest.fn().mockImplementation(function MockedAppCommand() {
+  this.name = '';
+  this.params = null;
+  this.libVersion = '9.0';
+  this.setCommandName = name => {
+    this.name = mockedSetCommandName(name);
+    return this;
+  };
+  this.setCommandParams = params => {
+    this.params = mockedSetCommandParams(params);
+    return this;
+  };
+  this.setLibVersion = version => {
+    this.libVersion = mockedSetLibVersion(version);
+    return this;
+  };
+  this.buildCommand = () => {
+    const command = this.name ? {
+      c: this.name,
+      ...(this.params && {
+        p: this.params
+      })
+    } : null;
+    return mockedBuildCommand(command);
+  };
+  this.dispatch = params => {
+    mockedDispatch(params);
+    const success = !dispatchError;
+    dispatchError = false;
+    return Promise.resolve(success);
+  };
+  return this;
+});
+module.exports = {
+  __esModule: true,
+  default: mockedAppCommand,
+  mockedSetCommandName,
+  mockedSetCommandParams,
+  mockedSetLibVersion,
+  mockedBuildCommand,
+  mockedDispatch,
+  triggerDispatchError
+};

package/mocks/assets.js

@@ -0,0 +1,7 @@
+/**
+ * Replacement for asset imports (images, fonts, media) which are irrelevant for unit tests.
+ *
+ * Written in CommonJS on purpose, so that the mapping also works for consumers which replaced the
+ * transformIgnorePatterns of this package with ones that don't transform @shopgate packages.
+ */
+module.exports = '';

package/mocks/i18n.js

@@ -0,0 +1,24 @@
+/**
+ * Mock for @shopgate/engage/core/helpers/i18n.
+ *
+ * The published packages don't contain their __mocks__ folders, so consumers like extensions can't
+ * rely on the manual mock of the package itself. Without it the translation helpers are not
+ * initialized, so components which render a translated string don't work.
+ */
+const i18n = {
+  ready: true,
+  init: () => {},
+  text: input => input || '',
+  price: () => 'p',
+  number: () => 'n',
+  date: () => 'd',
+  time: () => 't',
+  getLang: () => 'de-DE',
+  getPath: path => path,
+  has: path => typeof path === 'string' && /^\S+\.\S+/.test(path)
+};
+module.exports = {
+  __esModule: true,
+  i18n,
+  getWeekDaysOrder: () => ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']
+};

package/mocks/styles.js

@@ -0,0 +1,7 @@
+/**
+ * Replacement for style imports which are irrelevant for unit tests.
+ *
+ * Written in CommonJS on purpose, so that the mapping also works for consumers which replaced the
+ * transformIgnorePatterns of this package with ones that don't transform @shopgate packages.
+ */
+module.exports = {};

package/mocks/useTheme.js

@@ -0,0 +1,18 @@
+/**
+ * Mock for @shopgate/engage/styles/theme/hooks/useTheme.
+ *
+ * The published packages don't contain their __mocks__ folders, so consumers like extensions can't
+ * rely on the manual mock of the package itself. Without a theme object the styles of components
+ * from @shopgate/pwa-ui-shared throw when they access theme values.
+ *
+ * The theme is created with the published createTheme helper, so this mock doesn't need to
+ * duplicate any theme defaults.
+ */
+const {
+  createTheme
+} = require('@shopgate/engage/styles/theme/createTheme');
+const theme = createTheme({});
+module.exports = {
+  __esModule: true,
+  default: () => theme
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/pwa-unit-test",
-  "version": "7.31.5-beta.6",
+  "version": "7.31.6-beta.1",
   "description": "The unit tests setup for Shopgate's ENGAGE.",
   "author": "Shopgate <support@shopgate.com>",
   "license": "Apache-2.0",
@@ -22,9 +22,13 @@
   },
   "devDependencies": {
     "@types/enzyme": "^3.10.19",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^17.0.83",
     "jest": "^29.7.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-redux": "^8.1.3",
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "jest": "^29.7.0",

package/testSetup.js

@@ -1,13 +1,73 @@
 const Enzyme = require('enzyme');
 const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
+Enzyme.configure({
+  adapter: new Adapter()
+});
 
-Enzyme.configure({ adapter: new Adapter() });
+/**
+ * Checks whether a module can be resolved. Consumers of this package don't necessarily have all
+ * of the mocked packages installed, and jest.mock() resolves the module path even when a factory
+ * is passed, so mocking an absent module would break the whole setup.
+ * @param {string} modulePath Path of the module.
+ * @returns {boolean} Whether the module can be resolved.
+ */
+const canResolve = modulePath => {
+  try {
+    require.resolve(modulePath);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
 
-jest.mock('@shopgate/engage/core/helpers/i18n');
+/**
+ * The mocks below are provided by this package instead of relying on the manual __mocks__ folders
+ * of the mocked packages. Those folders are stripped from the published packages, so consumers
+ * like extensions would silently fall back to automocks, which breaks as soon as a component from
+ * @shopgate/engage is imported.
+ *
+ * The mock factories have to require their module lazily and inline, which is enforced by
+ * babel-plugin-jest-hoist.
+ */
+/* eslint-disable global-require */
+
+// Mock the translation helpers, since they are not initialized during test runs
+if (canResolve('@shopgate/engage/core/helpers/i18n')) {
+  jest.mock('@shopgate/engage/core/helpers/i18n', () => require("./mocks/i18n"));
+}
+
+// Mock the AppCommand class by default to avoid log spamming during test runs
+if (canResolve('@shopgate/pwa-core/classes/AppCommand')) {
+  jest.mock('@shopgate/pwa-core/classes/AppCommand', () => require("./mocks/appCommand"));
+}
+
+// Mock the useTheme hook to prevent failing tests due to missing theme object
+if (canResolve('@shopgate/engage/styles/theme/hooks/useTheme')) {
+  jest.mock('@shopgate/engage/styles/theme/hooks/useTheme', () => require("./mocks/useTheme"));
+}
+
+// Mock the media provider styles to prevent failing tests
+if (canResolve('@shopgate/pwa-common/collections/media-providers/style')) {
+  jest.mock('@shopgate/pwa-common/collections/media-providers/style', () => ({
+    responsiveContainer: 'responsiveContainer',
+    consentContainer: 'consentContainer',
+    consentLink: 'consentLink',
+    consentIcon: 'consentIcon'
+  }));
+}
+
+// The themes are not installed for consumers like extensions. They can't be mocked virtually,
+// since a virtual mock is only applied to imports which use this exact module path.
+if (canResolve('@shopgate/theme-gmd/extensions/reducers')) {
+  jest.mock('@shopgate/theme-gmd/extensions/reducers', () => null);
+}
+if (canResolve('@shopgate/theme-ios11/extensions/reducers')) {
+  jest.mock('@shopgate/theme-ios11/extensions/reducers', () => null);
+}
+/* eslint-enable global-require */
 
 const localStorageMock = (() => {
   let store = {};
-
   return {
     getItem(key) {
       return store[key] || null;
@@ -17,24 +77,9 @@ const localStorageMock = (() => {
     },
     clear() {
       store = {};
-    },
+    }
   };
 })();
-
-Object.defineProperty(window, 'localStorage', { value: localStorageMock });
-
-// Mock the AppCommand class by default to avoid log spamming during test runs
-jest.mock('@shopgate/pwa-core/classes/AppCommand');
-jest.mock('@shopgate/theme-gmd/extensions/reducers', () => null);
-jest.mock('@shopgate/theme-ios11/extensions/reducers', () => null);
-
-// Mock the media provider styles to prevent failing tests
-jest.mock('@shopgate/pwa-common/collections/media-providers/style', () => ({
-  responsiveContainer: 'responsiveContainer',
-  consentContainer: 'consentContainer',
-  consentLink: 'consentLink',
-  consentIcon: 'consentIcon',
-}));
-
-// Mock the useTheme hook to prevent failing tests due to missing theme object
-jest.mock('@shopgate/engage/styles/theme/hooks/useTheme');
+Object.defineProperty(window, 'localStorage', {
+  value: localStorageMock
+});

package/testUtils/createMockStore.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Minimal Redux store for component tests.
+ *
+ * This module is only meant to be imported from test files, since it uses the jest globals.
+ */
+type Listener = () => void;
+/** An action which was dispatched to the store. */
+export interface MockAction {
+    type: string;
+    [key: string]: unknown;
+}
+/** Reducer which is applied to the dispatched actions. */
+export type MockReducer<S> = (state: S, action: MockAction) => S;
+export interface MockStore<S> {
+    /** Returns the current state. */
+    getState: () => S;
+    /** Records every dispatched action. Assert on it like on any other jest mock. */
+    dispatch: jest.Mock<MockAction, [MockAction]>;
+    /** Registers a listener which is invoked whenever the state changed. Returns an unsubscribe. */
+    subscribe: (listener: Listener) => () => void;
+    /** Replaces the state and notifies the subscribers, so connected components re-render. */
+    setState: (next: S | ((current: S) => S)) => void;
+    /** Returns the dispatched actions in the order they were dispatched. */
+    getActions: () => MockAction[];
+    /** Forgets all recorded actions. */
+    clearActions: () => void;
+}
+/**
+ * Creates a Redux store for component tests. It implements the contract that react-redux relies on
+ * - getState, dispatch and subscribe - without pulling in the reducers of the application.
+ *
+ * By default dispatched actions are only recorded, which keeps the state predictable while
+ * asserting that a component dispatches the right action. Pass a reducer to also apply the
+ * dispatched actions to the state, e.g. to assert what a component renders afterwards.
+ * @param initialState The state the store starts with.
+ * @param reducer Optional reducer which is applied to dispatched actions.
+ * @returns The mocked store.
+ */
+export declare const createMockStore: <S>(initialState: S, reducer?: MockReducer<S>) => MockStore<S>;
+export {};

package/testUtils/createMockStore.js

@@ -0,0 +1,59 @@
+/**
+ * Minimal Redux store for component tests.
+ *
+ * This module is only meant to be imported from test files, since it uses the jest globals.
+ */
+
+/** An action which was dispatched to the store. */
+
+/** Reducer which is applied to the dispatched actions. */
+
+/**
+ * Creates a Redux store for component tests. It implements the contract that react-redux relies on
+ * - getState, dispatch and subscribe - without pulling in the reducers of the application.
+ *
+ * By default dispatched actions are only recorded, which keeps the state predictable while
+ * asserting that a component dispatches the right action. Pass a reducer to also apply the
+ * dispatched actions to the state, e.g. to assert what a component renders afterwards.
+ * @param initialState The state the store starts with.
+ * @param reducer Optional reducer which is applied to dispatched actions.
+ * @returns The mocked store.
+ */
+export const createMockStore = (initialState, reducer) => {
+  let state = initialState;
+  const listeners = new Set();
+
+  /**
+   * Notifies all subscribers about a state change.
+   */
+  const notify = () => {
+    listeners.forEach(listener => {
+      listener();
+    });
+  };
+  const dispatch = jest.fn(action => {
+    if (reducer) {
+      state = reducer(state, action);
+      notify();
+    }
+    return action;
+  });
+  return {
+    getState: () => state,
+    dispatch,
+    subscribe: listener => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    setState: next => {
+      state = typeof next === 'function' ? next(state) : next;
+      notify();
+    },
+    getActions: () => dispatch.mock.calls.map(([action]) => action),
+    clearActions: () => {
+      dispatch.mockClear();
+    }
+  };
+};

package/testUtils/index.d.ts

@@ -0,0 +1 @@
+export * from './createMockStore';

package/testUtils/index.js

@@ -0,0 +1 @@
+export * from "./createMockStore";