Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unit tests for Storybooks failing in React Native 0.73.1 #533

Open
LaikaTheSpaceDog opened this issue Jan 3, 2024 · 3 comments
Open

Unit tests for Storybooks failing in React Native 0.73.1 #533

LaikaTheSpaceDog opened this issue Jan 3, 2024 · 3 comments

Comments

@LaikaTheSpaceDog
Copy link

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
Copy link
Member

dannyhw commented Jan 3, 2024

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
Copy link
Author

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
Copy link
Member

dannyhw commented Feb 10, 2024

In v7 theres a new way to run tests on stories, see my examples in #551

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants