Unable to get Storyshots working with storybooks/react-native 6.0.1-alpha.7.

[CameronSilverTXI]

Describe the bug
Unable to run story-shots with 6.0.1-alpha.7.

To Reproduce
I followed the guide (which is excellent 👍 ) to add the alpha to my project, and Storybook itself works really well; however story-shots fails.

With story-shots configured to point to .storybook, I get the following error when running yarn test:

FAIL  __tests__/Storyshots.test.ts
  ● Test suite failed to run

    Cannot find module '/path/to/repos/RnSBSixAlphaStoryShots/.storybook' from 'node_modules/@storybook/addon-storyshots/dist/ts3.9/frameworks/react-native/loader.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)
      at configure (node_modules/@storybook/addon-storyshots/dist/ts3.9/frameworks/react-native/loader.js:20:10)
      at Object.load (node_modules/@storybook/addon-storyshots/dist/ts3.9/frameworks/react-native/loader.js:24:5)
      at Object.loadFramework [as default] (node_modules/@storybook/addon-storyshots/dist/ts3.9/frameworks/frameworkLoader.js:26:19)
      at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/ts3.9/api/index.js:42:14)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        5.557 s

If I set story-shots to point to .storybook/main.js, I get the following error when running yarn test:

    TypeError: Cannot read properties of undefined (reading 'initializationPromise')

      1 | import initStoryshots from '@storybook/addon-storyshots';
      2 |
    > 3 | initStoryshots({
        | ^
      4 |   configPath: '.storybook/main.js',
      5 | });
      6 |

      at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/ts3.9/api/index.js:54:44)
      at Object.<anonymous> (__tests__/Storyshots.test.ts:3:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        5.644 s

Code snippets
I created a minimal React-Native app to demonstrate the problem (again, using the guide):

• https://github.com/CameronSilverTXI/RnSBSixAlphaStoryShots

System:

Environment Info:

  System:
    OS: macOS 12.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 17.2.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.1.4 - /usr/local/bin/npm
  Browsers:
    Firefox: 95.0.2
    Safari: 15.2
  npmPackages:
    @storybook/addon-actions: 6.3 => 6.3.13 
    @storybook/addon-controls: 6.3 => 6.3.13 
    @storybook/addon-ondevice-actions: ^6.0.1-alpha.7 => 6.0.1-alpha.7 
    @storybook/addon-ondevice-backgrounds: ^6.0.1-alpha.7 => 6.0.1-alpha.7 
    @storybook/addon-ondevice-controls: ^6.0.1-alpha.7 => 6.0.1-alpha.7 
    @storybook/addon-ondevice-notes: ^6.0.1-alpha.7 => 6.0.1-alpha.7 
    @storybook/addon-storyshots: ^6.4.18 => 6.4.18 
    @storybook/react-native: ^6.0.1-alpha.7 => 6.0.1-alpha.7 

This isn't a huge blocker for us, since Storybook itself is far more beneficial than story-shots; however it's a nice additional test for automation.

Thanks for taking a look!

[dannyhw]

@CameronSilverTXI hey thanks for reporting this and for the feedback. I'm not sure about how to get storyshots working but I will have a go soon.

However please try reducing the version to 6.3 since 6.4 storybook isn't compatible with react native yet, that could be what's causing your issue.

[CameronSilverTXI]

Hi @dannyhw ,

Thanks for the tip about trying version 6.3 of StoryShots - unfortunately it didn't seem to change the outcome.

[ArtisanalPickle]

@CameronSilverTXI I'm experiencing a similar issue an issue as well using @storybook/addon-storyshots version 6.3.13.

My init call:

initStoryshots({
  framework: 'react-native',
  configPath: path.resolve(__dirname, './.ondevice'),
});

My error is different though:

    TypeError: Cannot read properties of undefined (reading 'displayName')

      at getDisplayName (node_modules/@emotion/primitives-core/dist/primitives-core.cjs.dev.js:243:64)
      at Function.Text (node_modules/@emotion/primitives-core/dist/primitives-core.cjs.dev.js:236:41)
      at Object.<anonymous> (node_modules/@storybook/react-native/dist/preview/components/Shared/text.js:2:30)
      at Object.<anonymous> (node_modules/@storybook/react-native/dist/preview/components/StoryListView/StoryListView.js:6:1)
      at Object.<anonymous> (node_modules/@storybook/react-native/dist/preview/components/StoryListView/index.js:1:1)

As a sanity check to see if the options to initStoryshots were being respected I tried the following config:

initStoryshots({
  framework: 'react-native',
  config: ({ configure }) => configure(() => {
    throw 'TEST'
  }, module),
});

But I receive the same error trace, suggesting either it's happening before configuration code is even reached, or that configuration is simply being ignored.

[dannyhw]

I will at some point work on getting snapshots to work, however there are other issues I need to work on first. I will get to it though. If anyone wants to try in the meantime I'd be happy to assist.

[dannyhw]

would a storybook/testing-react-native cover some of the same usecase? or is the snapshot functionality more important?

[jorihardman]

Hey @dannyhw @storybook/addon-storyshots@"~6.3.0 is working for me with @storybook/[email protected], though it could definitely use some updated documentation for react-native.

My jest setup is using the expo/jest preset. It is using expo's default babel config and looks like this:

// jest.config.js

// https://docs.expo.dev/guides/testing-with-jest/#jest-configuration
const untranspiledModulePatterns = [
  "(jest-)?react-native",
  "@react-native(-community)?",
  "expo(nent)?",
  "@expo(nent)?/.*",
  "@expo-google-fonts/.*",
  "react-navigation",
  "@react-navigation/.*",
  "@unimodules/.*",
  "unimodules",
  "sentry-expo",
  "native-base",
  "react-native-svg",
  "@storybook/react-native",
  "@storybook/addon",
  "@?dripsy",
  "solito",
  "moti",
]

const nodeModulesIgnorePattern = `node_modules/(?!(${untranspiledModulePatterns.join(
  "|"
)}))`

module.exports = {
  preset: "jest-expo",
  transformIgnorePatterns: [nodeModulesIgnorePattern, "\\.pnp\\.[^\\/]+$"],
  timers: "fake",
  transform: {
    "^.+\\.(js|ts|tsx)$": ["babel-jest", { cwd: __dirname }],
  },
}

The important bit here is that both @storybook/react-native and a few of the @storybook/addon-* modules require transformation by babel. You may need to add other modules to untranspiledModulePatterns.

I then include my stories like this:

// __tests__/storyshots.test.js
import initStoryshots from "@storybook/addon-storyshots"
import path from "path"

require(path.join(__dirname, "../.storybook/storybook.requires.js"))

initStoryshots({
  framework: "react-native",
  configPath: path.join(__dirname, "../.storybook/main.js"),
})

The important bit here is to require the storybook.requires.js file which is autogenerated. This will allow storyshots to actually find your stories. My stories then pass using the default renderer.

[dannyhw]

@jorihardman hey thanks for sharing! Sorry about the lack of documentation, I've never really tried to use storyshots so I wouldn't have known where to start. This has helped me to understand a lot better the issue.

I'll be happy to work on improving the experience with storyshots in the future especially now that I understand it a bit better.

Thanks again for looking in to this. If you have suggestions on how to improve documentation or make the setup easier then I'd be happy to review/accept PRs and if not I can take on your input and add it to the TODO's 🙂