React: add minimal test coverage for all components

[justintemps]

Implement minimal test coverage for all components in the React component library to ensure basic functionality and prevent regressions.

Our React component library is currently lacking in test coverage. We need to establish a baseline of minimal test coverage for all the components in the library.

Objectives

• Establish Test Coverage Baseline: Each component should have at least one test case that verifies its primary functionality.
• Identify Critical Paths: For each component, identify and test the critical path that is most likely to be used by consumers of the library.
• Ensure Component Isolation: Tests should be isolated to individual components to prevent cascading failures and to pinpoint the exact source of any given issue.

Acceptance Criteria

• At least one test per component. One ensuring that the component renders correctly given the data provided to it and an optional test making sure it interacts with the user in the way expected.
• All newly added tests should pass and not introduce any new failures into the existing test suite.

[bashlk]

@justintemps Before we start on this, I think it will be good to measure the test coverage so that we have a good idea of where we stand now. We can then clearly see which components are currently not being tested and add a basic "render check" to the components that are not currently tested to see if it renders with the expected elements. Later we can also use the test coverage report to find the components that are under tested and improve them.

Since the react package uses CRA to run jest, we should be able to get the coverage report by adding a single option to the test command. Ideally we should regularly measure and report the test coverage using the CI but we can also run it manually at certain intervals to track our progress.

[bashlk]

Also we should probably move away from using CRA for the tests. It's really strange that it is being used for the tests alone. Do you know why the react package ended up using rollup for the builds and CRA for the tests?

[Shashika6]

Did an initial investigation on react test for components. The plan will be to releas tests individually for each component as there is a quick release flow and we also have an advantage to prioritise components. (Like what we did in RTL we can have a label for this)

Components that require tests to be written.

• Breadcrumb
• Cards (All individual cards have a component for them)
• CardGroups
• Checkbox
• Collapse
• Credit
• DatePicker
• Empty
• Fieldset
• Fileupload
• Footer
• Form
• FormControl
• FormElement
• GlobalProvider
• Hero
• Icon
• Input
• LocalNav
• Logo
• Logogrid
• Navigation
• NumberPicker
• Radio
• SocialMedia
• Tabs
• TextArea
• TextInput
• Toggle
• Tooltip
• Video

Components with tests already written.

• Accordion
• Button
• Callout
• ContextMenu
• Dropdown
• Heading
• Image
• Linklist
• List
• Loading
• Notification
• Pagination
• Profile
• ReadMore
• Richtext
• SearchField
• TableOfContents
• Tag

[justintemps]

Also we should probably move away from using CRA for the tests. It's really strange that it is being used for the tests alone. Do you know why the react package ended up using rollup for the builds and CRA for the tests?

@bashlk I'm not sure why we're using CRA for the tests, but I'm not married to it. If there's a better way of rendering React components for testing, I'm all for it.

[justintemps]

Hey @Shashika6 this looks good to me.

[bashlk]

Since we are looking into this, it might be better to switch the React project to using Vite and Vitest so that we don't have to refactor even more code. It seems like Storybook is already set up to use Vite.

What do you think @justintemps?

[justintemps]

This is currently blocked by #985