[Cypress]: Expose Cypress helper methods to consumers

Summary

As the testing process moves from Jest and Puppetter to Cypress, it would be valuable for the consumer to have access to helper utils for Cypress in order to remove 'DRY' code.

💬 Description

At the moment, there are custom commands created in Cypress to prevent the need to repeat code. These custom commands can be useful to consumers who will require the same checks such as 'Does component have class hydrated?'.

The idea is to create a directory within the 'React' package as this is where the Cypress commands are held. Users would be able to import the helper utils as import { checkHydrated } from '@ukic/react/cypress-utils' or similar.

💰 Use value

This should relieve any issues consumers have regarding how to test ICDS components within Cypress and also provide an area where consumers can easily contribute without having to learn any other framework other than Cypress.

📝 Acceptance Criteria

If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

Given the developer is writing Cypress tests
When a boilerplate command is required
Then instead of typing out all the steps, it can be imported via @ukic/react/cypress-utils

✏ Designs

N/A

🧾 Guidance

This will be technical guidance written up by the author of this work.
Ticket: https://github.com/mi6/ic-design-system/issues/753

Additional info

At the time of writing, the custom commands can be found in /packages/react/cypress/support/commands.ts

Start by reading packages/react/cypress/support/commands.ts to identify the existing custom commands and helper utilities. Then inspect how the React package exposes imports and run its Cypress tests. Done means consumers can import the supported helpers through @ukic/react/cypress-utils instead of duplicating the command steps.