element-web/apps/web/test/setupTests.ts

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

import { env } from "process";
import "@testing-library/jest-dom";
import "blob-polyfill";
import { secureRandomString } from "matrix-js-sdk/src/randomstring";
import { mocked } from "jest-mock";

import { PredictableRandom } from "./test-utils/predictableRandom";
import * as rageshake from "../src/rageshake/rageshake";

declare global {
    // eslint-disable-next-line no-var
    var IS_REACT_ACT_ENVIRONMENT: boolean;
}

globalThis.IS_REACT_ACT_ENVIRONMENT = true;

const REACT_USE_ID = /_r_[a-z0-9]+_/g;

function normaliseReactUseIds(snapshot: string): string {
    // React useId values can vary between runs and make snapshots flaky:
    // https://github.com/element-hq/element-web/issues/31765
    // Avoid running the regex for DOM snapshots without React useId output.
    if (!snapshot.includes("_r_")) return snapshot;

    const ids = new Map<string, string>();
    let nextId = 1;

    return snapshot.replace(REACT_USE_ID, (id) => {
        let replacement = ids.get(id);
        if (!replacement) {
            replacement = `react-use-id-${nextId++}`;
            ids.set(id, replacement);
        }
        return replacement;
    });
}

// Prevent this serializer from recursively matching the same DOM node when it calls serialize().
let isSerializingDomSnapshot = false;

expect.addSnapshotSerializer({
    test: (value: unknown): value is Element | DocumentFragment =>
        !isSerializingDomSnapshot && (value instanceof Element || value instanceof DocumentFragment),
    print: (value: unknown, serialize: (value: unknown) => string): string => {
        isSerializingDomSnapshot = true;
        try {
            return normaliseReactUseIds(serialize(value));
        } finally {
            isSerializingDomSnapshot = false;
        }
    },
});

// Fake random strings to give a predictable snapshot for IDs
jest.mock("matrix-js-sdk/src/randomstring");
beforeEach(() => {
    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    const mockRandom = new PredictableRandom();
    // needless to say, the mock is not cryptographically secure
    mocked(secureRandomString).mockImplementation((len) => {
        let ret = "";
        for (let i = 0; i < len; ++i) {
            const v = mockRandom.get() * chars.length;
            const m = ((v % chars.length) + chars.length) % chars.length; // account for negative modulo
            ret += chars.charAt(Math.floor(m));
        }
        return ret;
    });
});

// Somewhat hacky workaround for https://github.com/jestjs/jest/issues/15747: if the GHA reporter is enabled,
// capture logs using the rageshake infrastructure, then dump them out after the test.
if (env["GITHUB_ACTIONS"] !== undefined) {
    beforeEach(async () => {
        await rageshake.init(/* setUpPersistence = */ false);
    });

    afterEach(async () => {
        const logs = global.mx_rage_logger.flush(/* keeplogs = */ false);
        if (logs) {
            process.stderr.write(`::group::Console logs from test '${expect.getState().currentTestName}'\n\n`);
            process.stderr.write(logs);
            process.stderr.write("::endgroup::\n");
        }
    });
}

// Very carefully enable the mocks for everything else in
// a specific order. We use this order to ensure we properly
// establish an application state that actually works.
//
// These are also require() calls to make sure they get called
// synchronously.
/* eslint-disable @typescript-eslint/no-require-imports */
require("./setup/setupManualMocks"); // must be first
require("./setup/setupLanguage");
require("./setup/setupConfig");

// Utility to check for React errors during the tests
// Fails tests on errors like the following:
// In HTML, <div> cannot be a descendant of <p>.
// In HTML, <form> cannot be a descendant of <form>.
// In HTML, text nodes cannot be a child of <thead>.
// This will cause a hydration error.
// You provided a `checked` prop to a form field without an `onChange` handler.
let errors: any[] = [];
beforeEach(() => {
    errors = [];
    const originalError = console.error;
    jest.spyOn(console, "error").mockImplementation((...args) => {
        if (/validateDOMNesting|Hydration failed|hydration error|prop to a form field without an/i.test(args[0])) {
            errors.push(args[0]);
        }
        originalError.call(console, ...args);
    });
});
afterEach(() => {
    mocked(console.error).mockRestore?.();
    if (errors.length > 0) {
        throw new Error("Test failed due to React hydration errors in the console.");
    }
});