Fix ace editor warnings in test suite by addressing webpack issue (#2982)

Author: chownces

craco.config.js

@@ -143,7 +143,6 @@ const cracoConfig = {
         ),
         '^.+\\.module\\.(css|sass|scss)$'
       ];
-      jestConfig.moduleNameMapper['ace-builds'] = '<rootDir>/node_modules/ace-builds';
       jestConfig.moduleNameMapper['unist-util-visit-parents/do-not-use-color'] =
         '<rootDir>/node_modules/unist-util-visit-parents/lib';
       jestConfig.moduleNameMapper['vfile/do-not-use-conditional-minpath'] =

src/commons/assessmentWorkspace/__tests__/AssessmentWorkspace.tsx

@@ -1,5 +1,4 @@
 import { act, render, screen } from '@testing-library/react';
-import { require as acequire } from 'ace-builds';
 import { Provider } from 'react-redux';
 import { createMemoryRouter, RouterProvider } from 'react-router';
 import { mockInitialStore } from 'src/commons/mocks/StoreMocks';
@@ -10,12 +9,6 @@ import { EditorBinding, WorkspaceSettingsContext } from 'src/commons/WorkspaceSe
 import { mockAssessments } from '../../mocks/AssessmentMocks';
 import AssessmentWorkspace, { AssessmentWorkspaceProps } from '../AssessmentWorkspace';
 
-jest.mock('ace-builds', () => ({
-  ...jest.requireActual('ace-builds'),
-  require: jest.fn()
-}));
-const acequireMock = acequire as jest.Mock;
-
 const defaultProps = assertType<AssessmentWorkspaceProps>()({
   assessmentId: 0,
   needsPassword: false,
@@ -114,13 +107,6 @@ const getGradingResultTab = (tree: HTMLElement) => tree.querySelector('.GradingR
 const getContestVotingTab = (tree: HTMLElement) => tree.querySelector('.ContestEntryVoting');
 
 describe('AssessmentWorkspace', () => {
-  beforeEach(() => {
-    acequireMock.mockReturnValue({
-      Mode: jest.fn(),
-      setCompleters: jest.fn()
-    });
-  });
-
   test('AssessmentWorkspace page "loading" content renders correctly', async () => {
     const app = createMemoryRouterWithRoutes(mockUndefinedAssessmentWorkspaceProps);
     const tree = await renderTreeJson(app);

src/commons/editor/Editor.tsx

@@ -1,9 +1,23 @@
 /* eslint-disable simple-import-sort/imports */
+
+// Next line necessary to prevent "ReferenceError: ace is not defined" error.
+// See https://github.com/securingsincity/react-ace/issues/1233 (although there is no explanation).
+import 'ace-builds/src-noconflict/ace';
 import 'ace-builds/src-noconflict/ext-language_tools';
 import 'ace-builds/src-noconflict/ext-searchbox';
 import 'ace-builds/src-noconflict/ext-settings_menu';
 import 'js-slang/dist/editors/ace/theme/source';
 
+/**
+ * ace-builds/webpack-resolver is causing some issues in the testing environment.
+ * Without it, we have to manually import the following keybindings to ensure they are packaged
+ * together with the editor during lazy loading.
+ *
+ * Supersedes changes from: https://github.com/source-academy/frontend/issues/2543
+ */
+import 'ace-builds/src-noconflict/keybinding-vim';
+import 'ace-builds/src-noconflict/keybinding-emacs';
+
 import { Card } from '@blueprintjs/core';
 import * as AceBuilds from 'ace-builds';
 import { Ace, require as acequire, createEditSession } from 'ace-builds';

src/commons/editor/EditorContainer.tsx

@@ -1,9 +1,3 @@
-// Necessary to prevent "ReferenceError: ace is not defined" error.
-// See https://github.com/securingsincity/react-ace/issues/1233 (although there is no explanation).
-import 'ace-builds/src-noconflict/ace';
-// For webpack to resolve properly during lazy loading (see https://github.com/source-academy/frontend/issues/2543)
-import 'ace-builds/webpack-resolver';
-
 import _ from 'lodash';
 import React from 'react';
 

src/pages/playground/__tests__/Playground.tsx

@@ -1,6 +1,5 @@
 import { Router } from '@remix-run/router';
 import { act, render } from '@testing-library/react';
-import { require as acequire } from 'ace-builds';
 import { FSModule } from 'browserfs/dist/node/core/FS';
 import { Chapter } from 'js-slang/dist/types';
 import { Provider } from 'react-redux';
@@ -21,13 +20,6 @@ import Playground, { handleHash } from '../Playground';
 (window as any).Inspector = jest.fn();
 (window as any).Inspector.highlightClean = jest.fn();
 
-jest.mock('ace-builds', () => ({
-  ...jest.requireActual('ace-builds'),
-  require: jest.fn()
-}));
-
-const acequireMock = acequire as jest.Mock;
-
 // Using @testing-library/react to render snapshot instead of react-test-renderer
 // as the useRefs require the notion of React DOM
 const renderTree = async (router: Router) => {
@@ -61,10 +53,6 @@ describe('Playground tests', () => {
         )
       }
     ];
-    acequireMock.mockReturnValue({
-      Mode: jest.fn(),
-      setCompleters: jest.fn()
-    });
   });
 
   test('Playground renders correctly', async () => {

src/pages/sicp/subcomponents/__tests__/CodeSnippet.tsx

@@ -1,7 +1,3 @@
-import 'ace-builds';
-import 'ace-builds/webpack-resolver';
-import 'ace-builds/src-noconflict/ace';
-
 import lzString from 'lz-string';
 import { shallowRender } from 'src/commons/utils/TestUtils';