Testing Bryntum Grid with Jest

Here's what this file does:

• Defines moduleNameMapper to transform import paths to remove any .js extensions. ECMAScript modules support the .js extension when importing but CommonJS doesn't, so we need to remove these extensions in the transpiled code. The module mapper uses a regular expression to filter imports that are relative paths starting with ./ or ../ and ending with .js.

• Specifies the test environment to be used in testEnvironment: 'jsdom'.

• Uses preset: 'ts-jest/presets/js-with-ts to configure the Jest Transformer to transform TypeScript and JavaScript files (.ts, .tsx, .js, .jsx) to CommonJS syntax.

• Overrides the default Jest ignore behavior with transformIgnorePatterns. By default, Jest ignores all files in node_modules when transforming, as those modules are usually ready to run and need no further transpiling. However, since we need to transform the Bryntum modules specifically, we need to override the exemption using this parameter to specify the Bryntum modules in use.

• Specifies the setup file setupTests.ts to run before any tests are run. We'll add this file in the next step and use it to configure browser mocking methods.

Adding the global Jest setup file

When testing frontend code with Node, there may be instances where the lack of a browser raises issues.

Two potential issues that may arise from the browser being unavailable are Error: Not implemented: window.computedStyle(elt, pseudoElt) and TypeError: window.matchMedia is not a function.

These and other similar errors can be resolved by mocking the browser methods. We will use the setupTests.ts file to mock the browser.

Create the setupTests.ts file in the root directory of the project and copy the following code to it:

// jest-dom adds custom jest matchers for asserting on DOM nodes.  
// allows you to do things like:  
// expect(element).toHaveTextContent(/react/i)  
// learn more: https://github.com/testing-library/jest-dom  
import '@testing-library/jest-dom/jest-globals';
import '@testing-library/jest-dom';

Object.defineProperty(window, 'matchMedia', {
    writable : true,
    value    : jest.fn().mockImplementation(query => ({
        matches             : false,
        media               : query,
        onchange            : null,
        addListener         : jest.fn(), // Deprecated
        removeListener      : jest.fn(), // Deprecated
        addEventListener    : jest.fn(),
        removeEventListener : jest.fn(),
        dispatchEvent       : jest.fn()
    }))
});

// store the original function
const originalGetComputedStyle = window.getComputedStyle;

// mock the function
Object.defineProperty(window, 'getComputedStyle', {
    writable : true,
    value    : jest.fn((elt, pseudoElt) => {
        return originalGetComputedStyle(elt);
    })
});

Switching the target module type

We need to change the target module type in the tsconfig.json file to CommonJS from the current ESCAScript.

Navigate to the tsconfig.json file and make the following changes:

• In compilerOptions, change the target parameter to "es2022".
• In the lib array, remove the line "esnext".
• In compilerOptions, change the module parameter to "commonjs".

Your changed tsconfig.json file should look similar to the following:

{
  "compilerOptions": {
    "target": "es2022",
    "lib": [
      "dom",
      "dom.iterable",
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Updating package.json

The last change we need to make is to update package.json to include the new dependencies we need.

First, in devDependencies, remove the "@types/react-dom" line. This dependency is not needed as we will replace it with another.

In devDependencies, add the following lines:

"jsdom": "^24.0.0",
"typescript": "^4.9.5",
"jest-environment-jsdom": "^29.7.0",
"ts-jest": "^29.1.3",
"ts-node": "^10.9.2",
"jest":"^29.7.0"

These are the new dependencies we need.

Finally, in scripts, add the line:

"jest": "jest"

We add this because the version of Jest npm test tries to run doesn't support the functionality we need. Therefore, to run tests with Jest after making all the changes, we will run npm run jest. You can also use the Jest plugins or extensions that are available for most IDEs.

Running the test

After we've made all of these changes, let's rerun the install and test commands:

npm install
npm run jest

And our test passes successfully!

 PASS src/SimpleGrid.test.tsx (33.36 s)
  √ Renders Simple Grid (2187 ms)

Test Suites: 1 passed, 1 total 
Tests:       1 passed, 1 total 

Resources

• Jest
• Testing Library