StoryShots ReferenceError: unknown base.cacheDirectory

[adonis-work]

I get Unknown option: base.cacheDirectory when trying to run StoryShots through Jest on vanilla project from create-react-app with only StoryBook added.

StoryBook works ok with create-react-app.

There was also an error regarding react-test-renderer because installing StoryShots doesn't install it, but that can be fixed with npm install.

 PASS  src\App.test.js
 FAIL  src\storyshots.test.js
  ● Test suite failed to run

    ReferenceError: [BABEL] C:\test\.storybook\config.js: Unknown option: base.cacheDirectory. Check out http://b
abeljs.io/docs/usage/options/ for more information about options.

    A common cause of this error is the presence of a configuration options object without the corresponding preset
 name. Example:

    Invalid:
      `{ presets: [{option: value}] }`
    Valid:
      `{ presets: [['presetName', {option: value}]] }`

    For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets
-options.

      at Logger.error (node_modules/babel-core/lib/transformation/file/logger.js:41:11)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:
20)
      at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)
      at new File (node_modules/babel-core/lib/transformation/file/index.js:135:24)
      at Pipeline.transform (node_modules/babel-core/lib/transformation/pipeline.js:46:16)
      at Object.transformFileSync (node_modules/babel-core/lib/api/node.js:152:10)
      at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/index.js:88:25)
      at Object.<anonymous> (src/storyshots.test.js:3:31)
          at <anonymous>

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.074s
Ran all test suites related to changed files.

[adonis-work]

More details about the first error, it can be reproduced using the examples/cra-storybook in this repo.

https://github.com/storybooks/storybook/tree/master/examples/cra-storybook

After npm install --save-dev @storybook/addon-storyshots and adding the

import initStoryshots from '@storybook/addon-storyshots';

initStoryshots();

to the src/App.test.js I get this error:

$ npm test

> cra-storybook@1.0.0 test C:\tmp\storybook\examples\cra-storybook
> react-scripts test --env=jsdom

 FAIL  src\App.test.js
  ● Test suite failed to run

    Cannot find module 'react-test-renderer' from 'test-bodies.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/test-bodies.js:9:26)

After installing the missing package with

$ npm install --save-dev react-test-renderer

I get the same error:

$ npm test

> cra-storybook@1.0.0 test C:\tmp\storybook\examples\cra-storybook
> react-scripts test --env=jsdom

 FAIL  src\App.test.js
  ● Test suite failed to run

    ReferenceError: [BABEL] C:\tmp\storybook\examples\cra-storybook\.storybook\config.js: Unknown option: base.cacheDirectory. Check out http://babeljs.io/docs/usage/options/ for more information about options.

    A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

    Invalid:
      `{ presets: [{option: value}] }`
    Valid:
      `{ presets: [['presetName', {option: value}]] }`

    For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options.

      at Logger.error (node_modules/babel-core/lib/transformation/file/logger.js:41:11)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
      at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)
      at new File (node_modules/babel-core/lib/transformation/file/index.js:135:24)
      at Pipeline.transform (node_modules/babel-core/lib/transformation/pipeline.js:46:16)
      at Object.transformFileSync (node_modules/babel-core/lib/api/node.js:152:10)
      at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/index.js:88:25)
      at Object.<anonymous> (src/App.test.js:8:193)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:169:7)

[romulo-rosinha]

I worked around this issue by commenting out line 20 of ./node_modules/@storybook/react/dist/server/config/babel.js where the cacheDirectory option is:

module.exports = {
  // Don't try to find .babelrc because we want to force this configuration.
  babelrc: false,
  // This is a feature of `babel-loader` for webpack (not Babel itself).
  // It enables a cache directory for faster-rebuilds
  // `find-cache-dir` will create the cache directory under the node_modules directory.
  // cacheDirectory: findCacheDir({ name: 'react-storybook' }),
  presets: [require.resolve('babel-preset-es2015'), require.resolve('babel-preset-es2016'), require.resolve('babel-preset-stage-0'), require.resolve('babel-preset-react')]
};

[adonis-work]

Thanks for the workaround. 👍

I can confirm that workaround with commenting out cacheDirectory: line works.

Hope we get an official patch soon.

[romulo-rosinha]

Another workaround is sticking to "@storybook/addon-storyshots": "3.0.0", it seems commit da961dc introduced the issue.

[adonis-work]

Using version 3.0.0 causes another error on my side.

 FAIL  src\stories.test.js
  ● Test suite failed to run

    evalmachine.<anonymous>:3
    import { configure } from '@storybook/react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at createScript (vm.js:74:10)
      at Object.runInThisContext (vm.js:116:10)
      at runWithRequireContext (node_modules/@storybook/addon-storyshots/dist/require_context.js:101:37)
      at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/index.js:98:35)
      at Object.<anonymous> (src/stories.test.js:3:31)

[tmeasday]

@adonis-work perhaps try putting a .babelrc at the root of your project (or in the storyshots directory) -- does that help with the above?

[shilman]

Here's where the problem got introduced apparently. In the old code (which looks buggy) babelConfig would have been undefined when passed into transformFileSync:

[tmeasday]

(The above is my theory, thanks for posting @shilman), will try and confirm a bit later on.

[adonis-work]

@tmeasday It helps with the first error but then I get same error as above:

  ● Test suite failed to run

    evalmachine.<anonymous>:3
    import { configure } from '@storybook/react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at createScript (vm.js:74:10)
      at Object.runInThisContext (vm.js:116:10)
      at runWithRequireContext (node_modules/@storybook/addon-storyshots/dist/require_context.js:101:37)
      at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/index.js:100:35)

      at Object.<anonymous> (src/stories.test.js:3:31)

[cmcnamara87]

Having the exact same problems.

[chrisnojima]

I think i have the same issue. It seems like storyshots isn't aware of my webpack config. I get complaints about it not knowing how to load .css files. I have a .storybook/webpack.config.js which works fine for doing a regular storybook run

[tmeasday]

Fixed in 3.1.6!

[ajhyndman]

This still seems to be affecting me, when using 3.1.9.

[tmeasday]

Hi @ajhyndman -- can you open a new issue with a few more details?

[ajhyndman]

Yeah, I'll do a little more investigation. 👍

[ajhyndman]

Whoops, I assumed this was fixed in @storybook/addons-storyshots@3.1.6. I hadn't upgraded @storybook/react to match.

All good now!

[tmeasday]

Great! Thanks

…

On Fri, 21 Jul 2017 at 2:47 pm, Andrew Hyndman ***@***.***> wrote: Whoops, I assumed this was fixed in @storybook/addons-storyshots 3.1.6. I hadn't upgraded @storybook/react to match. All good now! — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#1254 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAIFylIQtIz-Y-Qa9EM-u0Pn23gl0sBoks5sQC17gaJpZM4N2ZpG> .