`ReferenceError: TextEncoder is not defined` when running `react-scripts test --env=jsdom`

Question

我在我的应用程序中使用了 TensorFlow 编码器。当应用程序为运行时，它在我的浏览器中运行良好，但在测试它构建时出现问题：

$ npx react-scripts test --env=jsdom
FAIL  src/App.test.js
  ● Test suite failed to run

    ReferenceError: TextEncoder is not defined

      16 | import TextField from '@material-ui/core/TextField';
      17 | import Typography from '@material-ui/core/Typography';
    > 18 | import * as mobilenet from '@tensorflow-models/mobilenet';
         | ^
      19 | import * as UniversalSentenceEncoder from '@tensorflow-models/universal-sentence-encoder';
      20 | import * as tf from '@tensorflow/tfjs';
      21 | import axios from 'axios';

      at new PlatformBrowser (node_modules/@tensorflow/tfjs-core/src/platforms/platform_browser.ts:26:28)
      at Object.<anonymous> (node_modules/@tensorflow/tfjs-core/src/platforms/platform_browser.ts:50:30)
      at Object.<anonymous> (node_modules/@tensorflow/tfjs-core/src/index.ts:29:1)
      at Object.<anonymous> (node_modules/@tensorflow/tfjs-converter/src/executor/graph_model.ts:18:1)
      at Object.<anonymous> (node_modules/@tensorflow/tfjs-converter/src/index.ts:17:1)
      at Object.<anonymous> (node_modules/@tensorflow-models/mobilenet/dist/index.js:38:14)
      at Object.<anonymous> (src/components/model.js:18:1)
      at Object.<anonymous> (src/App.js:8:1)
      at Object.<anonymous> (src/App.test.js:3:1)

我想摆脱那个错误。我试过使用 'text-encoding' 包，但我不确定如何在导入之前正确定义 TextEncoder。

也许我可以为 --env 设置不同的选项？

没有 --env=jsdom 我得到同样的错误。我相信我在遇到类似类型的未定义错误后添加了它并且它纠正了一个问题。

这是我的测试：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

因此设置 --env=node 也不起作用，因为：ReferenceError: document is not defined.

Answer 1

jsdom 似乎没有在全局中为 DOM 定义 TextEncoder。所以你可以填写node.js一个。

test/custom-test-env.js:

const Environment = require('jest-environment-jsdom');

/**
 * A custom environment to set the TextEncoder that is required by TensorFlow.js.
 */
module.exports = class CustomTestEnvironment extends Environment {
    async setup() {
        await super.setup();
        if (typeof this.global.TextEncoder === 'undefined') {
            const { TextEncoder } = require('util');
            this.global.TextEncoder = TextEncoder;
        }
    }
}

npx react-scripts test --env=./test/custom-test-env.js

Answer 2

我在使用 mongodb 时遇到了这个问题。我使用了稍作改动的解决方案。

首先我使用了jest-environment-node而不是jest-environment-jsdom:

const NodeEnvironment = require('jest-environment-node');

// A custom environment to set the TextEncoder that is required by mongodb.
module.exports = class CustomTestEnvironment extends NodeEnvironment {
  async setup() {
    await super.setup();
    if (typeof this.global.TextEncoder === 'undefined') {
      const { TextEncoder } = require('util');
      this.global.TextEncoder = TextEncoder;
    }
  }
}

然后我在所有测试的 jest 配置中添加了环境，正如 Cava 在评论中所说：

// package.json
{
  ...
  "jest": {
    ...
    "testEnvironment": "<rootDir>/tests/custom-test-env.js"
  }
  ...
}

Answer 3

我的 Node.Js 项目出现了同样的错误。出于测试目的，我在那里使用了 jest。所以以下步骤解决了我的问题

step-1: 在项目的根文件夹中添加一个名为 jest.config.js

的文件

step-2: 在jest.config.file中添加以下行：

    module.exports = {
        testEnvironment: "node"
    };

Answer 4

根据最新jest v28 (https://jestjs.io/docs/upgrading-to-jest28) 和react 18 我不得不修改一下脚本

所以我的preSetup.js

const Environment = require('jest-environment-jsdom-global');
/**
 * A custom environment to set the TextEncoder
 */
module.exports = class CustomTestEnvironment extends Environment {
    constructor({ globalConfig, projectConfig }, context) {
        super({ globalConfig, projectConfig }, context);
        if (typeof this.global.TextEncoder === 'undefined') {
            const { TextEncoder } = require('util');
            this.global.TextEncoder = TextEncoder;
        }
    }
};

Answer 5

使用以下配置无效

"testEnvironment": "<rootDir>/tests/custom-test-env.js"

const NodeEnvironment = require('jest-environment-node');

// A custom environment to set the TextEncoder that is required by mongodb.
module.exports = class CustomTestEnvironment extends NodeEnvironment {
  async setup() {
    await super.setup();
    if (typeof this.global.TextEncoder === 'undefined') {
      const { TextEncoder } = require('util');
      this.global.TextEncoder = TextEncoder;
    }
  }
}

使用“笑话”：“^28.0.3”，

Answer 6

感谢您的回答。一个似乎有效的更简单的格式，至少对于 testEnvironment: 'jsdom' 是：

  setupFiles: [`<rootDir>/jest-shim.js`],

jest-shim.js:

import { ArrayBuffer, TextDecoder, TextEncoder, Uint8Array } from 'util';

global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;
global.ArrayBuffer = ArrayBuffer;
global.Uint8Array = Uint8Array;

`ReferenceError: TextEncoder is not defined` when running `react-scripts test --env=jsdom`

`ReferenceError: TextEncoder is not defined` when running `react-scripts test --env=jsdom`

reactjs

tensorflow.js