Storybook: Addon-storyshot with create-react-app and Stories2SnapsConverter, context.fileName is null

[alex198710]

Describe the bug
Hello, I tried for weeks now but I cannot make the addon-storyshots work with create-react-app and the Stories2SnapsConverter. I got the following error:

console.warn node_modules/@storybook/addon-storyshots/dist/Stories2SnapsConverter.js:44
    Storybook was unable to detect filename for stories of kind "My/Story".
    To fix it, add following to your jest.config.js:
        transform: {
          // should be above any other js transform like babel-jest
          '^.+\\.stories\\.js$': '@storybook/addon-storyshots/injectFileName',
        }

With create-react-app, I had to put this jest config inside my package.json like this:

"jest": {
    "transform": {
      "^.+\\.stories\\.tsx$": "@storybook/addon-storyshots/injectFileName"
    }
  }

But I got the same error. Any idea ?

Here is my shoryshot file: (copied from https://github.com/storybookjs/storybook/tree/next/addons/storyshots/storyshots-core)

import initStoryshots, { Stories2SnapsConverter } from "@storybook/addon-storyshots";
import { mount } from "enzyme";
import toJson from "enzyme-to-json";

// Runner
initStoryshots({
  asyncJest: true, // this is the option that activates the async behaviour
  test: ({
    story,
    context,
    done // --> callback passed to test method when asyncJest option is true
  }) => {
    const converter = new Stories2SnapsConverter();
    const snapshotFilename = converter.getSnapshotFileName(context);
    const storyElement = story.render();

    // mount the story
    const tree = mount(storyElement);

    // wait until the mount is updated, in our app mostly by Relay
    // but maybe something else updating the state of the component
    // somewhere
    const waitTime = 1;
    setTimeout(() => {
      if (snapshotFilename) {
        expect(toJson(tree.update())).toMatchSpecificSnapshot(snapshotFilename);
      }

      done();
    }, waitTime)
  },
  // other options here
});

My main.js

module.exports = {
  stories: ["../stories/**/*.stories.tsx"],
  addons: [
    "@storybook/addon-actions",
    "@storybook/addon-links",
    "@storybook/addon-notes",
    "@storybook/preset-create-react-app",
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
      }
    }
  ]
}

And my webpack.config.js:

module.exports = ({ config, mode }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [['react-app', { flow: false, typescript: true }]],
        },
      },
      {
        loader: require.resolve('react-docgen-typescript-loader'),
      },
    ],
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

I have the 5.3.18 version of Storybook

Expected behavior
The fileName should be injected into the context before passed to Stories2SnapsConverter

System:
Environment Info:
System:
OS: macOS 10.15.4
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Binaries:
Node: 10.15.1 - /usr/local/bin/node
npm: 6.14.3 - /usr/local/bin/npm
Browsers:
Chrome: 80.0.3987.163
Firefox: 69.0.3
Safari: 13.1
npmPackages:
@storybook/addon-actions: ^5.3.18 => 5.3.18
@storybook/addon-docs: ^5.3.18 => 5.3.18
@storybook/addon-links: ^5.3.18 => 5.3.18
@storybook/addon-notes: ^5.3.18 => 5.3.18
@storybook/addon-storyshots: ^5.3.18 => 5.3.18
@storybook/addon-storyshots-puppeteer: ^5.3.18 => 5.3.18
@storybook/addons: ^5.3.18 => 5.3.18
@storybook/client-api: ^5.3.18 => 5.3.18
@storybook/preset-create-react-app: ^2.1.1 => 2.1.1
@storybook/react: ^5.3.18 => 5.3.18

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

[shilman]

@Hypnosphi would it be possible for you take a look at this?

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

[Geril]

A little "hackish" fix but you can add fileName: __filename to story params.

export default {
  title: 'Components Story',
  component: Component,
  parameters: {
    fileName: __filename
  }
}

[alex198710]

Thank you @Geril, yes I ended up with this temporary solution waiting for an official fix.

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

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