How to test customizations of Volto components?

[wesleybl]

I created a Volto project with the command:

yo @plone/volto

I customized Volto components in src/customizations. I created a Component.test.jsx file to test a component. when I run:

yarn test

Any import made from my test uses Volto's original component instead of my custom component.

[wesleybl]

Well using moduleNameMapper like this:

https://github.com/plone/volto/blob/2f42c93d3b55ff27aca31037ff88b357f5d315d4/package.json#L80-L92

It worked. But I would have to have an entry for each custom file. Does anyone have another idea?

[tiberiuichim]

@wesleybl I don't see the customized entry in your last message. Or am I missing something?

[wesleybl]

@tiberiuichim I didn't really give entry example. I only indicated where the entry should be made.

But let's assume that I customized the file:

src/components/theme/Header/Header.jsx

of Volto, in file:

src/customizations/components/theme/Header/Header.jsx

of my project. If I test any component that has the import:

{Header} from '@plone/volto/components'

I need to add the following entry in my package.json:

    "moduleNameMapper": {
      "@plone/volto/components/Header": "<rootDir>/src/customizations/components/theme/Header"

to the test uses my file instead of the original.

This works but I have to remember to add an entry for each file. It would be nice if this were transparent to the tests.

Any tips?

[tiberiuichim]

This is my pattern for Volto components customization:

• src/customizations/volto/components/theme/Logo/Logo.jsx

import CustomLogo from "@root/components/Logo/Logo"

export default CustomLogo

And in my CustomLogo file I place the copy of the Volto code.

What I'm saying is that, in the override file, you can make it really basic, just an import+export, so that you can test the CustomLogo component on its own, so it doesn't matter if it's a Volto override.

On the other hand, I understand your issue. It's something to do with the fact that the jest setup is not using the addons registry. If you want to solve this issue in a nice way, let me point you in this direction:

• right now Volto (and volto projects) hosts their jest setup in package.json
• but it's possible to use a javascript file for configuration, see https://jestjs.io/docs/configuration
• so you could write a nice integration with the addons, such as the one we did for the .eslintrc configuration

[tiberiuichim]

@wesleybl If you manage to fix this with the addons registry, it would be awesome to have it contributed to Volto!

[wesleybl]

What I'm saying is that, in the override file, you can make it really basic, just an import+export, so that you can test the CustomLogo component on its own, so it doesn't matter if it's a Volto override.

The problem is when you want to test a component that imports a custom component. When you want to see the "effect" of your customization on a component that imports the custom component, but you don't really want to customize the component that does the import. If I only want to test the custom component, I can use a relative import in the test file.

It's something to do with the fact that the jest setup is not using the addons registry.

My problem here is not exactly with addons. But in customizations made in the Volto project itself. But I also had to add an entry for addons when I went to do the test. For example I added the entry:

    "moduleNameMapper": {
      "@plone/volto-slate": "<rootDir>/node_modules/@plone/volto/packages/volto-slate/src",
    }

To avoid module not found error.

But from what I understood from your comment, I would have to do this configuration dynamically. In the case of customizations, I think it would be more complicated to do this dynamically.

Thanks for the tip!

[tiberiuichim]

@wesleybl you're right sorry, I should have pointed you to this code https://github.com/plone/volto/blob/f66ab8ae0b8d54d7767916ac958b555a296744ef/razzle.config.js#L206-L213

The principle is the same, use the addons registry to get the customizations aliases.

[wesleybl]

@tiberiuichim the getProjectCustomizationPaths method is exactly what I was looking for. Thanks to point!

I noticed that the razzle.config.js file itself does Jest configuration:

https://github.com/plone/volto/blob/cf97547aeee6e71b262e4a258751ca472e977142/razzle.config.js#L317-L320

Then Volto itself could add the custom files to the Jest configuration. Does that sound good to you?

[tiberiuichim]

@wesleybl Sounds good! Give it a try.

One thing that's maybe not obvious, in case you need to do development on Volto and you want to test it in a Volto project, see https://github.com/plone/volto/issues/2810#issuecomment-970200321

[wesleybl]

Reopening, once the fix #3913 was reverted in #3919