storybook: CSF stories does not work correctly with addon-storyshots multiSnapshotWithOptions option

Describe the bug I am trying out the beta for 5.2 and have converted several stories over to CSF. What i’ve found is that when running storyshots, all of the stories in the CSF style end up using the generic snapshot path/file instead of creating the snapshots adjacent to the stories.

To Reproduce Steps to reproduce the behavior:

Run jest with the storyshots add on enabled and the “–ci” flag
Tests will fail because the snapshots are not in the expected location so are being considered new

Expected behavior The story should use the same location as before to store snapshots.

Code snippets

// story-snapshots.test.ts
import initStoryshots, { multiSnapshotWithOptions } from "@storybook/addon-storyshots";

initStoryshots({
  test: multiSnapshotWithOptions({})
});

System: OS: Windows 10 CPU: (8) x64 Intel® Core™ i7-6820HQ CPU @ 2.70GHz Binaries: Node: 10.15.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.16.0 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.10.0 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: 42.17134.1.0 npmPackages: @storybook/addon-actions: 5.2.0-beta.23 => 5.2.0-beta.23 @storybook/addon-contexts: 5.2.0-beta.23 => 5.2.0-beta.23 @storybook/addon-docs: 5.2.0-beta.23 => 5.2.0-beta.23 @storybook/addon-knobs: 5.2.0-beta.23 => 5.2.0-beta.23 @storybook/addon-storyshots: 5.2.0-beta.23 => 5.2.0-beta.23 @storybook/addon-storyshots-puppeteer: 5.2.0-beta.23 => 5.2.0-beta.23 @storybook/addon-viewport: 5.2.0-beta.23 => 5.2.0-beta.23 @storybook/addons: 5.2.0-beta.23 => 5.2.0-beta.23 @storybook/preset-scss: ^1.0.2 => 1.0.2 @storybook/react: 5.2.0-beta.23 => 5.2.0-beta.23 @storybook/source-loader: 5.2.0-beta.23 => 5.2.0-beta.23 @storybook/theming: 5.2.0-beta.23 => 5.2.0-beta.23

Additional context I did some tracing and the problem appears to be the the filename for the story is undefined when the snapshot is being validated. I’ve traced where the filename is being determined:

https://github.com/storybookjs/storybook/blob/0083afde5fee9e7bedb8a8c565f8a72251247b6a/lib/client-api/src/client_api.ts#L187

For CSF stories m is true here instead of an object. I believe the source may be this line here:

https://github.com/storybookjs/storybook/blob/b6282a8281de8320753054ea56860726a13c5043/lib/core/src/client/preview/start.js#L374

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 17 (13 by maintainers)

Most upvoted comments

Workaround: add {fileName: __filename} parameters to your CSF stories:

export default {
  title: 'My Stories',
  parameters: {fileName: __filename}
}

UPD: Until #8000 gets merged and released, you can also copy injectFileName.js to your project and include it in your jest.config.js like that:

transform: {
  // should be above any other js transform like babel-jest
  '^.+\\.stories\\.js$': '<rootDir>/path/to/injectFileName',
}

This will add parameters.fileName automatically

Hypnosphi on Sep 5, 2019

Yes I do

  // jest.config.js
  ...
  transform: {
     "^.+\.stories\.jsx?$": "@storybook/addon-storyshots/injectFileName",
    "^.+\\.js$": "babel-jest",
  },
  ...

    "babel-jest": "^24.5.0",
    "jest": "^24.7.0",
    "jest-haste-map": "^24.7.1",
    "jest-resolve": "^24.7.1",

Maybe there is something that I should change additionally for 5.3?

mazikwyry on Oct 11, 2019

@mazikwyry Ugh, this file got filtered out of the publish. Sorry about that. I’ve fixed it here and will re-publish once it’s merged: https://github.com/storybookjs/storybook/pull/8354

cc @ndelangen @Hypnosphi

shilman on Oct 9, 2019