使用Jest框架测试jsdom时遭遇TextEncoder错误求助

问题根源 #

1. 你手动实例化了JSDOM，但Jest的testEnvironment: 'jsdom'已经全局注入了完整的浏览器环境（包含window、document），双重环境实例会导致全局对象冲突，触发TextEncoder找不到的错误。
2. 仅通过require('text-encoding').TextEncoder无法将其挂载到全局，jsdom内部逻辑无法访问到该对象。

修复步骤 #

1. 移除手动创建的JSDOM实例 #

Jest的jsdom环境已经提供了全局的document和window，无需自己实例化JSDOM。修改测试用例代码如下：

// 删除这两行手动导入的jsdom代码
// import jsdom from 'jsdom';
// const { JSDOM } = jsdom;

function myFunction(element) {
  console.log(element.width);
  return element.width ? 'success' : 'failed';
}

describe("Test myFunction", () => {
  it("should return 'success' when element has width", () => {
    const div = document.createElement("div");
    div.width = '500px';
    div.height = '500px';
    const result = myFunction(div);
    expect(result).toBe('success');
  });
});

2. 全局挂载TextEncoder（若仍报错） #

Node.js 16+的util模块内置了TextEncoder/TextDecoder，无需依赖text-encoding包。创建jest.setup.js文件：

// jest.setup.js
const { TextEncoder, TextDecoder } = require('util');

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

在Jest配置中引入该setup文件：

// jest.config.js
module.exports = {
    testEnvironment: 'jsdom',
    transform: {
        '^.+\\.js$': 'babel-jest',
    },
    transformIgnorePatterns: [],
    setupFiles: ['./jest.setup.js'], // 添加setup文件路径
};

可卸载text-encoding包避免依赖冲突：npm uninstall text-encoding

3. 保持Babel配置不变 #

你的Babel配置["@babel/preset-env", { "targets": { "node": "current" } }]已适配当前Node.js版本，无需调整。

验证 #

重新运行测试命令，TextEncoder错误应该会消失，测试用例正常执行。

内容的提问来源于stack exchange，提问作者Shraddha Kurud