This package exposes cypress E2E testing utilities.
npm install @xtreamsrl/react-cypressThe 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.
We consider ourselves a family of talented and passionate people building their own products and powerful solutions for our clients. Get to know us more on xtreamers.io or follow us on LinkedIn.