TypeError: Cannot set properties of null (setting 'textBaseline')

[kovacssupki]

Hi, When running tests in jest/react-testing-library with react-scripts I got this error upon importing the module in test files.

Test suite failed to run

TypeError: Cannot set properties of null (setting 'textBaseline')

   6 | } from '@testing-library/react';
   7 | import userEvent from '@testing-library/user-event';
>  8 | import SecureStorage from 'react-secure-storage';
     | ^
   9 | import { AxiosError } from 'axios';
  10 | import { Account } from './Account';
  11 | import AxiosServices from '../services/axios.service';

  at ClientJS.getCanvasPrint (node_modules/react-secure-storage/dist/fingerprint.lib.js:216:23)
  at ClientJS.getFingerprint (node_modules/react-secure-storage/dist/fingerprint.lib.js:42:30)
  at getFingerprint (node_modules/react-secure-storage/dist/fingerprint.js:25:31)
  at new EncryptionService (node_modules/react-secure-storage/dist/encryption.js:33:46)
  at getAllLocalStorageItems (node_modules/react-secure-storage/dist/localStorageHelpers.js:36:19)
  at new SecureLocalStorage (node_modules/react-secure-storage/dist/index.js:59:63)
  at Object.<anonymous> (node_modules/react-secure-storage/dist/index.js:119:26)
  at Object.<anonymous> (src/pages/Account.test.tsx:8:1)

Package json extract:

"react-scripts": "5.0.1", "react-secure-storage": "^1.1.0", "react-dom": "^18.2.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", "typescript": "^4.8.4"

[Mbbahar]

Any progress on this? i get the same error

[kovacssupki]

A workaround would be to instal canvas@latest module globally or in the project. then it finds the function.

[sushinpv]

This is because, Your test cases are not running on the actual DOM and there is no access to browser properties,

One option is to install canvas on project level or global level as a development dependency

yarn add --dev canvas 

or

npm i --save-dev canvas

The other option is to mock the browser properties which the application / library needed.

Install

yarn add --dev jest-canvas-mock

Create a new ${rootDir}/src/setupTests.js with

import 'jest-canvas-mock';

You can find more information here https://stackoverflow.com/questions/33269093/how-to-add-canvas-support-to-my-tests-in-jest

[OahMada]

I am using Vitest as the testing framework. I implemented a mock for the library.

vi.mock('react-secure-storage', () => ({
    default: {
        getItem: vi.fn(() => import.meta.env.VITE_OPENAI_API_KEY_ALIAS), // Mock the implementation of `getItem` to obtain what I need from the storage.
        setItem: vi.fn(),
    },
}));

[sushinpv]

Hi @OahMada , Thanks for the code.

We will modify the README file to include this mock