storybook: TypeError: require(...) is not a function in initStoryshots()

I was able to fix this on my install. It was happening because I had jest@26.0.0. installed when storybook only supports up to 25.0.0 as pointed out in https://stackoverflow.com/questions/61706963/typeerror-require-requireactual-is-not-a-function.

While this is fixed in #10642 and part of a beta release for now I downgraded my jest — npm install jest@25.0.0 --save-dev — and everything is working fine.

@shilman It sure is a great feature GitHub added to help reduce issue noise… which unfortunately is completely undone when people use stale bot, which doesn’t notice or care about them at all and forces users to focus on making comments to shoo it away, instead of just using the reactions… 😞

Up

I’ve tried upgrading to @storybook/vue": "^6.0.0-beta.31" but another issue came up:

 /app/node_modules/@storybook/addon-storyshots/dist/frameworks/frameworkLoader.ts:2
    import fs from 'fs';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1258:14)
      at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/api/index.js:41:41)

not sure if it’s caused by the same problem. Tried both jest 25 and 26.

Can’t you just change require.requireActual to jest.requireActual? (jest.requireActual is already present in jest@25)

Was having same issue, fixed by downgrading jest@25. Storybook is 6-beta.29

Update: Okay, I solved it.

@storybook/core/dist/client/preview/loadCsf.js, ln. 149:

          try {
            var fileExports = req(filename);
            currentExports.set(fileExports, // todo discuss: types infer that this is RequireContext; no checks needed?
            // NOTE: turns out `babel-plugin-require-context-hook` doesn't implement this (yet)
            typeof req.resolve === 'function' ? req.resolve(filename) : filename);
          } catch (error) {
             console.error(error)
             //_clientLogger.logger.warn("Unexpected error: ".concat(error));
          }

Once I replaced _clientLogger.logger.warn with a standard console.error, I got a lovely expanded Jest stack trace, showing that it was getting confused by my .scss files. npm install identity-obj-proxy, add following to Jest config:

    "moduleNameMapper": {
      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
    }

Everything works now. I feel very face-palm-y now.

tl;dr — please stop using _clientLogger.logger.warn in places where Jest config exceptions might get thrown. The custom logger ate all the useful information in that stack trace. I could have solved this WAY sooner had I gotten the actual Jest error.

The future of storyshots is the test-runner: https://storybook.js.org/docs/react/writing-tests/test-runner#page-top

And use the play function for expectations: https://storybook.js.org/docs/react/writing-stories/play-function#page-top

We will not be making any improvement / changes to storyshots.

@AnnaYuS managed to fix that issue by adding the following configuration to jest.config.js:

module.exports = {
  ...
+ transformIgnorePatterns: ['node_modules/(?!(@storybook/addon-storyshots)/)'],
}

Looks like something might be off with the way that addon-storyshots is transpiled? See https://jestjs.io/docs/en/configuration#transformignorepatterns-arraystring

It finally worked with "@storybook/vue": "^6.0.2", "@storybook/addon-storyshots": "^6.0.10", "jest": "^26.0.1" 🎉 The only problem I had to solve was with importing global less styles in preview.js, had to add a stub for less/css imports in jest config:

"^.+\\.(css|less)$": "<rootDir>/tests/jest/CSSStub.js"

Hmm. I just tried upgrading 5.3 to Jest 26 and everything seems to be broken. My advice is to upgrade to SB6. We’re in Beta now and making good progress towards an RC…

Same issue. Mine throws a TypeError:

TypeError: require.requireActual is not a function