Storybook: Cannot read property 'displayName' of undefined

[stereodenis]

Describe the bug

Test suite failed to run

    TypeError: Cannot read property 'displayName' of undefined

      1 | import initStoryshots from '@storybook/addon-storyshots'
      2 | 
    > 3 | initStoryshots({
        |               ^
      4 |   framework: 'react-native',
      5 | })
      6 | 

      at getDisplayName (node_modules/@emotion/primitives-core/dist/primitives-core.cjs.dev.js:232:64)
      at Function.createStyledComponent (node_modules/@emotion/primitives-core/dist/primitives-core.cjs.dev.js:225:41)
      at Object.<anonymous> (node_modules/@storybook/react-native/dist/preview/components/StoryListView/index.js:110:20)
      at Object.<anonymous> (node_modules/@storybook/react-native/dist/preview/components/OnDeviceUI/index.js:46:45)
      at Object.<anonymous> (node_modules/@storybook/react-native/dist/preview/index.js:58:42)
      at Object.<anonymous> (node_modules/@storybook/react-native/dist/index.js:12:39)
      at Object.load (node_modules/@storybook/addon-storyshots/dist/frameworks/rn/loader.js:36:29)
      at loadFramework (node_modules/@storybook/addon-storyshots/dist/frameworks/frameworkLoader.js:31:17)
      at Object.testStorySnapshots [as default] (node_modules/@storybook/addon-storyshots/dist/api/index.js:53:36)
      at Object.<anonymous> (__tests__/storyshots.spec.ts:3:15)

System:

• OS: MacOS
• Framework: React Native 0.59.10
• Addons: Storyshots
• Version:
  "@storybook/addon-storyshots": "5.1.9"
  "@storybook/react-native": "5.1.9"

[stereodenis]

@benoitdion @Gongreg
workaround
node_modules/@emotion/primitives-core/dist/primitives-core.cjs.dev.js:221

node_modules/@storybook/react-native/dist/preview/components/StoryListView/index.js:111

[stereodenis]

if I change behavior to this

var getDisplayName = function getDisplayName(primitive) {
  if (primitive === undefined) { return 'Styled' }
  return typeof primitive === 'string' ? primitive : primitive.displayName || primitive.name || 'Styled';
};

I got this error

Test suite failed to run

node_modules/react-native-swipe-gestures/index.js:3
    import React, {Component} from 'react';
           ^^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (node_modules/@storybook/react-native/dist/preview/components/OnDeviceUI/navigation/index.js:38:56)

[stereodenis]

Then, I've changed my jest.config.js

transform: {
    "^.+\\.(t|j)sx?$": "ts-jest"
  }

And got this

console.error node_modules/react/cjs/react.development.js:188
    Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

    Check the render method of `Presenter`.
        in Presenter

[DuncanLewis]

@stereodenis I appear to be facing this same issue - how was it resolved for you?

[cam-shaw]

I've run into this issue as well. @stereodenis since you've closed the problem, would you be able to explain what fixed it please?

[pak11273]

Check the components you are importing. If they are undefined then you will get this error.