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

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® Core™ 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

[shilman]

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

[alex198710]

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