fix: jest config

packages/viewer/babel.config.js

@@ -1,12 +1,6 @@
 module.exports = {
   presets: [
-    [
-      '@babel/preset-env',
-      {
-        targets: {
-          node: 'current',
-        },
-      },
-    ],
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
   ],
 };

packages/viewer/jest.config.js

@@ -1,5 +1,4 @@
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'node',
+  testEnvironment: 'jsdom',
 };

packages/viewer/package.json

@@ -19,13 +19,13 @@
     "@wiris/mathtype-html-integration-devkit": "1.17.1"
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.24.1",
     "@types/jest": "^29.5.12",
-    "@types/jsdom": "^21.1.6",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
-    "jest": "^29.1.2",
-    "jsdom": "^24.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lite-server": "^2.5.4",
-    "ts-jest": "^29.1.2",
     "ts-loader": "^9.4.2",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.0",

packages/viewer/src/mathml.spec.ts

@@ -1,18 +1,6 @@
 import { JSDOM } from "jsdom";
 import { serializeHtmlToXml } from "./mathml"; // adjust the import path as needed
 
-
-/**
- * Map DOMParser, XMLSerializer, and document from the JSDOM window to the global object.
- * This is done to make these objects available to Jest for testing purposes.
- *
- * - DOMParser: Used within the tests.
- * - XMLSerializer, document: Used within the function being tested .
- */
-global.DOMParser = new JSDOM().window.DOMParser;
-global.XMLSerializer = new JSDOM().window.XMLSerializer;
-global.document = new JSDOM().window.document;
-
 describe("serializeHtmlToXml", () => {
   const testCases = [
     `<math />`,
@@ -173,6 +161,22 @@ describe("serializeHtmlToXml", () => {
     `<math xmlns="http://www.w3.org/1998/Math/MathML"><mo mathvariant="bold" mathcolor="#7F0000" mathsize="48px">&#xAB;</mo><mo mathvariant="bold" mathcolor="#7F0000" mathsize="48px">&lt;</mo><mo mathvariant="bold" mathcolor="#7F0000" mathsize="48px">&#xBB;</mo><mo mathvariant="bold" mathcolor="#7F0000" mathsize="48px">&gt;</mo><mo mathvariant="bold" mathcolor="#7F0000" mathsize="48px">&#xA7;</mo><mo mathvariant="bold" mathcolor="#7F0000" mathsize="48px">&amp;</mo><mo mathvariant="bold" mathcolor="#7F0000" mathsize="48px">&#xA8;</mo><mo mathvariant="bold" mathcolor="#7F0000" mathsize="48px">&quot;</mo><mo mathvariant="bold" mathcolor="#7F0000" mathsize="48px">'</mo><mo mathvariant="bold" mathcolor="#7F0000" mathsize="48px">'</mo></math>`,
   ];
 
+/**
+ * This test suite validates the functionality of the `serializeHtmlToXml` function.
+ * The function is expected to convert valid HTML into valid XML.
+ *
+ * Each test case follows these steps:
+ * 1. An input HTML string is passed to the `serializeHtmlToXml` function, which returns an XML string.
+ * 2. The XML string is parsed as text/xml using the DOMParser's.
+ * 3. The parsed XML document is checked for `parsererror` nodes.
+ *
+ * If the XML document contains any `parsererror` nodes, it indicates that the `serializeHtmlToXml` function
+ * did not correctly convert the HTML to valid XML, causing the DOMParser to encounter errors during parsing.
+ * In this case, the test will fail.
+ *
+ * If no `parsererror` nodes are found, it indicates that the `serializeHtmlToXml` function correctly converted
+ * the HTML to valid XML, and the test will pass.
+ */
   testCases.forEach((input, index) => {
     it(`Test ${index}: ${input.slice(0, 40)} ...`, () => {
       const parser = new global.DOMParser();