details need to remember in react dev & test

patch libs

ref

• 1. install patch-package

npm i patch-package --save-dev

• 2. modify the source code in third party libs
• 3. generate the .patch

npx patch-package @mantine/core

✔ Created file patches/@mantine+core+7.2.2.patch

remove old source and reinstall

rm -rf node_modules/@mantine/core
bun install 
// npm install

jest

jest can not found canvas

npm i jest-canvas-mock --dev

and add 'canvas' : 'jest-canvas-mock' to moduleNameMapper in jest.config.js.

jest css, svg ...

module.exports = {
    "roots": [
        "<rootDir>",
        "/Users/shezw/dev/web/react/easyvgl-editor"
    ],
    "modulePaths": [
        "<rootDir>",
        "/Users/shezw/dev/web/react/easyvgl-editor"
    ],
    // "moduleDirectories": [
        // "node_modules"
    // ],
    moduleNameMapper: {
        'canvas':'jest-canvas-mock',
        "@mantine/core/styles.css": "<rootDir>/node_modules/@mantine/core/esm/index.css",
        // "@mantine/core/(.*).css": "<rootDir>/node_modules/@mantine/core/esm/$1.css",
    },
    transform: {
        "^.+\\.[t|j]sx?$": "babel-jest",
        "^.+\\App.css$": "jest-transform-css",
        ".+\\.(styl|less|sass|scss|png|jpg|ttf|woff|woff2|svg)$": "jest-transform-stub"
    },
}

jest test throw case

Use a clouse function wrap the test case and check if the result throw an Error.

test('Convert Color to RGBA', ()=>{

    const { toRGBA } = colorConvertor();

    expect( ()=>{ toRGBA("#333444",1000) } ).toThrow(RangeError);
    expect( ()=>{ toRGBA("#333444",-1) } ).toThrow(RangeError);
    expect( ()=>{ toRGBA("#331",50) } ).toThrow(Error);

    expect( toRGBA('#ff3366',100) ).toBe('ff3366ff');
})

jest wrong environment

    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.

https://jestjs.io/docs/configuration#testenvironment-string

https://jestjs.io/docs/tutorial-react

npm install --save-dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

Jest test fails with "window is not defined"

add globals window to jest.config.js

module.exports = {
    globals: {
        "window": {}
    }
}

TypeError: Cannot read properties of undefined (reading 'html')

npm install --dev jest-environment-jsdom

jsdom environment

    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.

    ReferenceError: document is not defined

/**
 * @jest-environment jsdom
 */
import '../jest.mock'
import React from 'react';
import {cleanup, render, screen} from '@testing-library/react';
import App from './App';


afterEach(cleanup);
test('Render App', () => {
    // ...
}

Class constructor Stage cannot be invoked without 'new'

use ts-jest instead of jest

---

TypeError: window.matchMedia is not a function

https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom

src/jest.mock.js

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(),
    })),
});

xx.test.tsx

import '../jest.mock'