refactor: replace enzyme with testing library

Author: leslieyip02

website/README.md

@@ -267,7 +267,9 @@ If a community libdef is not available, you can try writing your own and placing
 
 ### Testing and Linting
 
-We use [Jest][jest] with [Enzyme][enzyme] to test our code and React components, [TypeScript][ts] for typechecking, [Stylelint][stylelint] and [ESLint][eslint] using [Airbnb config][eslint-airbnb] and [Prettier][prettier] for linting and formatting.
+We use [Jest][jest] with [Enzyme][enzyme] and [Testing Library][testing-library] to test our code and React components, [TypeScript][ts] for typechecking, [Stylelint][stylelint] and [ESLint][eslint] using [Airbnb config][eslint-airbnb] and [Prettier][prettier] for linting and formatting.
+
+**Note: The majority of React tests are written with Enzyme. For new unit tests, please try to use [Testing Library][testing-library] instead!**
 
 ```sh
 # Run all tests once with code coverage
@@ -404,6 +406,7 @@ Components should keep their styles and tests in the same directory with the sam
 [bootstrap]: https://getbootstrap.com/
 [jest]: https://facebook.github.io/jest/
 [enzyme]: http://airbnb.io/enzyme/
+[testing-library]: https://testing-library.com/docs/react-testing-library/intro/
 [ts]: https://www.typescriptlang.org/
 [eslint]: https://eslint.org/
 [svgr]: https://github.com/smooth-code/svgr

website/package.json

@@ -40,8 +40,8 @@
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
     "@svgr/webpack": "8.1.0",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.1.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "14.5.2",
     "@types/body-scroll-lock": "2.6.2",
     "@types/enzyme": "3.10.18",

website/src/views/optimiser/OptimiserButton.test.tsx

@@ -1,9 +1,7 @@
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { defaultLectureOption } from 'test-utils/optimiser';
 import OptimiserButton, { OptimiserButtonProps } from './OptimiserButton';
 
-import styles from './OptimiserButton.scss';
-
 describe('OptimiserButton', () => {
   it('should be enabled when there are lesson options', () => {
     const props: OptimiserButtonProps = {
@@ -12,10 +10,8 @@ describe('OptimiserButton', () => {
       freeDayConflicts: [],
       onClick: jest.fn(),
     };
-    const wrapper = mount(<OptimiserButton {...props} />);
-    const button = wrapper.find(`.${styles.optimizeButton}`);
-    expect(button.exists()).toBe(true);
-    expect(button.prop('disabled')).toBeFalsy();
+    render(<OptimiserButton {...props} />);
+    expect(screen.getByRole('button')).toBeEnabled();
   });
 
   it('should be disabled when there are no lesson options', () => {
@@ -25,10 +21,8 @@ describe('OptimiserButton', () => {
       freeDayConflicts: [],
       onClick: jest.fn(),
     };
-    const wrapper = mount(<OptimiserButton {...props} />);
-    const button = wrapper.find(`.${styles.optimizeButton}`);
-    expect(button.exists()).toBe(true);
-    expect(button.prop('disabled')).toBe(true);
+    render(<OptimiserButton {...props} />);
+    expect(screen.getByRole('button')).toBeDisabled();
   });
 
   it('should be disabled when optimising', () => {
@@ -38,10 +32,8 @@ describe('OptimiserButton', () => {
       freeDayConflicts: [],
       onClick: jest.fn(),
     };
-    const wrapper = mount(<OptimiserButton {...props} />);
-    const button = wrapper.find(`.${styles.optimizeButton}`);
-    expect(button.exists()).toBe(true);
-    expect(button.prop('disabled')).toBe(true);
+    render(<OptimiserButton {...props} />);
+    expect(screen.getByRole('button')).toBeDisabled();
   });
 
   it('should be disabled when there are free day conflicts', () => {
@@ -58,10 +50,8 @@ describe('OptimiserButton', () => {
       ],
       onClick: jest.fn(),
     };
-    const wrapper = mount(<OptimiserButton {...props} />);
-    const button = wrapper.find(`.${styles.optimizeButton}`);
-    expect(button.exists()).toBe(true);
-    expect(button.prop('disabled')).toBe(true);
+    render(<OptimiserButton {...props} />);
+    expect(screen.getByRole('button')).toBeDisabled();
   });
 
   it('should show "Searching and optimising..." when optimising', () => {
@@ -71,10 +61,8 @@ describe('OptimiserButton', () => {
       freeDayConflicts: [],
       onClick: jest.fn(),
     };
-    const wrapper = mount(<OptimiserButton {...props} />);
-    const button = wrapper.find(`.${styles.optimizeButton}`);
-    expect(button.exists()).toBe(true);
-    expect(button.text().includes('Searching and optimising...')).toBe(true);
+    render(<OptimiserButton {...props} />);
+    expect(screen.getByRole('button')).toHaveTextContent('Searching and optimising...');
   });
 
   it('should show "Optimise Timetable" when not optimising', () => {
@@ -84,9 +72,7 @@ describe('OptimiserButton', () => {
       freeDayConflicts: [],
       onClick: jest.fn(),
     };
-    const wrapper = mount(<OptimiserButton {...props} />);
-    const button = wrapper.find(`.${styles.optimizeButton}`);
-    expect(button.exists()).toBe(true);
-    expect(button.text().includes('Optimise Timetable')).toBe(true);
+    render(<OptimiserButton {...props} />);
+    expect(screen.getByRole('button')).toHaveTextContent('Optimise Timetable');
   });
 });

website/src/views/optimiser/OptimiserForm/OptimiserFreeDayConflicts.test.tsx

@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { defaultTutorialOption } from 'test-utils/optimiser';
 import OptimiserFreeDayConflicts from './OptimiserFreeDayConflicts';
 
@@ -12,13 +12,13 @@ describe('OptimiserFreeDayConflicts', () => {
         days: ['Monday', 'Tuesday'],
       },
     ];
-    const wrapper = mount(<OptimiserFreeDayConflicts freeDayConflicts={freeDayConflicts} />);
-    expect(wrapper.text().includes('Free Day Conflicts')).toBe(true);
-    expect(wrapper.text().includes(defaultTutorialOption.displayText)).toBe(true);
+    const { container } = render(<OptimiserFreeDayConflicts freeDayConflicts={freeDayConflicts} />);
+    expect(container).toHaveTextContent('Free Day Conflicts');
+    expect(container).toHaveTextContent(defaultTutorialOption.displayText);
   });
 
   it('should not render when there are no conflicts', () => {
-    const wrapper = mount(<OptimiserFreeDayConflicts freeDayConflicts={[]} />);
-    expect(wrapper.isEmptyRender()).toBe(true);
+    const { container } = render(<OptimiserFreeDayConflicts freeDayConflicts={[]} />);
+    expect(container).toBeEmptyDOMElement();
   });
 });

website/src/views/optimiser/OptimiserForm/OptimiserFreeDaySelect.test.tsx

@@ -1,9 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import useOptimiserForm from 'views/hooks/useOptimiserForm';
-import { mount } from 'enzyme';
 import OptimiserFreeDaySelect from './OptimiserFreeDaySelect';
 
-import styles from './OptimiserFreeDaySelect.scss';
-
 jest.mock('./OptimiserFormTooltip', () => ({
   __esModule: true,
   default: () => <div />,
@@ -22,32 +21,34 @@ describe('OptimiserLessonOptionSelect', () => {
   };
 
   it('should not show saturday', () => {
-    const wrapper = mount(<Helper hasSaturday={false} />);
-    expect(wrapper.text().includes('Monday')).toBe(true);
-    expect(wrapper.text().includes('Tuesday')).toBe(true);
-    expect(wrapper.text().includes('Wednesday')).toBe(true);
-    expect(wrapper.text().includes('Thursday')).toBe(true);
-    expect(wrapper.text().includes('Friday')).toBe(true);
-    expect(wrapper.text().includes('Saturday')).toBe(false);
+    const { container } = render(<Helper hasSaturday={false} />);
+    expect(container).toHaveTextContent('Monday');
+    expect(container).toHaveTextContent('Tuesday');
+    expect(container).toHaveTextContent('Wednesday');
+    expect(container).toHaveTextContent('Thursday');
+    expect(container).toHaveTextContent('Friday');
+    expect(container).not.toHaveTextContent('Saturday');
   });
 
   it('should show saturday', () => {
-    const wrapper = mount(<Helper hasSaturday />);
-    expect(wrapper.text().includes('Monday')).toBe(true);
-    expect(wrapper.text().includes('Tuesday')).toBe(true);
-    expect(wrapper.text().includes('Wednesday')).toBe(true);
-    expect(wrapper.text().includes('Thursday')).toBe(true);
-    expect(wrapper.text().includes('Friday')).toBe(true);
-    expect(wrapper.text().includes('Saturday')).toBe(true);
+    const { container } = render(<Helper hasSaturday />);
+    expect(container).toHaveTextContent('Monday');
+    expect(container).toHaveTextContent('Tuesday');
+    expect(container).toHaveTextContent('Wednesday');
+    expect(container).toHaveTextContent('Thursday');
+    expect(container).toHaveTextContent('Friday');
+    expect(container).toHaveTextContent('Saturday');
   });
 
-  it('should toggle the selected day', () => {
-    const wrapper = mount(<Helper hasSaturday={false} />);
-    const monday = wrapper.find(`.${styles.freeDaysButton}`).at(0);
-    expect(monday.hasClass('active')).toBe(false);
-    monday.simulate('click');
-    expect(wrapper.find(`.${styles.freeDaysButton}`).at(0).hasClass('active')).toBe(true);
-    monday.simulate('click');
-    expect(wrapper.find(`.${styles.freeDaysButton}`).at(0).hasClass('active')).toBe(false);
+  it('should toggle the selected day', async () => {
+    render(<Helper hasSaturday={false} />);
+    const monday = screen.getByText('Monday');
+    expect(monday).not.toHaveClass('active');
+
+    await userEvent.click(screen.getByText('Monday'));
+    expect(screen.getByText('Monday')).toHaveClass('active');
+
+    await userEvent.click(screen.getByText('Monday'));
+    expect(screen.getByText('Monday')).not.toHaveClass('active');
   });
 });

website/src/views/optimiser/OptimiserForm/OptimiserLessonOptionSelect.test.tsx

@@ -1,7 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { defaultLectureOption, defaultTutorialOption } from 'test-utils/optimiser';
 import { LessonOption } from 'types/optimiser';
 import useOptimiserForm from 'views/hooks/useOptimiserForm';
-import { mount } from 'enzyme';
-import { defaultLectureOption, defaultTutorialOption } from 'test-utils/optimiser';
 import OptimiserLessonOptionSelect from './OptimiserLessonOptionSelect';
 
 import styles from './OptimiserLessonOptionSelect.scss';
@@ -27,35 +28,32 @@ describe('OptimiserLessonOptionSelect', () => {
   };
 
   it('should show a warning when there are no lesson options', () => {
-    const wrapper = mount(<Helper lessonOptions={[]} />);
-    expect(wrapper.text().includes('No Lessons Found')).toBe(true);
-    expect(wrapper.find(`.${styles.lessonButtons}`).exists()).toBe(false);
+    render(<Helper lessonOptions={[]} />);
+    expect(screen.getByRole('alert')).toHaveTextContent('No Lessons Found');
   });
 
   it('should show all lesson options', () => {
     const lessonOptions = [defaultLectureOption, defaultTutorialOption];
-    const wrapper = mount(<Helper lessonOptions={lessonOptions} />);
-    expect(wrapper.text().includes('No Lessons Found')).toBe(false);
-    expect(wrapper.find(`.${styles.lessonButtons}`).exists()).toBe(true);
-    expect(wrapper.find(`.${styles.lessonButton}`)).toHaveLength(2);
-    expect(wrapper.text().includes(defaultLectureOption.displayText)).toBe(true);
-    expect(wrapper.text().includes(defaultTutorialOption.displayText)).toBe(true);
+    const { container } = render(<Helper lessonOptions={lessonOptions} />);
+    expect(container).not.toHaveTextContent('No Lessons Found');
+    expect(container).toHaveTextContent(defaultLectureOption.displayText);
+    expect(container).toHaveTextContent(defaultTutorialOption.displayText);
   });
 
-  it('should toggle lesson option', () => {
+  it('should toggle lesson option', async () => {
     const lessonOptions = [defaultLectureOption];
-    const wrapper = mount(<Helper lessonOptions={lessonOptions} />);
-    const lectureButton = wrapper.find(`.${styles.lessonButton}`);
-    expect(lectureButton).toHaveLength(1);
-    expect(wrapper.find(`.${styles.selected}`).exists()).toBe(false);
-    expect(wrapper.find(`.${styles.unselected}`).exists()).toBe(true);
-
-    lectureButton.simulate('click');
-    expect(wrapper.find(`.${styles.selected}`).exists()).toBe(true);
-    expect(wrapper.find(`.${styles.unselected}`).exists()).toBe(false);
-
-    lectureButton.simulate('click');
-    expect(wrapper.find(`.${styles.selected}`).exists()).toBe(false);
-    expect(wrapper.find(`.${styles.unselected}`).exists()).toBe(true);
+    render(<Helper lessonOptions={lessonOptions} />);
+
+    const lectureButton = screen.getByRole('button');
+    expect(lectureButton).not.toHaveClass(styles.selected);
+    expect(lectureButton).toHaveClass(styles.unselected);
+
+    await userEvent.click(lectureButton);
+    expect(lectureButton).toHaveClass(styles.selected);
+    expect(lectureButton).not.toHaveClass(styles.unselected);
+
+    await userEvent.click(lectureButton);
+    expect(lectureButton).not.toHaveClass(styles.selected);
+    expect(lectureButton).toHaveClass(styles.unselected);
   });
 });

website/src/views/optimiser/OptimiserForm/OptimiserTimeRangeSelect.test.tsx

@@ -1,4 +1,5 @@
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import useOptimiserForm from 'views/hooks/useOptimiserForm';
 import {
   OptimiserLessonTimeRangeSelect,
@@ -13,19 +14,18 @@ jest.mock('./OptimiserFormTooltip', () => ({
 }));
 
 describe('OptimiserTimeRangeSelect', () => {
-  it('should call setTime when valuue is changed', () => {
+  it('should call setTime when valuue is changed', async () => {
     const setTime = jest.fn();
     const props: TimeRangeSelectProps = {
       currentValue: '0800',
       timeValues: ['0800', '0830', '0900'],
       setTime,
     };
-    const wrapper = mount(<OptimiserTimeRangeSelect {...props} />);
-    const dropdown = wrapper.find('select');
-    expect(dropdown.exists()).toBe(true);
-    expect(dropdown.props().value).toEqual('0800');
-    dropdown.simulate('change', { target: { value: '0830' } });
-    expect(setTime).toHaveBeenCalledTimes(1);
+    render(<OptimiserTimeRangeSelect {...props} />);
+    const select = screen.getByTestId('optimiserTimeRangeSelect');
+    expect(select).toHaveValue('0800');
+    expect(select).toHaveDisplayValue('08:00');
+    await userEvent.selectOptions(select, '08:30');
     expect(setTime).toHaveBeenCalledWith('0830');
   });
 });
@@ -36,21 +36,21 @@ describe('OptimiserLessonTimeRangeSelect', () => {
     return <OptimiserLessonTimeRangeSelect optimiserFormFields={optimiserFormFields} />;
   };
 
-  it('should update the lesson time range', () => {
-    const wrapper = mount(<Helper />);
-    const dropdowns = wrapper.find('select');
-    expect(dropdowns).toHaveLength(2);
+  it('should update the lesson time range', async () => {
+    render(<Helper />);
+    const selects = screen.getAllByTestId('optimiserTimeRangeSelect');
+    expect(selects).toHaveLength(2);
 
-    expect(dropdowns.at(0).props().value).toEqual('0800');
-    expect(dropdowns.at(1).props().value).toEqual('1900');
+    expect(selects.at(0)).toHaveValue('0800');
+    expect(selects.at(1)).toHaveValue('1900');
 
-    dropdowns.at(0).simulate('change', { target: { value: '0830' } });
-    expect(wrapper.find('select').at(0).props().value).toEqual('0830');
-    expect(wrapper.find('select').at(1).props().value).toEqual('1900');
+    await userEvent.selectOptions(selects.at(0)!, '0830');
+    expect(screen.getAllByTestId('optimiserTimeRangeSelect').at(0)).toHaveValue('0830');
+    expect(screen.getAllByTestId('optimiserTimeRangeSelect').at(1)).toHaveValue('1900');
 
-    dropdowns.at(1).simulate('change', { target: { value: '1200' } });
-    expect(wrapper.find('select').at(0).props().value).toEqual('0830');
-    expect(wrapper.find('select').at(1).props().value).toEqual('1200');
+    await userEvent.selectOptions(selects.at(1)!, '1200');
+    expect(screen.getAllByTestId('optimiserTimeRangeSelect').at(0)).toHaveValue('0830');
+    expect(screen.getAllByTestId('optimiserTimeRangeSelect').at(1)).toHaveValue('1200');
   });
 });
 
@@ -60,20 +60,20 @@ describe('OptimiserLunchTimeRangeSelect', () => {
     return <OptimiserLunchTimeRangeSelect optimiserFormFields={optimiserFormFields} />;
   };
 
-  it('should update the lunch time range', () => {
-    const wrapper = mount(<Helper />);
-    const dropdowns = wrapper.find('select');
-    expect(dropdowns).toHaveLength(2);
+  it('should update the lunch time range', async () => {
+    render(<Helper />);
+    const selects = screen.getAllByTestId('optimiserTimeRangeSelect');
+    expect(selects).toHaveLength(2);
 
-    expect(dropdowns.at(0).props().value).toEqual('1200');
-    expect(dropdowns.at(1).props().value).toEqual('1400');
+    expect(selects.at(0)).toHaveValue('1200');
+    expect(selects.at(1)).toHaveValue('1400');
 
-    dropdowns.at(0).simulate('change', { target: { value: '1100' } });
-    expect(wrapper.find('select').at(0).props().value).toEqual('1100');
-    expect(wrapper.find('select').at(1).props().value).toEqual('1400');
+    await userEvent.selectOptions(selects.at(0)!, '1100');
+    expect(screen.getAllByTestId('optimiserTimeRangeSelect').at(0)).toHaveValue('1100');
+    expect(screen.getAllByTestId('optimiserTimeRangeSelect').at(1)).toHaveValue('1400');
 
-    dropdowns.at(1).simulate('change', { target: { value: '1700' } });
-    expect(wrapper.find('select').at(0).props().value).toEqual('1100');
-    expect(wrapper.find('select').at(1).props().value).toEqual('1700');
+    await userEvent.selectOptions(selects.at(1)!, '1700');
+    expect(screen.getAllByTestId('optimiserTimeRangeSelect').at(0)).toHaveValue('1100');
+    expect(screen.getAllByTestId('optimiserTimeRangeSelect').at(1)).toHaveValue('1700');
   });
 });

website/src/views/optimiser/OptimiserForm/OptimiserTimeRangeSelect.tsx

@@ -18,6 +18,7 @@ const OptimiserTimeRangeSelect: React.FC<TimeRangeSelectProps> = ({
   setTime,
 }) => (
   <select
+    data-testid="optimiserTimeRangeSelect"
     className={styles.optimiserDropdown}
     value={currentValue}
     onChange={(e) => setTime(e.target.value)}