Fix tests that relied on classic JSX runtime

Author: colinrotherham

src/components/form-elements/select/__tests__/Select.test.tsx

@@ -1,5 +1,4 @@
-import { render } from '@testing-library/react';
-import { createRef, useRef } from 'react';
+import { createRef } from 'react';
 import { Select } from '..';
 import { renderClient, renderServer } from '#util/components';
 
@@ -8,16 +7,6 @@ describe('Select', () => {
     jest.restoreAllMocks();
   });
 
-  const SelectComp = ({ onHandle }: { onHandle: () => void }) => {
-    const ref = useRef<HTMLSelectElement | null>(null);
-    const handleClick = () => {
-      if (!ref.current) return;
-      onHandle();
-    };
-
-    return <Select onClick={handleClick} ref={ref} />;
-  };
-
   it('matches snapshot', async () => {
     const { container } = await renderClient(
       <Select id="test-select">
@@ -84,17 +73,22 @@ describe('Select', () => {
     expect(selectEl2).toHaveClass('nhsuk-select--error');
   });
 
-  it('should handle DOM events where ref Exists', () => {
-    const useRefSpy = jest
-      .spyOn(React, 'useRef')
-      .mockReturnValueOnce({ current: document.createElement('select') });
+  it('should handle DOM events where ref exists', async () => {
+    const ref = createRef<HTMLSelectElement>();
     const mock = jest.fn();
-    const { container } = render(<SelectComp onHandle={mock} />);
 
-    const selectEl = container.querySelector('select')!;
+    const handleClick = () => {
+      if (!ref.current) return;
+      mock();
+    };
+
+    const { modules } = await renderClient(<Select onClick={handleClick} ref={ref} />, {
+      className: 'nhsuk-select',
+    });
+
+    const [selectEl] = modules;
     selectEl.click();
 
-    expect(useRefSpy).toBeCalledWith(null);
     expect(mock).toBeCalledTimes(1);
   });
 });

src/components/form-elements/text-input/__tests__/TextInput.test.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { createRef, useRef } from 'react';
+import { createRef } from 'react';
 import { TextInput } from '..';
 import { renderClient, renderServer } from '#util/components';
 import { InputWidth } from '#util/types';
@@ -9,16 +9,6 @@ describe('TextInput', () => {
     jest.restoreAllMocks();
   });
 
-  const TextInputComp = ({ onHandle }: { onHandle: () => void }) => {
-    const ref = useRef(null);
-    const handleClick = () => {
-      if (!ref.current) return;
-      onHandle();
-    };
-
-    return <TextInput type="button" onClick={handleClick} ref={ref} />;
-  };
-
   it('matches snapshot', async () => {
     const { container } = await renderClient(
       <TextInput label="What is your NHS number?" labelProps={{ size: 'l' }} id="nhs-number" />,
@@ -61,17 +51,22 @@ describe('TextInput', () => {
     expect(fieldRef.current).toHaveClass('nhsuk-input');
   });
 
-  it('should handle click where ref Exists', () => {
-    const useRefSpy = jest
-      .spyOn(React, 'useRef')
-      .mockReturnValueOnce({ current: document.createElement('button') });
+  it('should handle DOM events where ref exists', async () => {
+    const ref = createRef<HTMLInputElement>();
     const mock = jest.fn();
-    const { container } = render(<TextInputComp onHandle={mock} />);
 
-    const textInputEl = container.querySelector('input')!;
+    const handleClick = () => {
+      if (!ref.current) return;
+      mock();
+    };
+
+    const { modules } = await renderClient(<TextInput onClick={handleClick} ref={ref} />, {
+      className: 'nhsuk-input',
+    });
+
+    const [textInputEl] = modules;
     textInputEl.click();
 
-    expect(useRefSpy).toBeCalledWith(null);
     expect(mock).toBeCalledTimes(1);
   });