Jest preview not working with Nx monorepo

[srosato]

Describe the bug
Running a jest preview on a nx monorepo does not benefit from automatic refresh on test failures. The furthest I was able to make it work is by refreshing manually the page, but I do not get any automatic refresh. I attempted to create a reproduction repository by adding an example project.

To Reproduce

• Checkout the branch I created within the PR: Nextjs nx example #125
• npm run install
• npm run build
• npm run types
• cd examples/nextjs-nx
• npm run jest-preview
• npm run test

Expected behavior
We should see a preview of the HTML output for the test contained within examples/nextjs-nx/apps/app/specs/index.spec.tsx

Environment

• PopOS 22.04 LTS
• Chrome
• Jest version 27.5.1

Additional context

I will paste what I wrote on Discord, if that could help in any way

1. Chokidar seems inconsistent with its file watching. I could only achieve reliable file watching by removing the PUBLIC_CONFIG_PATH + adding usePolling: true to the watcher. I run on Linux (popOS 22.04). I have a feeling chokidar has inconsistent watch issues because I was not able to consistently watch for files changes when the debug function was writing the files. Have you guys ran on inconsistent watch issues? I was running a single jest test with a single test failing. I wonder how inconsistent it would become once I use a more intensive workflow (I use WallabyJs that will very often test files)

2. Since I am using an Nx monorepo, I run jest tests for one app within apps/app1 and the debug() (or auto preview) will output cached files within [project_root]/apps/app1/node_modules/.cache. The problem with the monorepo is that usually there will be one jest.config.js per app/library but the repo has a single package.json file and I run yarn jest-preview on the root of the project, and therefore the preview server assumes [project_root]/node_modules/.cache. I saw that the CACHE_DIRECTORY on previewServer.js and CACHE_FOLDER on the distributed file are hardcoded at the moment. I can contribute if you want, just wanted to get your opinion on how best you would implement changing cache folder directory (automatically detected or through an option at test setup?)

[nvh95]

Hi @srosato. Thank you so much for your interest in Jest Preview and your efforts to report a bug, prepare a reproduction, and even a Pull Request!

We know that Jest Preview might not work well with monorepo architecture at the moment. The reason is just that Jest Preview is still very young. We plan to support it soon. But as you provided us an example in #125. I believe the support will come earlier.

Chokidar seems inconsistent with its file watching
Have you guys ran on inconsistent watch issues?

I haven't ever had any issue with file watching (using chokidar). If you experience this, it might be related to your OS or monorepo. Let us take some time to play with your monorepo to find out. But it's definitely an issue from Jest Preview side.

I run jest tests for one app within apps/app1
therefore the preview server assumes [project_root]/node_modules/.cache
I can contribute if you want, just wanted to get your opinion on how best you would implement changing cache folder directory (automatically detected or through an option at test setup?)

Yes please. We would like to have you contribute on this. I think automatically detected is the best solution. I haven't imagined how it looks like when config through an option at test setup.
But don't worry too much. Just send me another PR, and we can improve the implementation gradually together

Bonus:
You might want to check the CONTRIBUTION guilines here: https://www.jest-preview.com/docs/others/contributing

[nvh95]

cc: @ntt261298

[ntt261298]

Hi @srosato

1. I run tests in your NX monorepo and the file watching feature (using chokidar) seems to work fine in my machine. (I run tests, change the app content, and run tests again => The preview is still automatically updated). I will give you the update if I encounter any issue with the auto-update feature.
2. Have you had time to take a look at this (the automatically detected approach for CACHE_DIRECTORY)? I tried to run tests in your provided repo following your steps, and the cache folder is still created in the right place ([project_root]/node_modules/.cache). The problem is probably from the transformed config (cannot transform files so the head.html is empty, I am trying to find the reason). It would be great if you update your repo or the steps that lead to the problem you are encountering.

[srosato]

For sure thanks for the quick replies!! I am quite busy at the moment so I haven't had much chance to come back to it, but I want to, because right now I am daily in this monorepo of mine writing tests. Give me a few days I will come back to it, it is quite obscure to me still.

Your library is a godsend guys though - writing tests using React Testing Library without any visual cues is madness.

It works super well on projects without Nx, but fair note, my Nx project is quite large so I might have messed a couple of things.

[nvh95]

@srosato Thanks for your kind words. Just do us a favor by updating your PR #125 to reproduce your issue.
Please take your time. We appreciate your help in reporting jest-preview issues 🤝🐛.

[nvh95]

@srosato Hey Steven. We are able to reproduce your issue and we fix it in jest-preview 0.2.8. Can you update jest-preview to the newest version and let us know if the issue has been resolved?

Tips: Your PR #125 is merged. You can verify by your example also.

More context:
This is an issue on Linux, similar issue #138
PR fix this issue: #200

[nvh95]

Since I am using an Nx monorepo, I run jest tests for one app within apps/app1 and the debug() (or auto preview) will output cached files within [project_root]/apps/app1/node_modules/.cache. The problem with the monorepo is that usually there will be one jest.config.js per app/library but the repo has a single package.json file and I run yarn jest-preview on the root of the project, and therefore the preview server assumes [project_root]/node_modules/.cache. I saw that the CACHE_DIRECTORY on previewServer.js and CACHE_FOLDER on the distributed file are hardcoded at the moment. I can contribute if you want, just wanted to get your opinion on how best you would implement changing cache folder directory (automatically detected or through an option at test setup?)

@srosato Do you experience any bugs (other than the automatic refresh) with Jest Preview always using [project_root]/node_modules/.cache/jest-preview as the cache directory? I am happy to have you contribute, I just want to know what problems it will solve after the changes. Thanks.

[github-actions]

This issue has been automatically closed because we haven't received a response from the original author 🙈. This automation helps keep the issue tracker clean from issues that are unactionable. Please reach out if you have more information for us! 💪

[nvh95]

@all-contributors please add @srosato for bug

[allcontributors]

@nvh95

I've put up a pull request to add @srosato! 🎉

[srosato]

@nvh95 So sorry for the long delay, I have been swamped with work and did not setup my notifications correctly. I will try out the new version now.

[srosato]

@nvh95 Ok I have tested on my nextjs-nx example using v0.2.8 (could not correctly setup myself with pnpm on 0.3.1 or main and it works.

I updated jest-preview to the latest version on my nx project and it works if I use yarn nx run my-app:test and it worked!

However, I then went away with my normal routine to run a single test using IntelliJ and this is where I noticed that the node_modules folder gets created within the my-app instead of the project root. I went on the example project and ran the test with IntelliJ (Webstorm) to see the same 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

That might be a separate issue though. I do not want to make any promises because last time I vanished (really sorry 😓), but I want to take a look into it when I get the time because I run single tests all the time instead of watching them

[srosato]

Closing issue as it is fixed. Created a separate issue for Webstorm/IntelliJ problem -> #301.