import { Meta } from '@storybook/addon-docs'; import { MessageStrip } from '@ui5/webcomponents-react'; import { Footer, TableOfContent } from '@sb/components';

Cypress Test Setup

UI5 Web Components for React is using Cypress as preferred testing framework. There you have the options of testing components only or create End-to-End tests for your application.

Configuration

When launching Cypress the first time you're guided through the setup, which then will create a configuration file for you. You can use any configuration you like, but since we're heavily relying on web-components, we recommend traversing the shadow DOM per default:

includeShadowDom: true

Here you can find the Cypress Quickstart tutorial for React.

ThemeProvider

UI5 Web Components for React components have to be wrapped inside a ThemeProvider, depending on your test setup (especially for component-testing) it might prove beneficial creating a custom mount command, that includes the ThemeProvider.

JavaScript:

/**
 * Cypress mount with ThemeProvider
 */
Cypress.Commands.add('mount', (component, options) => {
  return mount(<ThemeProvider>{component}</ThemeProvider>, options);
});

TypeScript declaration:

declare global {
  namespace Cypress {
    interface Chainable {
      /**
       * Cypress mount with ThemeProvider
       */
      mount: typeof mount;
    }
  }
}

You can define the command for example in the commands.ts/js file:

Example file

import { mount } from 'cypress/react';
// if you are using Cypress v12 or v13, you need to import the mount command from 'cypress/react18'
// import { mount } from 'cypress/react18';
import { ThemeProvider } from '@ui5/webcomponents-react';

declare global {
  namespace Cypress {
    interface Chainable {
      /**
       * Cypress mount with ThemeProvider
       */
      mount: typeof mount;
    }
  }
}

/**
 * Cypress mount with ThemeProvider
 */
Cypress.Commands.add('mount', (component, options) => {
  return mount(<ThemeProvider>{component}</ThemeProvider>, options);
});

Cypress Commands package for ui5-webcomponents

Since testing web components is sometimes not as straightforward as one would like it to be, we offer a package with a set of commands and queries to make it easier to interact with them:

Install:

npm install @ui5/webcomponents-cypress-commands

After the installation you can import it in your entry file (e.g. component.ts):

import '@ui5/webcomponents-cypress-commands';

Now you can use all commands and queries that are available in this package.