Cannot find module of frontend addon package in test

[wesleybl]

If my package has an import of the type:

import { test } from '@org/my-addon/helpers/Test'

The test does not find the module.

To reproduce:

• Create a frontend addon.
• Answers to the questions to define the name of the addon:

  [1/8] Add-on Title (Volto Add-on):   
  [2/8] Add-on (Short name of the addon) (volto-add-on): my-addon 
  [3/8] A short description of your addon (A new add-on for Volto): 
  [4/8] Author (Plone Community): 
  [5/8] Author E-mail (collective@plone.org): 
  [6/8] GitHub Username or Organization (collective): 
  [7/8] Package name on NPM (my-addon): @org/my-addon
  [8/8] Volto version (18.9.0): 

• Enter the folder and run:

git init
make install

• Create the following files:

my-addon/packages/my-addon/src/helpers/Test.js

export function test() {
  return 'ok';
}

my-addon/packages/my-addon/src/Test.js

import { test } from '@org/my-addon/helpers/Test'

export function ok() {
  return test();
}

my-addon/packages/my-addon/src/Test.test.js

import { ok } from './Test';

it('test', () => {
  ok();
});

• Run make test.

I get the error:

 FAIL  ../../../packages/my-addon/src/Test.test.js
  ● Test suite failed to run

    Cannot find module '@org/my-addon/helpers/Test' from '../../../packages/my-addon/src/Test.js'

    Require stack:
      /home/user/my-addon/packages/my-addon/src/Test.js
      /home/user/my-addon/packages/my-addon/src/Test.test.js

    > 1 | import { test } from '@org/my-addon/helpers/Test'
        | ^
      2 |
      3 | export function ok() {
      4 |   return test();

      at Resolver.resolveModule (../../../node_modules/.pnpm/jest-resolve@26.6.2/node_modules/jest-resolve/build/index.js:306:11)
      at Object.<anonymous> (../../../packages/my-addon/src/Test.js:1:1)
      at Object.<anonymous> (../../../packages/my-addon/src/Test.test.js:1:1)

It seems that the moduleNameMapper used in this is the one from Volto, and there is no our package there.

[wesleybl]

This worked for me in jest-addon.config.js:

const baseConfig = require('@plone/volto/package.json').jest || {};

module.exports = {
  ...
  moduleNameMapper: {
  ...baseConfig.moduleNameMapper,
  '^@org/my-addon/(.*)$': '<rootDir>../../../packages/my-addon/src/$1',
  },
};

[davisagli]

@sneridagh I confirmed this. Is adding the moduleNameMapper entry to jest-addon.config.js the best way to fix this?

[stevepiercy]

@DeepakJain06 this is an issue tracker for Cookieplone templates, not a place to ask questions about GSoC.

@ebrehault will you please communicate with @DeepakJain06 what he needs to do?

[sneridagh]

@davisagli @wesleybl yes, it is. Unfortunately, Jest forces you to configure again the setup of your project in the way it likes it. We could add it to cookieplone, so it's there by default for the default add-on.

@wesleybl fyi, we will move away from Jest soon enough. There's a very advanced PR in the pipeline which will replace it with vitest. If you are starting a new project, I can't recommend enough that you just use it. The setup is seamless, it just works with the current ecosystem.

[wesleybl]

@davisagli @wesleybl yes, it is. Unfortunately, Jest forces you to configure again the setup of your project in the way it likes it. We could add it to cookieplone, so it's there by default for the default add-on.

Apparently in vitest, we also need to teach it the package paths:

https://github.com/Abhishek-17h/volto/blob/938aa669a8761eee0af16514def82a54a8f8f149/packages/volto/vitest.config.ts#L21-L29

[stevepiercy]

@wesleybl here's the PR @sneridagh mentioned.

plone/volto#6605

Docs are almost done.

[wesleybl]

@davisagli @sneridagh the idea is to not have Jest tests in cookieplone-templates, once plone/volto#6605 is merged?

[stevepiercy]

@wesleybl in #169 (comment):

2- We make it backwards compatible, so people can still use their Jest tests with core, by leaving the Jest config in there, but core uses vitest. In this option people optionally can migrate their setups to vitest.

It's not clear to me yet whether we'll have just docs to migrate the generated add-on configuration from Jest to Vitest (which are in that PR) or an option to choose one frontend add-on test configuration during the prompts.