@xtreamsrl/react-cypress

This package exposes cypress E2E testing utilities.

Installation

npm install @xtreamsrl/react-cypress

Usage

The library provides some custom cypress commands:

• getById: retrieves the element with the provided test id
• containsTranslationOf: retrieves the element that contains the translation of the provided key
• containsFormattedDate: retrieves the element that contains the date formatted with the provided format

And chai assertions:

• translationOf: assertion for containing translated string
• formattedDate: assertion for containing formatted date

In order to use the custom commands and assertions, it is necessary to expose I18n in the window object. To do it, add the following code to the App.tsx file:

if ((window as any).Cypress) {
  import('./cypressThings').then(module => module.makeCypressHappy());
}

The cypressThings file, or any name you prefer to assign to it, should contain the following code:

import { I18n } from 'i18n-js';
export function makeCypressHappy() {
  (window as any).i18n = I18n;
}

What happens is that when the application is running in the Cypress test environment, it dynamically imports cypressThings and invokes the function 'makeCypressHappy' from that module. This approach allows to include testing-specific functionality or configurations when running tests with Cypress.

Who we are