fix: enzyme testing replaced by react tester

lms/djangoapps/instructor/static/instructor/ProblemBrowser/components/Main/Main.jsx

@@ -70,6 +70,7 @@ export default class Main extends React.Component {
                     {this.state.showDropdown
             && (
                 <BlockBrowserContainer
+                    data-testid="block-browser-container"
                     onSelectBlock={(blockId) => {
                         this.hideDropdown();
                         onSelectBlock(blockId);

lms/djangoapps/instructor/static/instructor/ProblemBrowser/components/Main/Main.test.jsx

@@ -1,23 +1,22 @@
 // eslint-disable-next-line no-redeclare
 /* global jest,test,describe,expect */
-import { Button } from '@edx/paragon';
-import BlockBrowserContainer from 'BlockBrowser/components/BlockBrowser/BlockBrowserContainer';
-import { Provider } from 'react-redux';
-import { shallow } from 'enzyme';
 import React from 'react';
-import renderer from 'react-test-renderer';
-import store from '../../data/store';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Provider } from 'react-redux';
 
+import store from '../../data/store';
 import Main from './Main';
 
 describe('ProblemBrowser Main component', () => {
     const courseId = 'testcourse';
     const problemResponsesEndpoint = '/api/problem_responses/';
     const taskStatusEndpoint = '/api/task_status/';
     const excludedBlockTypes = [];
+    const reportDownloadEndpoint = '/api/download_report/';
 
     test('render with basic parameters', () => {
-        const component = renderer.create(
+        render(
             <Provider store={store}>
                 <Main
                     courseId={courseId}
@@ -28,15 +27,16 @@ describe('ProblemBrowser Main component', () => {
                     onSelectBlock={jest.fn()}
                     selectedBlock={null}
                     taskStatusEndpoint={taskStatusEndpoint}
+                    reportDownloadEndpoint={reportDownloadEndpoint}
+                    ShowBtnUi="false"
                 />
             </Provider>,
         );
-        const tree = component.toJSON();
-        expect(tree).toMatchSnapshot();
+        expect(screen.getByRole('button', { name: 'Select a section or problem' })).toBeInTheDocument();
     });
 
     test('render with selected block', () => {
-        const component = renderer.create(
+        render(
             <Provider store={store}>
                 <Main
                     courseId={courseId}
@@ -47,16 +47,17 @@ describe('ProblemBrowser Main component', () => {
                     onSelectBlock={jest.fn()}
                     selectedBlock="some-selected-block"
                     taskStatusEndpoint={taskStatusEndpoint}
+                    reportDownloadEndpoint={reportDownloadEndpoint}
+                    ShowBtnUi="false"
                 />
             </Provider>,
         );
-        const tree = component.toJSON();
-        expect(tree).toMatchSnapshot();
+        expect(screen.getByRole('button', { name: 'Select a section or problem' })).toBeInTheDocument();
     });
 
-    test('fetch course block on toggling dropdown', () => {
+    test('fetch course block on toggling dropdown', async () => {
         const fetchCourseBlocksMock = jest.fn();
-        const component = renderer.create(
+        render(
             <Provider store={store}>
                 <Main
                     courseId={courseId}
@@ -67,30 +68,70 @@ describe('ProblemBrowser Main component', () => {
                     onSelectBlock={jest.fn()}
                     selectedBlock="some-selected-block"
                     taskStatusEndpoint={taskStatusEndpoint}
+                    reportDownloadEndpoint={reportDownloadEndpoint}
+                    ShowBtnUi="false"
                 />
             </Provider>,
         );
-        // eslint-disable-next-line prefer-destructuring
-        const instance = component.root.children[0].instance;
-        instance.handleToggleDropdown();
-        expect(fetchCourseBlocksMock.mock.calls.length).toBe(1);
+        const toggleButton = screen.getByRole('button', { name: 'Select a section or problem' });
+        await userEvent.click(toggleButton);
+        expect(fetchCourseBlocksMock).toHaveBeenCalledTimes(1);
     });
 
-    test('display dropdown on toggling dropdown', () => {
-        const component = shallow(
-            <Main
-                courseId={courseId}
-                createProblemResponsesReportTask={jest.fn()}
-                excludeBlockTypes={excludedBlockTypes}
-                fetchCourseBlocks={jest.fn()}
-                problemResponsesEndpoint={problemResponsesEndpoint}
-                onSelectBlock={jest.fn()}
-                selectedBlock="some-selected-block"
-                taskStatusEndpoint={taskStatusEndpoint}
-            />,
+    test('display dropdown on toggling dropdown', async () => {
+        render(
+            <Provider store={store}>
+                <Main
+                    courseId={courseId}
+                    createProblemResponsesReportTask={jest.fn()}
+                    excludeBlockTypes={excludedBlockTypes}
+                    fetchCourseBlocks={jest.fn()}
+                    problemResponsesEndpoint={problemResponsesEndpoint}
+                    onSelectBlock={jest.fn()}
+                    selectedBlock="some-selected-block"
+                    taskStatusEndpoint={taskStatusEndpoint}
+                    reportDownloadEndpoint={reportDownloadEndpoint}
+                    ShowBtnUi="false"
+                />
+            </Provider>,
+        );
+        expect(screen.queryByTestId('block-browser-container')).toBeNull();
+        const toggleButton = screen.getByRole('button', { name: 'Select a section or problem' });
+        await userEvent.click(toggleButton);
+        await waitFor(() => {
+            expect(screen.findByTestId('block-browser-container')).resolves.toBeInTheDocument();
+        });
+        await userEvent.click(toggleButton);
+        await waitFor(() => {
+            expect(screen.findByTestId('block-browser-container')).resolves.toBeInTheDocument();
+        });
+    });
+
+    test('hide dropdown on second toggle', async () => {
+        render(
+            <Provider store={store}>
+                <Main
+                    courseId={courseId}
+                    createProblemResponsesReportTask={jest.fn()}
+                    excludeBlockTypes={excludedBlockTypes}
+                    fetchCourseBlocks={jest.fn()}
+                    problemResponsesEndpoint={problemResponsesEndpoint}
+                    onSelectBlock={jest.fn()}
+                    selectedBlock="some-selected-block"
+                    taskStatusEndpoint={taskStatusEndpoint}
+                    reportDownloadEndpoint={reportDownloadEndpoint}
+                    ShowBtnUi="false"
+                />
+            </Provider>,
         );
-        expect(component.find(BlockBrowserContainer).length).toBeFalsy();
-        component.find(Button).find({ label: 'Select a section or problem' }).simulate('click');
-        expect(component.find(BlockBrowserContainer).length).toBeTruthy();
+        const toggleButton = screen.getByRole('button', { name: 'Select a section or problem' });
+        await userEvent.click(toggleButton);
+        await waitFor(() => {
+            expect(screen.findByText('block-browser-container')).resolves.toBeInTheDocument();
+        });
+        await userEvent.click(toggleButton);
+        await waitFor(() => {
+            expect(screen.queryByText('block-browser-container')).toBeNull();
+        });
     });
 });