test: use screen testing api instead of render api

shervinchen · May 2, 2024 · 25dd589 · 25dd589
1 parent ac0dfd5
commit 25dd589
Showing 9 changed files with 122 additions and 120 deletions.
diff --git a/packages/Checkbox/__tests__/Checkbox.test.tsx b/packages/Checkbox/__tests__/Checkbox.test.tsx
@@ -1,5 +1,5 @@
 import React, { ChangeEvent, useState } from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Checkbox from '..';
 import { CheckboxProps } from '../Checkbox.types';
@@ -56,8 +56,8 @@ describe('Checkbox', () => {
   });
 
   test('should support label text', () => {
-    const { queryByText } = render(<Checkbox>Label</Checkbox>);
-    expect(queryByText('Label')).toBeInTheDocument();
+    render(<Checkbox>Label</Checkbox>);
+    expect(screen.queryByText('Label')).toBeInTheDocument();
   });
 
   test('should support indeterminate', () => {

diff --git a/packages/Input/__tests__/Input.test.tsx b/packages/Input/__tests__/Input.test.tsx
@@ -1,5 +1,5 @@
 import React, { ChangeEvent, useState } from 'react';
-import { render, renderHook } from '@testing-library/react';
+import { render, screen, renderHook } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Input from '..';
 import { InputProps, InputSizes, InputTypes } from '../Input.types';
@@ -145,16 +145,16 @@ describe('Input', () => {
   });
 
   test('should support inside element', () => {
-    const { getByText } = render(
+    render(
       <Input.Group>
         <Input.LeftElement>$</Input.LeftElement>
         <Input placeholder="Enter amount" />
         <Input.RightElement>.0</Input.RightElement>
       </Input.Group>
     );
 
-    expect(getByText('$')).toBeInTheDocument();
-    expect(getByText('.0')).toBeInTheDocument();
+    expect(screen.getByText('$')).toBeInTheDocument();
+    expect(screen.getByText('.0')).toBeInTheDocument();
   });
 
   test('should inside element support clickable style', () => {
@@ -173,16 +173,16 @@ describe('Input', () => {
   });
 
   test('should support addon element', () => {
-    const { getByText } = render(
+    render(
       <Input.Group>
         <Input.LeftAddon>https://</Input.LeftAddon>
         <Input placeholder="your domain" />
         <Input.RightAddon>.com</Input.RightAddon>
       </Input.Group>
     );
 
-    expect(getByText('https://')).toBeInTheDocument();
-    expect(getByText('.com')).toBeInTheDocument();
+    expect(screen.getByText('https://')).toBeInTheDocument();
+    expect(screen.getByText('.com')).toBeInTheDocument();
   });
 
   test('should addon element support custom class name', () => {

diff --git a/packages/Modal/__tests__/Modal.test.tsx b/packages/Modal/__tests__/Modal.test.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { render, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { Button, Modal, ModalProps } from '../..';
 import userEvent from '@testing-library/user-event';
 
@@ -56,7 +56,7 @@ describe('Modal', () => {
   });
 
   test('should support custom class name', () => {
-    const { getByTestId } = render(
+    render(
       <Modal visible className="custom-modal">
         <Modal.Header>Modal Title</Modal.Header>
         <Modal.Body>
@@ -68,11 +68,11 @@ describe('Modal', () => {
         </Modal.Footer>
       </Modal>
     );
-    expect(getByTestId('modalWrapper')).toHaveClass('custom-modal');
+    expect(screen.getByTestId('modalWrapper')).toHaveClass('custom-modal');
   });
 
   test('should support custom width', () => {
-    const { getByTestId } = render(
+    render(
       <Modal visible width="400px">
         <Modal.Header>Modal Title</Modal.Header>
         <Modal.Body>
@@ -84,44 +84,38 @@ describe('Modal', () => {
         </Modal.Footer>
       </Modal>
     );
-    const modalWrapper = getByTestId('modalWrapper') as Element;
+    const modalWrapper = screen.getByTestId('modalWrapper') as Element;
     expect(getComputedStyle(modalWrapper).maxWidth).toBe('400px');
   });
 
   test('should open modal and close modal when click target', async () => {
-    const { getByTestId, findByTestId, queryByTestId } = render(
-      <Component closeOnOverlayClick={true} />
-    );
-    await user.click(getByTestId('openModal'));
-    const modalContainer = await findByTestId('modalContainer');
+    render(<Component closeOnOverlayClick={true} />);
+    await user.click(screen.getByTestId('openModal'));
+    const modalContainer = await screen.findByTestId('modalContainer');
     expect(modalContainer).toBeInTheDocument();
     await user.click(modalContainer);
     // act(() => {
     //   jest.runAllTimers();
     // });
     await waitFor(() => {
-      expect(queryByTestId('modalContainer')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('modalContainer')).not.toBeInTheDocument();
     });
     expect(closeHandler).toHaveBeenCalledTimes(1);
   });
 
   test('should not close modal when disabled overlay clicked', async () => {
-    const { getByTestId, findByTestId } = render(
-      <Component closeOnOverlayClick={false} />
-    );
-    await user.click(getByTestId('openModal'));
-    await user.click(await findByTestId('modalContainer'));
+    render(<Component closeOnOverlayClick={false} />);
+    await user.click(screen.getByTestId('openModal'));
+    await user.click(await screen.findByTestId('modalContainer'));
     expect(closeHandler).toHaveBeenCalledTimes(0);
   });
 
   test('should not propagate the click event', async () => {
-    const { getByTestId, findByTestId } = render(
-      <Component closeOnOverlayClick={true} />
-    );
-    await user.click(getByTestId('openModal'));
-    expect(await findByTestId('modalContainer')).toBeInTheDocument();
-    await user.click(await findByTestId('modalWrapper'));
-    expect(await findByTestId('modalContainer')).toBeInTheDocument();
+    render(<Component closeOnOverlayClick={true} />);
+    await user.click(screen.getByTestId('openModal'));
+    expect(await screen.findByTestId('modalContainer')).toBeInTheDocument();
+    await user.click(await screen.findByTestId('modalWrapper'));
+    expect(await screen.findByTestId('modalContainer')).toBeInTheDocument();
     expect(closeHandler).toHaveBeenCalledTimes(0);
   });
 });
diff --git a/packages/Overlay/__tests__/Overlay.test.tsx b/packages/Overlay/__tests__/Overlay.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Overlay from '..';
 
@@ -13,13 +13,13 @@ describe('Overlay', () => {
 
   test('should trigger click event', async () => {
     const mockClickFn = jest.fn();
-    const { getByTestId } = render(<Overlay visible onClick={mockClickFn} />);
-    await user.click(getByTestId('overlay'));
+    render(<Overlay visible onClick={mockClickFn} />);
+    await user.click(screen.getByTestId('overlay'));
     expect(mockClickFn).toHaveBeenCalledTimes(1);
   });
 
   test('should hide the overlay when visible is undefined', () => {
-    const { queryByTestId } = render(<Overlay />);
-    expect(queryByTestId('overlay')).not.toBeInTheDocument();
+    render(<Overlay />);
+    expect(screen.queryByTestId('overlay')).not.toBeInTheDocument();
   });
 });
diff --git a/packages/Popover/__tests__/Popover.test.tsx b/packages/Popover/__tests__/Popover.test.tsx
@@ -15,12 +15,12 @@ describe('Popover', () => {
   });
 
   test('should show popover when default value is true', async () => {
-    const { findByTestId } = render(
+    render(
       <Popover defaultValue content="I am a popover">
         Click me
       </Popover>
     );
-    expect(await findByTestId('popoverContent')).toBeInTheDocument();
+    expect(await screen.findByTestId('popoverContent')).toBeInTheDocument();
   });
 
   test('should support custom class name', () => {
@@ -33,45 +33,39 @@ describe('Popover', () => {
   });
 
   test('should show popover when click target', async () => {
-    const { getByTestId, findByTestId } = render(
-      <Popover content="I am a popover">Click me</Popover>
-    );
-    await user.click(getByTestId('popoverTarget'));
-    expect(await findByTestId('popoverContent')).toBeInTheDocument();
+    render(<Popover content="I am a popover">Click me</Popover>);
+    await user.click(screen.getByTestId('popoverTarget'));
+    expect(await screen.findByTestId('popoverContent')).toBeInTheDocument();
   });
 
   test('should switch whether or not popover is visible when click target', async () => {
-    const { getByTestId, findByTestId } = render(
-      <Popover content="I am a popover">Click me</Popover>
-    );
-    const target = getByTestId('popoverTarget');
+    render(<Popover content="I am a popover">Click me</Popover>);
+    const target = screen.getByTestId('popoverTarget');
     await user.click(target);
-    expect(await findByTestId('popoverContent')).toBeInTheDocument();
+    expect(await screen.findByTestId('popoverContent')).toBeInTheDocument();
     await user.click(target);
     await waitFor(() => {
       expect(screen.queryByTestId('popoverContent')).not.toBeInTheDocument();
     });
   });
 
   test('should hide popover when click outside', async () => {
-    const { getByTestId, findByTestId } = render(
-      <Popover content="I am a popover">Click me</Popover>
-    );
-    await user.click(getByTestId('popoverTarget'));
-    expect(await findByTestId('popoverContent')).toBeInTheDocument();
+    render(<Popover content="I am a popover">Click me</Popover>);
+    await user.click(screen.getByTestId('popoverTarget'));
+    expect(await screen.findByTestId('popoverContent')).toBeInTheDocument();
     await user.click(document.body);
     await waitFor(() => {
       expect(screen.queryByTestId('popoverContent')).not.toBeInTheDocument();
     });
   });
 
   test('should support disabled popover', async () => {
-    const { getByTestId } = render(
+    render(
       <Popover content="I am a popover" disabled>
         Click me
       </Popover>
     );
-    await user.click(getByTestId('popoverTarget'));
+    await user.click(screen.getByTestId('popoverTarget'));
     await waitFor(() => {
       expect(screen.queryByTestId('popoverContent')).not.toBeInTheDocument();
     });
@@ -96,11 +90,11 @@ describe('Popover', () => {
         </Popover>
       );
     };
-    const { getByTestId, findByTestId } = render(
+    render(
       <Component content="I am a controlled popover" onChange={onChange} />
     );
-    await user.click(getByTestId('popoverTarget'));
-    expect(await findByTestId('popoverContent')).toBeInTheDocument();
+    await user.click(screen.getByTestId('popoverTarget'));
+    expect(await screen.findByTestId('popoverContent')).toBeInTheDocument();
     expect(onChange).toHaveBeenCalledTimes(1);
   });
 

diff --git a/packages/Radio/__tests__/Radio.test.tsx b/packages/Radio/__tests__/Radio.test.tsx
@@ -1,5 +1,5 @@
 import React, { ChangeEvent, useState } from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Radio from '..';
 import { RadioProps } from '../Radio.types';
@@ -52,8 +52,8 @@ describe('Radio', () => {
   });
 
   test('should support label text', () => {
-    const { queryByText } = render(<Radio>Label</Radio>);
-    expect(queryByText('Label')).toBeInTheDocument();
+    render(<Radio>Label</Radio>);
+    expect(screen.queryByText('Label')).toBeInTheDocument();
   });
 
   test('should support disabled', async () => {