test: use ts compiler in cli tests (freeCodeCamp#62783)

Author: ojeytonwilliams

curriculum/package.json

@@ -49,6 +49,7 @@
     "@types/js-yaml": "4.0.5",
     "@types/polka": "^0.5.7",
     "@types/string-similarity": "^4.0.2",
+    "@typescript/vfs-1.6.1": "npm:@typescript/[email protected]",
     "@vitest/ui": "^3.2.4",
     "eslint": "^9.39.1",
     "glob": "8.1.0",
@@ -64,6 +65,7 @@
     "puppeteer": "22.12.1",
     "sirv": "^3.0.2",
     "string-similarity": "4.0.4",
+    "typescript-5.9.2": "npm:[email protected]",
     "vitest": "^3.2.4"
   }
 }

curriculum/src/test/test-challenges.js

@@ -1,11 +1,8 @@
-import { describe, it, beforeAll, expect } from 'vitest';
+import { describe, it, beforeAll, expect, vi } from 'vitest';
+
 import jsdom from 'jsdom';
 import lodash from 'lodash';
 
-import {
-  buildChallenge,
-  runnerTypes
-} from '../../../client/src/templates/Challenges/utils/build';
 import {
   challengeTypes,
   hasNoSolution
@@ -28,6 +25,32 @@ import { sortChallenges } from './utils/sort-challenges.js';
 
 const { flatten, isEmpty, cloneDeep } = lodash;
 
+vi.mock(
+  '../../../client/src/templates/Challenges/utils/typescript-worker-handler',
+  async importOriginal => {
+    const actual = await importOriginal();
+
+    // ts and tsvfs must match the versions used in the typescript-worker.
+    const tsvfs = await import('@typescript/vfs-1.6.1');
+    const ts = await import('typescript-5.9.2');
+    // use the same TS compiler as the client
+    const tsCompiler = await import(
+      '../../../tools/client-plugins/browser-scripts/modules/typescript-compiler'
+    );
+    const compiler = new tsCompiler.Compiler(ts, tsvfs);
+    await compiler.setup({ useNodeModules: true });
+    return {
+      ...actual,
+      checkTSServiceIsReady: () => Promise.resolve(true),
+      compileTypeScriptCode: code => {
+        const { result, error } = compiler.compile(code, 'index.tsx');
+        if (error) throw error;
+        return result;
+      }
+    };
+  }
+);
+
 const dom = new jsdom.JSDOM('');
 global.document = dom.window.document;
 global.DOMParser = dom.window.DOMParser;
@@ -86,13 +109,13 @@ export async function defineTestsForBlock(testFilter) {
 
   const challengeData = { meta, challenges, lang };
 
-  describe('Check challenges', () => {
+  describe('Check challenges', async () => {
     beforeAll(async () => {
       page = await newPageContext();
       global.Worker = createPseudoWorker(page);
     });
 
-    populateTestsForLang(challengeData, () => page);
+    await populateTestsForLang(challengeData, () => page);
   });
 }
 
@@ -123,7 +146,13 @@ export async function getChallenges(lang, filters) {
   return sortChallenges(challenges);
 }
 
-function populateTestsForLang({ lang, challenges, meta }) {
+async function populateTestsForLang({ lang, challenges, meta }) {
+  // We have to dynamically import this because otherwise it will not be mocked.
+  // Presumably this is because we import from_this file in the generated block
+  // test files and that happens before the mock is applied.
+  const { buildChallenge } = await import(
+    '../../../client/src/templates/Challenges/utils/build'
+  );
   const validateChallenge = challengeSchemaValidator();
 
   describe(`Language: ${lang}`, function () {
@@ -341,6 +370,10 @@ async function createTestRunner(
   buildChallenge,
   solutionFromNext
 ) {
+  const { runnerTypes } = await import(
+    '../../../client/src/templates/Challenges/utils/build'
+  );
+
   const challengeFiles = replaceChallengeFilesContentsWithSolutions(
     challenge.challengeFiles,
     solutionFiles