aliasJest causes my test suite to break

I'm switching an existing package that works without issue to use react-app-alias. My colleague and I were able to get the app running after setting a bunch of aliased paths correctly, however our unit test suite now fails to run.

We've not changed the tests or any of the code that they run against and have narrowed the problem down to aliasJest() or at least something in that area.

Prior to upgrading

Test suite runs without issue but the app doesn't run as our config-overrides.js is outside the project directory (it's shared across multiple apps).

Existing Jest config

This works prior to the intorduction of react-app-alias.

jest:  override(
      replaceJestIgnore('some_regex'),
      addJestAliases(aliases),
      replaceJestBabelTransform(appJestDir('babelTransform.js')),
      addJestSetupFile(appJestDir('setupRequireContext.js')),
    ),

After switching to use `react-app-alias`

If we don't touch config-overrides.js, our Jest overrides are not aware of the aliased paths so we get a bunch of errors like this:

Cannot find module 'components/ContentItem' from 'src/tests/components/ContentItem.spec.js

components is aliased in jsconfig.paths.json:

"components/*": ["src/components/*"],

New Jest config

This config gets me passed the 'cannot find module' errors but the tests fail as any Babel no longer transpiles any ES6 modules.

jest:  aliasJest(
   override(
      replaceJestIgnore('some_regex'),
      addJestAliases(aliases),
      replaceJestBabelTransform(appJestDir('babelTransform.js')),
      addJestSetupFile(appJestDir('setupRequireContext.js')),
    ),
),

After switching to use `react-app-alias` and `aliasJest()`

If I wrap my Jest overrides with aliasJest(), then the aliases work but Jest fails to transpile any ES6 modules e.g:

<project_path>/redesign/Avatar/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import Avatar from './Avatar';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      2 | import React, { useEffect } from 'react';
      3 | import PropTypes from 'prop-types';
    > 4 | import Avatar from '<project_path>/redesign/Avatar';

Managed to fix this with the help of a colleague. Wrapping my (formerly working) config in aliasJest() seemed not to work so instead but not doing that meant that our aliased paths were not being provided to Jest when the test suite ran.

To get around that issue, we (rather clumsily) extracted the aliased paths from aliasJest() and then spread them into the Jest config alonside the existing config. Open to input if there is a better way fo doing this and would love to know why aliasJest was killing my existing config.

jest: (config) => {
    const aliasedConfig = aliasJest()(config);
    const { moduleNameMapper } = aliasedConfig;

    const overriddenConfig = override(
      // Ignore all node modules, apart from scoped modules and non-transpiled deps
      replaceJestIgnore('<some regex to include certain packages from node_modules>'),
      replaceJestBabelTransform(appJestDir('<custom_babel_transform_file>')),
      addJestSetupFile(appJestDir('<add_require_context>')),
    )(config);

    return {
      ...overriddenConfig,
      moduleNameMapper,
    };
  },

Yes, it's not easy. It's good that you found a workaround. In order to fix it is necessary the same configuration to reproduce. It is best to take one of the projects in the Example folder and modify it.

Perhaps the problem will be visible if you provide the difference in the resulting configuration. It is necessary to analyze the configuration structure in the case when it does not work, and in the case when it works, to identify the difference, what exactly is the problem.

чт, 18 мая 2023 г., 12:22 John Peden @.***>:

Managed to fix this with the help of a colleague. Wrapping my (formerly working) config in aliasJest() seemed not to work so instead but not doing that meant that our aliased paths were not being provided to Jest when the test suite ran.

To get around that issue, we (rather clumsily) extracted the aliased paths from aliasJest() and then spread them into the Jest config alonside the existing config. Open to input if there is a better way fo doing this and would love to know why aliasJest was killing my existing config.

jest: (config) => { const aliasedConfig = aliasJest()(config); const { moduleNameMapper } = aliasedConfig;
const overriddenConfig = override(
  // Ignore all node modules, apart from @benefex scoped modules and non-transpiled deps
  replaceJestIgnore('<some regex to include certain packages from node_modules>'),
  replaceJestBabelTransform(appJestDir('<custom_babel_transform_file>')),
  addJestSetupFile(appJestDir('<add_require_context>')),
)(config);

return {
  ...overriddenConfig,
  moduleNameMapper,
};
},

— Reply to this email directly, view it on GitHub https://github.com/oklas/react-app-alias/issues/99#issuecomment-1552713265, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB57HXCTTCZD5OHROECVGH3XGXL5FANCNFSM6AAAAAAYDWQ7SM . You are receiving this because you are subscribed to this thread.Message ID: @.***>

oklas / react-app-alias