Update testing-library/user-event to latest version

app/javascript/packages/clipboard-button/clipboard-button-element.spec.ts

@@ -23,35 +23,35 @@ describe('ClipboardButtonElement', () => {
     return element;
   }
 
-  it('copies text to clipboard when clicking its button', () => {
+  it('copies text to clipboard when clicking its button', async () => {
     const clipboardText = 'example';
     const element = createAndConnectElement({ clipboardText });
     const button = getByRole(element, 'button');
 
-    userEvent.click(button);
+    await userEvent.click(button);
 
     expect(navigator.clipboard.writeText).to.have.been.calledWith(clipboardText);
   });
 
-  it('copies the latest clipboard attribute value after initialization', () => {
+  it('copies the latest clipboard attribute value after initialization', async () => {
     const clipboardText = 'example';
     const element = createAndConnectElement({ clipboardText });
     const changedClipbordText = 'example2';
     element.setAttribute('data-clipboard-text', changedClipbordText);
 
     const button = getByRole(element, 'button');
 
-    userEvent.click(button);
+    await userEvent.click(button);
 
     expect(navigator.clipboard.writeText).to.have.been.calledWith(changedClipbordText);
   });
 
   context('with nothing to copy', () => {
-    it('does writes an empty string to the clipboard', () => {
+    it('does writes an empty string to the clipboard', async () => {
       const element = createAndConnectElement();
       const button = getByRole(element, 'button');
 
-      userEvent.click(button);
+      await userEvent.click(button);
 
       expect(navigator.clipboard.writeText).to.have.been.calledWith('');
     });

app/javascript/packages/components/button.spec.tsx

@@ -4,11 +4,11 @@ import userEvent from '@testing-library/user-event';
 import Button from './button';
 
 describe('Button', () => {
-  it('renders with default props', () => {
+  it('renders with default props', async () => {
     const { getByText } = render(<Button>Click me</Button>);
 
     const button = getByText('Click me') as HTMLButtonElement;
-    userEvent.click(button);
+    await userEvent.click(button);
 
     expect(button.nodeName).to.equal('BUTTON');
     expect(button.type).to.equal('button');
@@ -29,14 +29,14 @@ describe('Button', () => {
     expect(link.hasAttribute('type')).to.be.false();
   });
 
-  it('forwards additional props to the rendered element', () => {
+  it('forwards additional props to the rendered element', async () => {
     const onClick = sinon.spy();
     const { getByText } = render(
       <Button onClick={(event) => onClick(event.type)}>Click me</Button>,
     );
 
     const button = getByText('Click me');
-    userEvent.click(button);
+    await userEvent.click(button);
 
     expect(onClick.calledOnce).to.be.true();
     expect(onClick.getCall(0).args[0]).to.equal('click');
@@ -89,7 +89,7 @@ describe('Button', () => {
     expect(button.classList.contains('usa-button--unstyled')).to.be.true();
   });
 
-  it('renders as disabled', () => {
+  it('renders as disabled', async () => {
     const onClick = sinon.spy();
     const { getByText } = render(
       <Button isDisabled onClick={onClick}>
@@ -98,7 +98,7 @@ describe('Button', () => {
     );
 
     const button = getByText('Click me') as HTMLButtonElement;
-    userEvent.click(button);
+    await userEvent.click(button);
 
     expect(onClick.calledOnce).to.be.false();
     expect(button.disabled).to.be.true();

app/javascript/packages/components/hooks/use-focus-trap.spec.ts

@@ -29,12 +29,12 @@ describe('useFocusTrap', () => {
     expect(trap.deactivate).to.be.a('function');
   });
 
-  it('traps focus', () => {
+  it('traps focus', async () => {
     const container = document.querySelector('.container') as HTMLElement;
     renderHook(() => useFocusTrap(useRef(container), DEFAULT_OPTIONS));
 
     expect(container.contains(document.activeElement)).to.be.true();
-    userEvent.tab();
+    await userEvent.tab();
     expect(container.contains(document.activeElement)).to.be.true();
   });
 
@@ -52,7 +52,7 @@ describe('useFocusTrap', () => {
     expect(document.activeElement).to.equal(originalActiveElement);
   });
 
-  it('accepts options', () => {
+  it('accepts options', async () => {
     const container = document.querySelector('.container') as HTMLElement;
     const onDeactivate = sinon.spy();
     renderHook(() =>
@@ -65,7 +65,7 @@ describe('useFocusTrap', () => {
 
     const outsideButton = screen.getByTestId('outsideButton');
 
-    userEvent.click(outsideButton);
+    await userEvent.click(outsideButton);
     expect(onDeactivate).to.have.been.called();
   });
 });