如何解决使用 Jest 测试 Create React App 时未定义 TextDecoder 的 ReferenceError？

Question

我正在尝试运行以下测试，但如果我禁用它，它会抛出一些错误，测试运行正常。

// /*-----------------------------------------------*/
// /* 🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪🧪 */
// /*-----------------------------------------------*/
 

describe('getFirebaseStorageAvailableNames', () => {
  it('should return "1" when the array is empty', () => {
    const arr: string[] = [];
    expect(getFirebaseStorageAvailableNames(arr)).toBe('1');
  });

  it('should return the smallest available number as a string', () => {
    const arr: string[] = ['1', '2', '3'];
    expect(getFirebaseStorageAvailableNames(arr)).toBe('4');
  });
});

 FAIL  src/helpers/tests/firestoreHelpers.test.ts
  ● Test suite failed to run

    ReferenceError: TextDecoder is not defined

      1 | // Firebase
      2 | import { initializeApp } from 'firebase/app';
    > 3 | import { browserSessionPersistence, getAuth, setPersistence } from 'firebase/auth';    
        | ^
      4 | import { getFirestore } from 'firebase/firestore';
      5 | import { getDatabase } from 'firebase/database';
      6 | import { getStorage } from 'firebase/storage';

      at Object.<anonymous> (node_modules/@fastify/busboy/lib/utils/decodeText.js:4:21)
      at Object.<anonymous> (node_modules/@fastify/busboy/lib/utils/parseParams.js:4:20)
      at Object.<anonymous> (node_modules/@fastify/busboy/lib/types/multipart.js:15:21)
      at Object.<anonymous> (node_modules/@fastify/busboy/lib/main.js:7:25)
      at Object.<anonymous> (node_modules/undici/lib/fetch/body.js:3:16)
      at Object.<anonymous> (node_modules/undici/lib/fetch/response.js:4:47)
      at Object.<anonymous> (node_modules/undici/index.js:119:29)
      at Object.<anonymous> (node_modules/@firebase/auth/dist/node/totp-e9be401a.js:7:14)        
      at Object.<anonymous> (node_modules/@firebase/auth/dist/node/index.js:5:12)
      at Object.<anonymous> (node_modules/firebase/auth/dist/index.cjs.js:5:12)
      at Object.<anonymous> (src/firebase/firebase.ts:3:1)
      at Object.<anonymous> (src/helpers/firesotreHelpers.ts:3:1)
      at Object.<anonymous> (src/helpers/tests/firestoreHelpers.test.ts:4:1)

Test Suites: 1 failed, 9 passed, 10 total
Tests: 150 passed, 150 total

"dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.0",
    "@fontsource/roboto": "^5.0.12",
    "@mui/icons-material": "^5.15.12",
    "@mui/material": "^5.15.12",
    "@reduxjs/toolkit": "^2.2.1",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^17.0.45",
    "@types/react": "^18.2.65",
    "@types/react-dom": "^18.2.21",
    }

Answer 1

使用 node util 中的一个。

将其放入您的

setupFilesAfterEnv

：

import { TextDecoder, TextEncoder } from 'util';

global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;

如果您还没有，请将其添加到您的

jest.config.js

：

setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],

并将 TextDecoder/TextEncoder 内容添加到根目录中的

jest.setup.js