How do we setup Jest for unit testing?

[lanegoolsby]

I've been trying to setup Jest. I am unable to get it working though.

The problem I cannot get past is getting Jest to recognize the Docusaurus modules. I've attached a minimum reproduction of the issue. I know its a configuration issue but I've come at this problem dozens of different directions all to no avail.

unit-tests.zip

[slorber]

On your Jest config, maybe adding a way for Jest to resolve the Webpack alias modules can help fix this. We do use this in our own repo config.

For example, you can try:

{
  moduleNameMapper: {
    '@docusaurus/(BrowserOnly|ComponentCreator|constants|ExecutionEnvironment|Head|Interpolate|isInternalUrl|Link|Noop|renderRoutes|router|Translate|use.*)': '@docusaurus/core/src/client/exports/$1', 
    '@theme/(.*)': '@docusaurus/theme-classic/src/theme/$1',
    '@site/(.*)': 'website/$1',
  }
}

Note: the @docusaurus/xyz config will likely become simpler with TS 4.7 + Jest 28 supporting package exports

[lanegoolsby]

Same error. Here is my jest.config.js. Note that I changed the path for @docusaurus/* to be @docusaurus/core/lib/client/exports/$1 (swapped /src for /lib since /src does not exist in my node_modules folder). The path for the @theme mapper did have the src folder.

module.exports = {
    preset: 'ts-jest',
    transform: {
        '^.+\\.{ts,tsx}?$': 'ts-jest'
    },
    moduleNameMapper: {
        '@docusaurus/(BrowserOnly|ComponentCreator|constants|ExecutionEnvironment|Head|Interpolate|isInternalUrl|Link|Noop|renderRoutes|router|Translate|use.*)': '@docusaurus/core/lib/client/exports/$1', 
        '@theme/(.*)': '@docusaurus/theme-classic/src/theme/$1',
        '@site/(.*)': 'website/$1',
      }
};

[slorber]

It is surprising to have the exact same error, are you sure?

You'll also need this to load CSS files and other assets:

    '^.+\\.(css|jpe?g|png|svg|webp)$': '<rootDir>/jest/emptyModule.ts',

(requires creating emptyModule.ts file)

this is what we use on our own repo, maybe there's some mapping missing 🤷‍♂️

source is https://github.com/facebook/docusaurus/blob/main/jest.config.mjs#L50

[tuckergordon]

I've also been running into issues trying to get Jest working with Docusaurus+TypeScript. I forked the Sandbox Stackblitz and used the above to add a simple Jest test to it: https://stackblitz.com/edit/github-yjetx2?file=jest.config.js.

A few key changes I had to make:

• Instead of using ts-jest, import @swc/jest and use the transform listed above. That seemed to resolve most of the errors I was getting
• Adding the moduleNameMapper listed above as well as the emptyModule.ts file

This almost works except it's taking issue with the Svg component in HomepageFeatures/index.tsx. If you comment out line 49, the test passes:

{/* <Svg className={styles.featureSvg} role="img" /> */}

I'm going to keep trying to debug this, though I have some lingering thoughts/concerns:

• This Svg issue could be indicative of a more fundamental issue that doesn't pop up elsewhere in this simple example
• It would be nice if running jest could rely on the same compilation process that npm run build uses, rather than needing to introduce swc (or ts-jest)
• Once this is all figured out, the docs could definitely benefit from an example and description of how to setup Docusaurus + jest

[karl-cardenas-coding]

I, too, have spent the majority of the day trying to create a test case for a custom component that uses Docusarus dependencies. I tried the suggestions in this thread, but to no avail. Something interesting I noticed is that no one is testing their custom components. I took a glance at the showcase page, and none of the repositories I visited had test cases for custom components.

Are we, as a community, not testing our custom components? Is it because of the challenges we are facing?
¯_(ツ)_/¯,

[slorber]

@karl-cardenas-coding we test a bit our theme components in Docusaurus packages, but could improve there.

To be honest, unless you build very interactive components (not the majority in docs sites), is it really useful to test them with Jest? Asserting a div as a given CSS rule or text doesn't really prevent most common regressions. I much prefer testing with visual regression tests, as explained in https://docusaurus.io/blog/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing

Now, if you have components you want to test in Jest and don't know how, please provide a repro and I'll take a look. It really depends on what you are testing and the dependencies used. In any case you can mock/alias dependencies in Jest, or use dependency injection if really needed. I can only help if I see/run your code, so producing a https://docusaurus.new/stackblitz repro sandbox is always helpful.

[karl-cardenas-coding]

@slorber First of all thank you so much for the detailed blog. We implemented a very similar solution, except we went with Playwright to do the comparison versus using Argos. Instead of storing the images in git, we use GitHub Artifacts. The report is posted on a GitHub page - we create a unique URL per test run.

Thank you for sharing this with us. This definitely goes a long way in helping us feel more confident about rolling out changes 💪🏻