chore(tests): migrate test cases from Enzyme to React Testing Library

Author: psrigummadidala

jest.config.js

@@ -1,7 +1,15 @@
 const { createConfig } = require('@openedx/frontend-build');
-
+const { TestEnvironment } = require('jest-environment-jsdom');
 module.exports = createConfig('jest', {
   setupFiles: ['<rootDir>/src/setupTest.js'],
+  testEnvironment: 'jsdom',
+  
+  
+  
+ setupFilesAfterEnv: ['@testing-library/jest-dom'],
+ 
+
+ 
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*.{js,jsx}'],
   coveragePathIgnorePatterns: [

package-lock.json

@@ -16,7 +16,7 @@
     "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
     "start": "fedx-scripts webpack-dev-server --progress",
     "debug-test": "node --inspect-brk node_modules/.bin/jest --coverage --runInBand",
-    "test": "TZ=UTC fedx-scripts jest --coverage --maxWorkers=2",
+    "test": "fedx-scripts jest --coverage --maxWorkers=2",
     "test:watch": "npm run test -- --watch",
     "snapshot": "fedx-scripts jest --updateSnapshot"
   },
@@ -31,15 +31,15 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-enterprise-utils": "9.1.0",
-    "@edx/frontend-platform": "^8.3.2",
+    "@edx/frontend-enterprise-utils": "^10.0.0",
+    "@edx/frontend-platform": "^8.5.0",
     "@edx/openedx-atlas": "^0.6.0",
     "@fortawesome/fontawesome-svg-core": "1.2.32",
     "@fortawesome/free-brands-svg-icons": "5.15.1",
     "@fortawesome/free-regular-svg-icons": "5.15.1",
     "@fortawesome/free-solid-svg-icons": "5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.14",
-    "@openedx/paragon": "^23.4.2",
+    "@openedx/paragon": "^22.17.0",
     "axios": "^1.7.7",
     "babel-polyfill": "6.26.0",
     "classnames": "2.2.6",
@@ -48,36 +48,34 @@
     "lodash.snakecase": "4.1.1",
     "moment": "2.29.4",
     "prop-types": "15.7.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-helmet": "^6.1.0",
-    "react-redux": "^7.2.9",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-helmet-async": "^2.0.4",
+    "react-redux": "^8.1.3",
     "react-responsive": "^8.2.0",
     "react-router": "6.15.0",
     "react-router-dom": "6.15.0",
     "react-table": "^7.6.3",
     "react-transition-group": "4.4.1",
-    "redux": "4.0.5",
+    "redux": "^4.2.1",
     "use-context-selector": "1.4.1",
     "uuid": "9.0.0"
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.0",
     "@edx/reactifex": "^1.0.3",
-    "@openedx/frontend-build": "^14.3.3",
-    "@testing-library/dom": "^9.3.4",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "12.1.4",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@emotion/jest": "^11.13.0",
+    "@openedx/frontend-build": "^14.6.0",
+    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/react": "^14.3.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/react-table": "^7.7.2",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "axios-mock-adapter": "^1.19.0",
-    "enzyme": "3.11.0",
     "glob": "7.1.6",
     "jest": "^29.7.0",
+    "jest-emotion": "^11.0.0",
     "jest-environment-jsdom": "^29.7.0",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.3.1",
     "reactifex": "1.1.1"
   }
 }

package.json

@@ -1,9 +1,13 @@
-import { mount } from 'enzyme';
 import React from 'react';
-import { waitFor } from '@testing-library/react';
+import { render,screen,waitFor } from '@testing-library/react';
+
+import '@testing-library/jest-dom';
+
+
+
 import FeatureBasedEnrollment from './FeatureBasedEnrollment';
 import UserMessagesProvider from '../userMessages/UserMessagesProvider';
-import { fbeEnabledResponse } from './data/test/featureBasedEnrollment';
+
 
 import * as api from './data/api';
 
@@ -19,67 +23,49 @@ describe('Feature Based Enrollment', () => {
     apiFetchSignal: true,
   };
 
-  let wrapper;
-
-  beforeEach(async () => {
-    // api file has only one default export, so that will be spied-on
-    jest.spyOn(api, 'default').mockImplementationOnce(() => Promise.resolve(fbeEnabledResponse));
-    wrapper = mount(<FeatureBasedEnrollmentWrapper {...props} />);
-  });
+  it('renders title when FBE data is fetched', async () => {
+    render(<FeatureBasedEnrollmentWrapper {...props} />);
+    await waitFor(() => {
+        expect(screen.getByText('Feature Based Enrollment Configuration')).toBeInTheDocument();
+    });
 
-  afterEach(() => {
-    wrapper.unmount();
   });
+  it('shows no record message when no FBE data',async () => {
+    jest.spyOn(api,'default').mockImplementationOnce(() => Promise.resolve({}));
+    render(<FeatureBasedEnrollmentWrapper {...props} />);
+    await waitFor(() => {
+        expect(screen.getByText('No Feature Based Enrollment Configurations were found.')).toBeInTheDocument();
+    });
+});
+it('shows loading message initially', () => {
+    render(<FeatureBasedEnrollmentWrapper {...props} />);
+    expect(screen.getByText(/Loading/i)).toBeInTheDocument();
+});
 
-  it('default props', () => {
-    const courseId = wrapper.prop('courseId');
-    expect(courseId).toEqual(props.courseId);
-  });
+it('shows error alert an API error', async () => {
+    const fbeErrors = {
+        errors: [
+            {
+                code: null,
+                dismissible: true,
+                text: 'Error fetching FBE Data',
+                type: 'error',
+                topic:'featureBasedEnrollment',
+            },
+        ],
+    };
 
-  it('Successful fetch for FBE data', async () => {
-    const cardList = wrapper.find('Card');
-    const courseTitle = wrapper.find('h4');
 
-    waitFor(() => {
-      expect(cardList).toHaveLength(2);
-      expect(wrapper.find('h3#fbe-title-header').text()).toEqual('Feature Based Enrollment Configuration');
-      expect(courseTitle.text()).toEqual('Course Title: test course');
+    jest.spyOn(api,'default').mockImplementationOnce(() => Promise.resolve(fbeErrors));
+    render(<FeatureBasedEnrollmentWrapper {...props} />);
+    await waitFor(() => {
+        expect(screen.getByText('Error fetching FBE Data')).toBeInTheDocument();
     });
-  });
+   });
+});
 
-  it('No FBE Data', async () => {
-    jest.spyOn(api, 'default').mockImplementationOnce(() => Promise.resolve({}));
-    wrapper = mount(<FeatureBasedEnrollmentWrapper {...props} />);
 
-    const cardList = wrapper.find('Card');
-    const noRecordMessage = wrapper.find('p');
 
-    expect(cardList).toHaveLength(0);
-    expect(wrapper.find('h3#fbe-title-header').text()).toEqual('Feature Based Enrollment Configuration');
-    waitFor(() => expect(noRecordMessage.text()).toEqual('No Feature Based Enrollment Configurations were found.'));
-  });
 
-  it('Page Loading component render', async () => {
-    wrapper = mount(<FeatureBasedEnrollmentWrapper {...props} />);
-    expect(wrapper.find('PageLoading').html()).toEqual(expect.stringContaining('Loading'));
-  });
 
-  it('Error fetching FBE data', async () => {
-    const fbeErrors = {
-      errors: [
-        {
-          code: null,
-          dismissible: true,
-          text: 'Error fetching FBE Data',
-          type: 'error',
-          topic: 'featureBasedEnrollment',
-        },
-      ],
-    };
-    jest.spyOn(api, 'default').mockImplementationOnce(() => Promise.resolve(fbeErrors));
-    wrapper = mount(<FeatureBasedEnrollmentWrapper {...props} />);
 
-    const alert = wrapper.find('.alert');
-    waitFor(() => expect(alert.text()).toEqual('Error fetching FBE Data'));
-  });
-});

src/FeatureBasedEnrollments/FeatureBasedEnrollment.test.jsx

@@ -1,5 +1,5 @@
-import { mount } from 'enzyme';
 import React from 'react';
+import { render, screen, within, cleanup } from '@testing-library/react';
 import FeatureBasedEnrollmentCard from './FeatureBasedEnrollmentCard';
 import {
   fbeDurationConfigEnabled,
@@ -9,77 +9,79 @@ import {
 } from './data/test/featureBasedEnrollment';
 
 describe('Feature Based Enrollment Card Component', () => {
-  let wrapper;
+  afterEach(cleanup);
 
-  afterEach(() => {
-    wrapper.unmount();
-  });
+  describe('Gating Config Enabled', () => {
+    const title = 'Gating Config Enabled';
+
+    it('Gating Config Enabled', () => {
+      render(<FeatureBasedEnrollmentCard title="Gating Config Enabled" fbeData={fbeGatingConfigEnabled} />);
 
-  describe('Gating config', () => {
-    const title = 'Gating Config';
+      expect(screen.getByText('Gating Config Enabled')).toBeInTheDocument();
 
-    it('Gating config enabled', () => {
-      wrapper = mount(<FeatureBasedEnrollmentCard title={title} fbeData={fbeGatingConfigEnabled} />);
-      const header = wrapper.find('.card-title');
-      const dataTable = wrapper.find('table.fbe-table tr');
-      const dateRow = dataTable.at(0);
-      const reasonRow = dataTable.at(1);
+      const rows = screen.getAllByRole('row');
+      const dateRow = within(rows[0]);
+      const reasonRow = within(rows[1]);
 
-      expect(header.text()).toEqual('Gating Config Enabled');
-      expect(dateRow.find('th').at(0).text()).toEqual('Enabled As Of');
-      expect(dateRow.find('td').at(0).text()).toEqual('Jan 1, 2020 12:00 AM');
+      expect(dateRow.getByText('Enabled As Of')).toBeInTheDocument();
+      expect(dateRow.getByText('Jan 1, 2020 12:00 AM')).toBeInTheDocument();
 
-      expect(reasonRow.find('th').at(0).text()).toEqual('Reason');
-      expect(reasonRow.find('td').at(0).text()).toEqual('Site');
+      expect(reasonRow.getByText('Reason')).toBeInTheDocument();
+      expect(reasonRow.getByText('Site')).toBeInTheDocument();
     });
 
-    it('Gating config disabled', () => {
-      wrapper = mount(<FeatureBasedEnrollmentCard title={title} fbeData={fbeGatingConfigDisabled} />);
-      const header = wrapper.find('.card-title');
-      const dataTable = wrapper.find('table.fbe-table tr');
-      const dateRow = dataTable.at(0);
-      const reasonRow = dataTable.at(1);
+    it("Gating config disabled", () => {
+      render(<FeatureBasedEnrollmentCard title="Gating config disabled" fbeData={fbeGatingConfigDisabled} />);
+
+      expect(screen.getByText("Gating config disabled")).toBeInTheDocument();
 
-      expect(header.text()).toEqual('Gating Config Disabled');
-      expect(dateRow.find('th').at(0).text()).toEqual('Enabled As Of');
-      expect(dateRow.find('td').at(0).text()).toEqual('N/A');
+      const rows = screen.getAllByRole('row');
+      const dateRow = within(rows[0]);
+      const reasonRow = within(rows[1]);
 
-      expect(reasonRow.find('th').at(0).text()).toEqual('Reason');
-      expect(reasonRow.find('td').at(0).text()).toEqual('');
+      expect(dateRow.getByText('Enabled As Of')).toBeInTheDocument();
+      expect(dateRow.getByText('N/A')).toBeInTheDocument();
+
+      expect(reasonRow.getByText('Reason')).toBeInTheDocument();
+      expect(reasonRow.queryByText('Site')).not.toBeInTheDocument();
     });
   });
 
-  describe('Duration config', () => {
-    const title = 'Duration Config';
+  describe('Duration Config Enabled', () => {
+    const title = 'Duration Config Enabled';
 
     it('Duration config enabled', () => {
-      wrapper = mount(<FeatureBasedEnrollmentCard title={title} fbeData={fbeDurationConfigEnabled} />);
-      const header = wrapper.find('.card-title');
-      const dataTable = wrapper.find('table.fbe-table tr');
-      const dateRow = dataTable.at(0);
-      const reasonRow = dataTable.at(1);
-
-      expect(header.text()).toEqual('Duration Config Enabled');
-      expect(dateRow.find('th').at(0).text()).toEqual('Enabled As Of');
-      expect(dateRow.find('td').at(0).text()).toEqual('Feb 1, 2020 12:00 AM');
-
-      expect(reasonRow.find('th').at(0).text()).toEqual('Reason');
-      expect(reasonRow.find('td').at(0).text()).toEqual('Site Config');
+      render(<FeatureBasedEnrollmentCard title="Duration Config Enabled" fbeData={fbeDurationConfigEnabled} />);
+
+      expect(screen.getByText('Duration Config Enabled')).toBeInTheDocument();
+
+      const rows = screen.getAllByRole('row');
+      const dateRow = within(rows[0]);
+      const reasonRow = within(rows[1]);
+
+      expect(dateRow.getByText('Enabled As Of')).toBeInTheDocument();
+      expect(dateRow.getByText('Feb 1, 2020 12:00 AM')).toBeInTheDocument();
+
+      expect(reasonRow.getByText('Reason')).toBeInTheDocument();
+      expect(reasonRow.getByText('Site Config')).toBeInTheDocument();
     });
 
-    it('Duration config disabled', () => {
-      wrapper = mount(<FeatureBasedEnrollmentCard title={title} fbeData={fbeDurationConfigDisabled} />);
-      const header = wrapper.find('.card-title');
-      const dataTable = wrapper.find('table.fbe-table tr');
-      const dateRow = dataTable.at(0);
-      const reasonRow = dataTable.at(1);
+    
+
+    it('Duration Config Disabled', () => {
+      render(<FeatureBasedEnrollmentCard title="Duration Config Disabled" fbeData={fbeDurationConfigDisabled} />);
+
+      expect(screen.getByText('Duration Config Disabled')).toBeInTheDocument();
+
+      const rows = screen.getAllByRole('row');
+      const dateRow = within(rows[0]);
+      const reasonRow = within(rows[1]);
 
-      expect(header.text()).toEqual('Duration Config Disabled');
-      expect(dateRow.find('th').at(0).text()).toEqual('Enabled As Of');
-      expect(dateRow.find('td').at(0).text()).toEqual('N/A');
+      expect(dateRow.getByText('Enabled As Of')).toBeInTheDocument();
+      expect(dateRow.getByText('N/A')).toBeInTheDocument();
 
-      expect(reasonRow.find('th').at(0).text()).toEqual('Reason');
-      expect(reasonRow.find('td').at(0).text()).toEqual('');
+      expect(reasonRow.getByText('Reason')).toBeInTheDocument();
+      expect(reasonRow.queryByText('Site Config')).not.toBeInTheDocument();
     });
   });
-});
+});