Unit tests for Storybooks failing in React Native 0.73.1

[LaikaTheSpaceDog]

Describe the bug In our app we have some unit tests to check that all of our Storybooks are rendering correctly. We have recently been updating our React Native version to the latest version (0.73.1), but since then our unit test has begun failing with this error:

FAIL __tests__/storybooks/index.test.js
  ● Test suite failed to run

    TypeError: Cannot set properties of undefined (setting 'onkeydown')

      37 | });
      38 |
    > 39 | configure(() => {
         |          ^
      40 |   require('../../storybook/stories');
      41 | }, module);
      42 |

      at PreviewWeb.setupListeners (node_modules/@storybook/preview-web/dist/cjs/PreviewWeb.js:145:29)
      at PreviewWeb.setupListeners [as initialize] (node_modules/@storybook/preview-web/dist/cjs/Preview.js:137:12)
      at initialize (node_modules/@storybook/react-native/dist/index.js:1545:17)
      at Object.<anonymous> (__tests__/storybooks/index.test.js:39:10)
      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)

To Reproduce Implement test form snippet below in a RN app (version 0.73.1) using storybooks

Expected behavior Test should run rather than fail

Code snippets Here is a basic reproduction of the test we are running that is failing:

// Always need to import this at every entry point, otherwise some custom yup validators fail.
import '~/yup-methods';

import { NativeModules } from 'react-native';
import {
  getStorybook,
  configure,
  getStorybookUI,
} from '@storybook/react-native';
import { render } from '@testing-library/react-native';

// Need to mock a bunch of things to render the stories within Jest.
jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter');
jest.mock('react-native-video', () => 'Video');

global.fetch = jest.fn();
NativeModules.RNViewShot = jest.fn();
jest.mock('react-native-share', () => ({
  Social: {},
}));

jest.mock('react-native-keyboard-aware-scroll-view', () => {
  const KeyboardAwareScrollView = require('react-native').ScrollView;
  return { KeyboardAwareScrollView };
});

jest.mock('react-native-dropdown-picker', () => {
  const MockedDropdownPicker = () => {};
  return jest.fn(() => MockedDropdownPicker);
});

configure(() => {
  require('../../storybook/stories');
}, module);

getStorybookUI({
  asyncStorage: null,
  // Must disable, otherwise Storybook crashes in Jest.
  disableWebsockets: true,
});

describe('Storybook', () => {
  getStorybook().forEach((storyFile) => {
    const storyFileName = storyFile.fileName.split('/storybook/stories/')[1];

    describe(storyFile.kind + ': ' + storyFileName, () => {
      storyFile.stories.forEach((story) => {
        //Disable test for appointment confirmation email preview as html causes crash
        it(`${story.name} render correctly`, () => {
          expect(() => render(story.render())).not.toThrow();
        });
      });
    });
  });
});

System:

Storybook Environment Info:

  System:
    OS: macOS 14.2
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm <----- active
  Browsers:
    Chrome: 120.0.6099.129
    Safari: 17.2
  npmPackages:
    @storybook/react-native: ^6.5.6 => 6.5.7 
    @storybook/react-native-server: ^5.3.23 => 5.3.23 

[dannyhw]

Could you send all the versions for storybook packages? Also would make sense to align the react-native-server version with the react native package version.

Also if you've updated from 5.3 to 6.5 there are breaking changes that you would need to manually resolve. I can send you the guide if thats the case.

[LaikaTheSpaceDog]

Apologies, we were indeed running the same versions for both the @storybook/react-native and @storybook/react-native-server packages but in the process of debugging I'd downgraded the react-native-server app and forgot to revert the change. However, the issue I described does still present when both are on version 6.5.6.

Also those are the only two storybook packages we are using in the app.

[dannyhw]

In v7 theres a new way to run tests on stories, see my examples in https://github.com/storybookjs/react-native/pull/551