Auto previewing does not work when running a single test with WebStorm/IntelliJ

[srosato]

Found this issue while working on #126.

When trying to run a single test using IntelliJ, a node_modules folder gets created within the directory instead of the project root. I went on the nx monorepo example project and ran the test with IntelliJ (Webstorm) to see the problem happening. Here is a short video recording:

Screencast.2023-06-01.11.12.34.mp4

I have yet to dig out why it does this but this is what I got so far.

Note: I ran pnpm test and pnpm test:watch to see it work, it failed as soon as I tried to run the test with IntelliJ (running a single test)

I rebased my example branch with main and have added a few things to my example branch here: main...srosato:jest-preview:nextjs-nx-example.

The command that gets run in the preview video is /home/srosato/.nvm/versions/node/v16.18.1/bin/node --require /home/srosato/.local/share/JetBrains/Toolbox/apps/IDEA-U/ch-0/231.9011.34/plugins/javascript-impl/helpers/jest-intellij/lib/jest-intellij-stdin-fix.js /home/srosato/dev/third-party/jest-preview/examples/nextjs-nx/node_modules/jest/bin/jest.js --colors --reporters /home/srosato/.local/share/JetBrains/Toolbox/apps/IDEA-U/ch-0/231.9011.34/plugins/javascript-impl/helpers/jest-intellij/lib/jest-intellij-reporter.js --verbose --testNamePattern=^Index should render successfully$ --runTestsByPath /home/srosato/dev/third-party/jest-preview/examples/nextjs-nx/apps/app/specs/index.spec.tsx although it is very specific to my machine, it can be reproduced by opening a free version of WebStorm/IntelliJ

Originally posted by @srosato in #126 (comment)

[vramdal]

FWIW, I can work around the problem by adjusting node_modules/jest-preview/dist/index.js line #24 from

const CACHE_FOLDER = './node_modules/.cache/jest-preview';

so that it references the correct node_modules:

const CACHE_FOLDER = '.././node_modules/.cache/jest-preview';

Clearly not a permanent fix, but it allows me to run tests from within IntelliJ IDEA.

[srosato]

From my understanding, I think it has more to do with the fact that when we run a single test, IntelliJ will create an automatic run configuration using the closest directory where a jest.config.[t|js] is found.

In a case of a monorepo, it might be within apps/your-app/jest.config.js and therefore preview html will be created within apps/your-app/node_modules/.cache/jest-preview.

Your fix hardcodes that path, but we need a way to globally configure the path so it says in {projectRoot}/node_modules/.cache/jest-preview

[srosato]

I am currently experimenting here but have yet to come up with a valid PR

[srosato]

I worked on adding a feature to specify the cache folder location in #305.