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

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)

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

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