Storybook: Jest addon not hot reloading test results

[Jipperism]

Describe the bug
Jest test results are not hot reloaded in the 'Tests' addon tab. Manual refreshing required to see updated test results.

To Reproduce
Steps to reproduce the behavior:

• Create CRA app
• Setup storybook and jest addon as described in respective projects
• Setup command in package.json
"test": "react-scripts test", "test:generate-output": "react-scripts test --json --outputFile=.storybook/jest-test-results.json --silent --verbose=false || true", "prestorybook:dev": "clear && echo \"DOING FIRST TEST RUN\" && CI=true yarn run test:generate-output", "storybook": "start-storybook -p 9009 -s public", "storybook:dev": "clear && concurrently -n storybook,jest -k \"yarn run storybook --quiet\" \"yarn run test:generate-output\""
• Create test
• yarn storybook:dev

Expected behavior
Run tests and have hot reloading in Tests tab, as displayed in the animated gif in the jest-addon README.

System:

• OS: Ubuntu
• Browser: Safari
• Framework: React
• Addons: addon-jest
• Version: 4.1.6

[mrmckeb]

Hi @Jipperism, this might be because CRA's webpack config only watches src.

Could you try, as a test, to output your file to that folder? Once you've reported back, we can take a look at solutions.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[Jipperism]

I have outputted the test results to src/stories/test-results.json but it still doesn't pick them up. Webpack does indicate that it's rebuilding as soon as the test results are outputted, by giving the following message:

webpack building...
webpack built bf0bddfa4c5e080ac155 in 730ms                                                                             
webpack building...
webpack built bf0bddfa4c5e080ac155 in 224ms    

When I refresh the page, I can see the new test results. I have also tried to run them side-by-side in seperate processes instead of using concurrently, but it has the same effect.

[mrsufgi]

I have tried that with version 5.0-rc.5, same results. webpack indicates updates but tests result don't change in the addon

[ndelangen]

Sounds like a bug!

Would love some help getting this fixed! I think it's actually just not re-rendering the component for some reason.

Would you have the opportunity to assist fixing this issue @mrsufgi , @Jipperism or @mrmckeb
👏 ?

[mrsufgi]

I would be happy to help, I'll create a CRA + Storybook repo and try to recreate it in an isolated environment and post back asap

[ndelangen]

@mrsufgi I can give you access to the repo as well, and you'll be able to work on it like that, if that helps. Let me know. 👍

[alflennik]

I'm running a monorepo with addon-jest and I'm not getting hot reloading either.

OS: MacOS
Browser: Chrome, Safari, Firefox
Framework: React
Addons: addon-jest
Version: 5.0.0-rc.7

@mrsufgi Thanks for volunteering to create a repro repo.

[mrsufgi]

Sorry for the delay guys, I'm swamped at work. I will try find some time this weekend

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[sairus2k]

Can't reproduce this issue with storybook 5.0.6
Repro repo https://github.com/sairus2k/storybook-jest
Just run npm run storybook:dev and change App.test.js — it works just fine.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[sergej-s]

In case someone stumble upon this issue: hmr does work but not in the right order. When the story/test file is being changed then hmr hits updating of storybook immediately without waiting for jest to complete testing. So test-addon ends up with old jest-test-results.json albeit is reloaded successfully. After jest completed testing hmr tries to do reloading again for the changed jest-test-results.json file and for components that depend on it. Nothing seems to depend on jest-test-results.json if test-addon is configured in config.js so test tab stays unreloaded. The only way I found to solve the issue is that jest-test-results.json should be explicitly imported in test files as a dependency:

If there is a better way plz msg here :)

[NickSofology]

I'm on 5.1.9 and doing what you suggest @sergej-s is not working for me. Nothing changes.

[shilman]

@CodeByAlex Any chance you can look at this as part of your work on the Jest addon?

[CodeByAlex]

@NickSofology, is this still only related to CRA?

[NickSofology]

Perfectly honest I can't actually remember. It's been a while since I created this project, it may well have been. Sorry that's not massively helpful I know.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[alflennik]

I just confirmed that this is still happening on v5.1.9.

@sergej-s Unfortunately your fix isn't working for me.

@CodeByAlex it's not related to CRA, my project has this issue and I'm not using CRA.

[CodeByAlex]

@alflennik Thanks for the update! Is this reproducible in any of the example projects? Or could you provide a reproduction repo? It hot reloads in the official storybook example

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!