Storybook: Empty Snapshots (null) with Storyshots

[aralroca]

Describe the bug
After configure the addon-storyshots with React 16.8.3. Snapshots are created, but when I enter inside the snapshot file to see what the plugin did, the snapshots are empty:

Example:

exports[`Storyshots Components.Checkbox simple checkbox 1`] = `null`;

And always null, for all the stories...

To Reproduce

I configured the plugin in this way:

Create file: .storybook/__tests__/stories.test.js with this content:

import initStoryshots from '@storybook/addon-storyshots'

initStoryshots({
  framework:'react',
  storyRegex: /.*\.stories\.js/,
})

This file is running as an independent test suite when all the tests are running.

Then, to mockup the rest of plugins, I created another file named setup-tests.js:

jest.mock('@storybook/addon-info', () => ({
  withInfo: () => storyFn => storyFn,
  setDefaults: () => {},
}))

jest.mock('@storybook/addon-knobs/react', () => ({
  text: (_, v) => v,
  boolean: (_, v) => v,
  number: (_, v) => v,
  color: (_, v) => v,
  array: (_, v) => v,
  object: (_, v) => v,
  select: (_, __, v) => v,
}))

jest.mock('@storybook/addon-knobs', () => ({
  withKnobs: () => storyFn => storyFn,
}))

jest.mock('@storybook/addon-options', () => ({
  withOptions: () => storyFn => storyFn,
}))

jest.mock('@storybook/addon-backgrounds', () => ({
  withBackgrounds: () => storyFn => storyFn,
}))

and I added to package.json:

"setupFilesAfterEnv": [
    "<rootDir>/setup-tests.js"
]

My .storybook/config.js is the next one:

import { configure, setAddon, addDecorator } from '@storybook/react'
import requireContext from 'require-context.macro'
import JSXAddon from 'storybook-addon-jsx'
import { withKnobs } from '@storybook/addon-knobs'
import { withBackgrounds } from '@storybook/addon-backgrounds'
import { withOptions } from '@storybook/addon-options'
import { withI18n } from './i18n'

addDecorator(withOptions({
  name: 'Vinissumus',
  goFullScreen: false,
  showStoriesPanel: true,
  showAddonPanel: true,
  hierarchySeparator: /\./,
}))
addDecorator(withKnobs({ escapeHTML: false }));
addDecorator(withI18n)
addDecorator(withBackgrounds([
  { name: 'White', value: '#fff', default: true },
  { name: 'Grey', value: '#f6f6f6'},
  { name: 'Black', value: '#000' },
  { name: 'Ivory', value: '#ebe9d5'}
]))
setAddon(JSXAddon);

const req = requireContext('../core/client', true, /.stories.js$/);

function loadStories() {
  req.keys().forEach(file => req(file));
}

configure(loadStories, module);

Babel

{
  "env":{
    "development": {
      "presets": ["next/babel"]
    },
    "production": {
      "presets": ["next/babel"]
    },
    "test": {
      "plugins": [
        ["transform-es2015-modules-commonjs"],
        "babel-plugin-macros"
      ],
      "presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]]
    }
  }
}

Expected behavior

I expect to create snapshots with valuable content instead of null.

Addons

    "@storybook/addon-backgrounds": "4.1.13",
    "@storybook/addon-storyshots": "4.1.13",
    "@storybook/addon-info": "4.1.13",
    "@storybook/addon-knobs": "4.1.13",
    "@storybook/addon-options": "4.1.13",
    "@storybook/addons": "4.1.13",
    "@storybook/react": "4.1.13",
    "@storybook/storybook-deployer": "2.8.1",

[tomekbuszewski]

I am experiencing the same problem, using version 5.0.1.

[aralroca]

I guess it is related to global decorators. @tomekbuszewki have you already fixed it?

[tomekbuszewski]

@aralroca Yes, I did, thanks for asking. Actually it was related to using ts-jest. Without it, everything is going well.

[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 30 days. Thanks!

[christophediprima]

@aralroca I am experiencing the same issue, did you find a solution?

[jwm0]

If you are having this issue it's probably due to one of the global decorators. I tried removing one by one and for me the issue was with storybook-addon-styled-component-theme decorator. Once removed, the snapshots were captured correctly.

[jamesg1]

@jwm0 Thanks for raising, any alternatives to storybook-addon-styled-component-theme? Did you switch to https://github.com/ticketmaster/storybook-styled-components?

This maybe related https://github.com/storybookjs/storybook/issues/3246#issuecomment-374790016 where the decorator needs to be called before require.context

[naomiaro]

Will this only work if I stop using storybook-addon-styled-component-theme? I'm still seeing this problem today. I don't use require.context as the newer main.ts format was supposed to be good enough as seen in the README.