Storybook: storyshots bug in react with typescript

[diegolacarta]

Issue details

When running storyshots with jest I get this error:

> jest

 FAIL  src/__tests__/storyshots.test.tsx
  ● Test suite failed to run

    Invariant Violation: Target container is not a DOM element.

      at invariant (node_modules/fbjs/lib/invariant.js:42:15)
      at renderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:15180:34)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:15290:12)
      at renderException (node_modules/@storybook/react/dist/client/preview/render.js:66:22)
      at renderPreview (node_modules/@storybook/react/dist/client/preview/render.js:140:12)
      at renderUI (node_modules/@storybook/react/dist/client/preview/index.js:89:26)
      at Object.dispatch (node_modules/redux/lib/createStore.js:186:7)
      at ConfigApi._renderError (node_modules/@storybook/react/dist/client/preview/config_api.js:57:24)
      at render (node_modules/@storybook/react/dist/client/preview/config_api.js:76:19)
      at ConfigApi.configure (node_modules/@storybook/react/dist/client/preview/config_api.js:91:9)
      at evalmachine.<anonymous>:5:22
      at runWithRequireContext (node_modules/@storybook/addon-storyshots/dist/require_context.js:102:3)
      at Object.testStorySnapshots [as default] (node_modules/@storybook/addon-storyshots/dist/index.js:105:35)
      at Object.<anonymous> (src/__tests__/storyshots.test.tsx:4:27)

I've been able to replicate it in the following repo:

https://bitbucket.org/diegolacarta/storyshots-bug/src

After a bit of debugging I saw the error happens here:

.../node_modules/@storybook/react/dist/client/preview/render.js
    _reactDom2.default.unmountComponentAtNode(rootEl);

Any ideas?

Thanks

[KaySackey]

I'm having the same issue. It looks like its related to the preview functionality for story panels. Is that new? I couldn't find documentation of it.

Since I was already mocking out react-dom for other reasons, I was able to fix the tests by using:

jest.mock("react-dom", () => {
    return {
        render: () => null,
        unmountComponentAtNode: () => null,
        findDOMNode: () => { return {} },
    };
});

[philipbeadle]

Thanx for this, I was getting the same thing :)

[arush]

thanks for the workaround.
To clarify, this only works if i put it before the initStoryshots(), but breaks all my other normal jest tests if i put it in setupTests.ts.

I guess we need to make sure the snapshot tests don't rely on react-dom for now. How would we go about fixing this for real so we don't need a workaround?

[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 60 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!

[hoschi]

still a problem

[kgroat]

Please reopen this issue, it's still showing up. The workaround ahead works, but it should not be necessary.

[KaySackey]

I agree. Plus until its fixed in the core, addons or future updates might cause changes that break the work-around.

I wish I had some insight into what's going on with the preview/main stuff, but I haven't seen documentation for that (from a dev perspective) or anything about the channels module that all addons seem to use. Is this all private core functionality, that none of us should worry about?