Storyshots: running initStoryshots fails with "cannot find property 'name' of undefined"

[jamieshark]

If you are reporting a bug or requesting support, start here:

Bug or support request summary

Have been trying to upgrade from Storybook 5.1.x to 5.3.x and getting an error with running initStoryshot with a custom test function. The last known working version was 5.1.10

Steps to reproduce

Running the test with yarn test does not seem to reach past initStoryshot.

It should also be noted that this is from a monorepo, so it might be that there is something up with yarn workspaces but was wondering if there was something obvious I missed. Looking at the stack trace, it looks like it's trying to load the angular framework, but we are using react. I've tried to add { framework: 'react' } to shortcircuit this, but that didn't have any perceived effect and I received the same stack trace.

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react 5.3.0+
• @storybook/addon-storyshots 5.3.0+

Env Info

System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
  Binaries:
    Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 80.0.3987.163
    Firefox: 72.0.2
    Safari: 13.1
  Monorepos:
    Yarn Workspaces: 1.16.0

Screenshots / Screencast / Code Snippets (Optional)

Test code:

initStoryshots({
  test: renderWithOptions({
    renderer: (story: JSX.Element) => {
        // stuff and stuff
    },
  }),
});

Error stack:

  ● Test suite failed to run

    TypeError: Cannot read property 'name' of undefined

      49 |  * custom test function that doesn't save snapshots.
      50 |  */
    > 51 | initStoryshots({
         | ^
      52 |   framework: 'react',
      53 |   test: renderWithOptions({

      at Object.<anonymous>.exports.fromCallback (../node_modules/universalify/index.js:16:26)
      at Object.<anonymous> (../node_modules/fs-extra/lib/json/jsonfile.js:8:13)
      at Object.<anonymous> (../node_modules/fs-extra/lib/json/index.js:4:18)
      at Object.<anonymous> (../node_modules/fs-extra/lib/index.js:12:3)
      at Object.<anonymous> (../node_modules/@storybook/core/dist/server/build-static.js:13:39)
      at Object.<anonymous> (../node_modules/@storybook/core/server.js:3:21)
      at Object.<anonymous> (../node_modules/@storybook/addon-storyshots/dist/frameworks/configure.js:8:16)
      at Object.<anonymous> (../node_modules/@storybook/addon-storyshots/dist/frameworks/angular/loader.js:20:35)
      at ../node_modules/@storybook/addon-storyshots/dist/frameworks/frameworkLoader.js:18:41
          at Array.map (<anonymous>)
      at getLoaders (../node_modules/@storybook/addon-storyshots/dist/frameworks/frameworkLoader.js:18:10)
      at Object.loadFramework [as default] (../node_modules/@storybook/addon-storyshots/dist/frameworks/frameworkLoader.js:21:19)
      at testStorySnapshots (../node_modules/@storybook/addon-storyshots/dist/api/index.js:48:39)
      at Object.<anonymous> (gamma/src/__tests__/storybook.tests.tsx:51:1)

[shilman]

that's pretty weird. is @storybook/angular installed anywhere in your repo?

[jamieshark]

@shilman: Nope, no mention or usage of angular or @storybook/angular at all in our entire repo.

My thinking is that maybe it has something to do with the way yarn workspaces are working? If you have an idea of how I might be able to debug this locally, I'm open to digging into it, but I'm mainly confused as to why the direct argument for the framework isn't working either.

If it helps, I've tried to install version 6.0.0-alpha.40 and I get a different error and stack trace:

● Test suite failed to run

    TypeError: Cannot read property 'createElement' of undefined

      49 |  * custom test function that doesn't save snapshots.
      50 |  */
    > 51 | initStoryshots({
         | ^
      52 |   framework: 'react',
      53 |   test: renderWithOptions({
      54 |     // @ts-ignore `renderWithOptions` typing doesn't match documentation

      at Object.<anonymous> (../node_modules/@storybook/core/dist/client/preview/NoDocs.js:27:43)
      at Object.<anonymous> (../node_modules/@storybook/core/dist/client/preview/StoryRenderer.js:36:15)
      at Object.<anonymous> (../node_modules/@storybook/core/dist/client/preview/start.js:24:22)
      at Object.<anonymous> (../node_modules/@storybook/core/dist/client/preview/index.js:12:37)
      at Object.<anonymous> (../node_modules/@storybook/core/dist/client/index.js:9:39)
      at Object.<anonymous> (../node_modules/@storybook/core/client.js:1:45)
      at Object.<anonymous> (../node_modules/@storybook/react/dist/client/preview/index.js:10:15)
      at Object.<anonymous> (../node_modules/@storybook/react/dist/client/index.js:61:16)
      at Object.load (../node_modules/@storybook/addon-storyshots/dist/frameworks/react/loader.js:23:29)
      at Object.loadFramework [as default] (../node_modules/@storybook/addon-storyshots/dist/frameworks/frameworkLoader.js:26:19)
      at testStorySnapshots (../node_modules/@storybook/addon-storyshots/dist/api/index.js:48:39)
      at Object.<anonymous> (gamma/src/__tests__/storybook.tests.tsx:51:1)

But now my stories won't render and have the error Cannot Read property 'name' of undefined

[shilman]

That’s pretty weird. The framework detection code in storyshots loops over the supported frameworks and angular is the first one, so that’s why it’s possible even when @storybook/angular is not installed. But what that framework check is passing for angular is a mystery. When you want to debug something like this in a project outside of the storybook monorepo, usually the fastest way is to read through the package source in the monorepo and then insert console.log statements into the node_modules to see what’s going on

[stale]

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]

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!

[jamieshark]

Just to circle back on this, it turns out that this issue was the case of a jest config value and some interesting require behavior.

Basically what was happening was with our jest config, we had the following entry:

module.exports = {
  // more stuff ...
  moduleDirectories: ['node_modules', '.', 'resources'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'coffee', 'node'],
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|svg|eot|ttf|woff|gif)$':
      '<rootDir>/common/__mocks__/fileMock.js',
  },
  transform: {
    '^.+\\.(ts|tsx|js)$': 'babel-jest',
  },
  // etc etc
};

You'll notice that we have . as an entry in the moduleDirectories array, which essentially allows any directory to be resolved as a module. Through a lot of debugging through linking and unlinking a local version of @storybook, we found that entry was causing @storybook/addon-storyshots to resolve react to the module as @storybook/react rather than the actual react package.

Basically the "react" referenced here is resolving to itself instead of actual react, and so when rendering stories via initiStoryshots, it was trying to use a very different version of "react" to render. Once removing the . in moduleDirectories, initStoryshots ran as expected. I know this is kind of an unusual case, but thought to update here in case anyone else was pulling their hair out trying to figure out obscure errors! 🙂