feat(tools): setup react testing library in ui-components (#42221)

* feat(tools): setup react testing library in ui-components

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>

tools/ui-components/src/button.test.js

@@ -0,0 +1,29 @@
+/* global expect */
+/* global jest */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Button } from './button';
+
+describe('Button', () => {
+  it("should have the role 'button' and the correct text", () => {
+    render(<Button label='Hello world' />);
+
+    expect(
+      screen.getByRole('button', { name: /hello world/i })
+    ).toBeInTheDocument();
+  });
+
+  it('should trigger the onClick prop on click', () => {
+    const onClick = jest.fn();
+    render(<Button label='Hello world' onClick={onClick} />);
+
+    const button = screen.getByRole('button', { name: /hello world/i });
+
+    userEvent.click(button);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});