Merge pull request #299 from openedx/bilalqamar95/jest-v29-upgrade

feat: updated jest to v29 & frontend-platform major version

jest.config.js

@@ -2,6 +2,10 @@ const path = require('path');
 
 const envConfigPath = path.join(__dirname, 'env.config.js');
 module.exports = {
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: 'http://localhost/',
+  },
   transform: {
     '^.+\\.jsx?$': '<rootDir>/jest-preprocess.js',
   },
@@ -11,10 +15,9 @@ module.exports = {
     'env.config': envConfigPath,
   },
   testPathIgnorePatterns: ['node_modules', '.cache'],
-  transformIgnorePatterns: ['node_modules/(?!(gatsby|@edx/paragon|@edx/frontend-platform|@edx/frontend-component-footer-edx))'],
+  transformIgnorePatterns: ['node_modules/(?!(gatsby|@openedx/paragon|@edx/frontend-platform|@edx/frontend-component-footer-edx))'],
   globals: {
     __PATH_PREFIX__: '',
   },
-  testURL: 'http://localhost',
   setupFiles: ['<rootDir>/setupTest.js'],
 };

package.json

@@ -6,15 +6,15 @@
   "author": "",
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer-edx": "^6.5.0",
-    "@edx/frontend-platform": "^5.5.4",
+    "@edx/frontend-component-footer-edx": "7.1.0",
+    "@edx/frontend-platform": "8.0.0",
     "@edx/gatsby-source-portal-designer": "^1.1.4",
-    "@edx/paragon": "^20.45.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.17",
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.8.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "babel-jest": "^24.5.0",
+    "@openedx/paragon": "^21.11.3",
+    "babel-jest": "^29.7.0",
     "babel-preset-gatsby": "^2.13.0",
     "classnames": "^2.2.5",
     "dotenv": "^7.0.0",
@@ -35,7 +35,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "react-intl": "^5.25.0",
+    "react-intl": "6.4.7",
     "react-redux": "7.2.9",
     "react-responsive": "^8.2.0",
     "react-router": "^6.16.0",
@@ -54,7 +54,7 @@
     "@babel/core": "^7.18.5",
     "@babel/eslint-parser": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
-    "@edx/eslint-config": "^3.1.0",
+    "@edx/eslint-config": "^4.0.0",
     "@testing-library/react": "^12.1.5",
     "autoprefixer": "^9.4.5",
     "axios": "^0.28.0",
@@ -68,7 +68,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^0.14.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^24.5.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "prettier": "^1.16.4",
     "redux-mock-store": "^1.5.1",
     "sass": "^1.49.9"

src/__mocks__/reactResponsive.mock.js

@@ -11,7 +11,7 @@ const mockMediaQueryProps = MediaQueryProps;
 // size using the `Responsive` components, we must mock the window size in our tests. To change
 // the window size for a specific test, include `global.innerWidth = <width>`.
 jest.mock('react-responsive', () => {
-  const MediaQuery = require.requireActual('react-responsive').default;
+  const MediaQuery = jest.requireActual('react-responsive').default;
 
   const MockMediaQuery = (props = mockMediaQueryProps) => {
     const defaultWidth = mockWindow.innerWidth;

src/components/course-enrollments/CourseEnrollments.jsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { breakpoints, Alert } from '@edx/paragon';
-import { Warning, CheckCircle } from '@edx/paragon/icons';
+import { breakpoints, Alert } from '@openedx/paragon';
+import { Warning, CheckCircle } from '@openedx/paragon/icons';
 import { AppContext } from '@edx/frontend-platform/react';
 import MediaQuery from 'react-responsive';
 import { LoadingSpinner } from '../loading-spinner';

src/components/course-enrollments/CourseSection.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { Collapsible } from '@edx/paragon';
+import { Collapsible } from '@openedx/paragon';
 import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
 
 import {

src/components/course-enrollments/course-cards/BaseCourseCard.jsx

@@ -7,7 +7,7 @@ import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { AppContext } from '@edx/frontend-platform/react';
 import { faCog } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Dropdown } from '@edx/paragon';
+import { Dropdown } from '@openedx/paragon';
 
 import { EmailSettingsModal } from './email-settings';
 

src/components/course-enrollments/course-cards/UpcomingCourseCard.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import BaseCourseCard from './BaseCourseCard';
 

src/components/course-enrollments/course-cards/email-settings/EmailSettingsModal.jsx

@@ -3,8 +3,8 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
   Input, Modal, Alert, StatefulButton,
-} from '@edx/paragon';
-import { Warning } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { Warning } from '@openedx/paragon/icons';
 
 import { updateEmailSettings } from './data';
 

src/components/course-enrollments/course-cards/email-settings/styles/EmailSettingsModal.scss

@@ -1,5 +1,5 @@
 @import "@edx/brand/paragon/variables";
-@import "@edx/paragon/scss/core/core";
+@import "@openedx/paragon/scss/core/core";
 @import "@edx/brand/paragon/overrides";
 
 .modal {

src/components/course-enrollments/course-cards/email-settings/tests/EmailSettingsModal.test.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import {
+  fireEvent, render, screen, waitFor,
+} from '@testing-library/react';
 import thunk from 'redux-thunk';
 import configureMockStore from 'redux-mock-store';
 
@@ -55,18 +57,18 @@ describe('<EmailSettingsModal />', () => {
   it('statefulbutton component state is set to complete after click event', async () => {
     // Note: The following line is needed to properly resolve the
     // `updateEmailSettings` promise.
-    const flushPromises = () => new Promise(setImmediate);
     const buttonElement = screen.getAllByRole('button');
 
     expect(screen.getByText('Save')).toBeTruthy();
     expect(screen.queryByText('Saved')).toBeFalsy();
 
     fireEvent.click(screen.getByRole('checkbox'));
     fireEvent.click(buttonElement[buttonElement.length - 1]);
-    await flushPromises();
 
     expect(mockUpdateEmailSettings.mock.calls.length).toBe(1);
-    expect(screen.getByText('Saved')).toBeTruthy();
-    expect(screen.queryByText('Save')).toBeFalsy();
+    waitFor(() => {
+      expect(screen.getByText('Saved')).toBeTruthy();
+      expect(screen.queryByText('Save')).toBeFalsy();
+    });
   });
 });

src/components/course-enrollments/course-cards/styles/CourseCard.scss

@@ -1,5 +1,5 @@
 @import "@edx/brand/paragon/variables";
-@import "@edx/paragon/scss/core/core";
+@import "@openedx/paragon/scss/core/core";
 @import "@edx/brand/paragon/overrides";
 
 .course {

src/components/course-enrollments/styles/CourseSection.scss

@@ -1,5 +1,5 @@
 @import "@edx/brand/paragon/variables";
-@import "@edx/paragon/scss/core/core";
+@import "@openedx/paragon/scss/core/core";
 @import "@edx/brand/paragon/overrides";
 
 .collapsible-trigger {

src/components/course-enrollments/tests/CourseEnrollments.test.jsx

@@ -4,7 +4,7 @@ import { Provider } from 'react-redux';
 import { fireEvent, render } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { breakpoints } from '@edx/paragon';
+import { breakpoints } from '@openedx/paragon';
 import { AppContext } from '@edx/frontend-platform/react';
 import { Context as ResponsiveContext } from 'react-responsive';
 import { IntlProvider } from 'react-intl';

src/components/layout/styles/Layout.scss

@@ -1,5 +1,5 @@
 @import "@edx/brand/paragon/variables";
-@import "@edx/paragon/scss/core/core";
+@import "@openedx/paragon/scss/core/core";
 @import "@edx/brand/paragon/overrides";
 
 $fa-font-path: "~font-awesome/fonts";

src/components/program/ProgramPage.jsx

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import MediaQuery from 'react-responsive';
-import { breakpoints, Alert } from '@edx/paragon';
-import { Warning } from '@edx/paragon/icons';
+import { breakpoints, Alert } from '@openedx/paragon';
+import { Warning } from '@openedx/paragon/icons';
 import { sendPageEvent } from '@edx/frontend-platform/analytics';
 
 import { Layout, MainContent, Sidebar } from '../layout';

src/components/program/TabularView.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Tabs, Tab } from '@edx/paragon';
+import { Tabs, Tab } from '@openedx/paragon';
 import * as ProgramTabs from './tab-components';
 // i18n
 import messages from './TabularView.messages';

src/components/program/hero/styles/Hero.scss

@@ -1,4 +1,4 @@
-@import "~@edx/paragon/scss/core/core.scss";
+@import "~@openedx/paragon/scss/core/core.scss";
 
 .hero {
   position: relative;

src/components/program/sidebar/Links.jsx

@@ -7,7 +7,7 @@ import {
   faChevronUp,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 class Links extends Component {
   constructor(props) {

src/components/program/styles/ProgramPage.scss

@@ -1,5 +1,5 @@
 @import "@edx/brand/paragon/variables";
-@import "@edx/paragon/scss/core/core";
+@import "@openedx/paragon/scss/core/core";
 @import "@edx/brand/paragon/overrides";
 
 // temporary override

src/components/program/tab-components/JourneyTab.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import MediaQuery from 'react-responsive';
-import { breakpoints } from '@edx/paragon';
+import { breakpoints } from '@openedx/paragon';
 
 import { MainContent, Sidebar } from '../../layout';
 import { ProgramMainContent } from '../main-content';

src/components/programs-list/ProgramListPage.jsx

@@ -3,8 +3,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { sendPageEvent } from '@edx/frontend-platform/analytics';
-import { Alert } from '@edx/paragon';
-import { Warning } from '@edx/paragon/icons';
+import { Alert } from '@openedx/paragon';
+import { Warning } from '@openedx/paragon/icons';
 import { Layout } from '../layout';
 import { LoadingSpinner } from '../loading-spinner';
 

src/components/programs-list/styles/ProgramListPage.scss

@@ -1,5 +1,5 @@
 @import "@edx/brand/paragon/variables";
-@import "@edx/paragon/scss/core/core";
+@import "@openedx/paragon/scss/core/core";
 @import "@edx/brand/paragon/overrides";
 
 // temporary override

src/components/site-header/Header.scss

@@ -1,5 +1,5 @@
 @import "@edx/brand/paragon/variables";
-@import "@edx/paragon/scss/core/core";
+@import "@openedx/paragon/scss/core/core";
 @import "@edx/brand/paragon/overrides";
 
 $spacer: 1rem;