NodeJS 笑话:类型错误:replaceAll不是函数

ldioqlga  于 2022-12-26  发布在  Node.js
关注(0)|答案(4)|浏览(464)

String.prototype.replaceAll()是一个有用的方法,在构建和执行时一切都很好。但是,所有Jest测试都失败,并出现以下错误:

TypeError: replaceAll is not a function

以下是我的依赖项:

"dependencies": {
  "core-js": "^3.6.5",
  "vue": "^2.6.11",
  "vue-class-component": "^7.2.3",
  "vue-i18n": "^8.22.0",
  "vue-property-decorator": "^8.4.2",
  "vue-router": "^3.3.4",
  "vuex": "^3.5.1"
},
"devDependencies": {
  "@vue/test-utils": "^1.1.0",
  "jest-junit": "^12.0.0",
  "ts-jest": "^26.4.1",
  "typescript": "~3.9.3",
  "vue-jest": "^3.0.7",
  "vue-template-compiler": "^2.6.10"
},

我如何修复此行为?

vshtjzan

vshtjzan1#

这很可能是因为String.prototype.replaceAll没有在Node.js中实现(至少在v14.15.0版本中)。
您可以使用的一种替代方法是正则表达式,如下例所示:

const str = 'foo-foo';
const regex = /foo/g; // Note the 'g' flag, which matches all occurrences of the expression

console.log(str.replace(regex, 'bar')); // 'bar-bar'

您可以查看here以获取有关正则表达式的更多信息。

xytpbqjk

xytpbqjk2#

∮问题是
出现这种情况是因为replaceAll是一个新函数,并不是所有浏览器都能实现,也不是所有Node.js版本(15.0以上)都能实现,正如另一个答案中提到的,你可以看到哪些浏览器支持Can I Use

但是,您可以添加一个polyfill来支持旧的浏览器(如果需要),而不是使用带有RegExp的.replace。在我的例子中,我使用的是Electron,所以我只需要为Jest这样做。
垫片可以是found here

解决方案

用作浏览器的多边形填充

1.作为npm i string.prototype.replaceallyarn add string.prototype.replaceall的依赖项安装;
1.在您的项目中添加以下代码。它只需要添加在一个位置。

import replaceAllInserter from 'string.prototype.replaceall';

replaceAllInserter.shim();

仅用于玩笑

更新节点. js

正如@leonheess在评论中提到的,你可以将Node.js更新到一个更新的版本,你需要一个使用version 8.5 from V8的版本,这是.replaceAll实现的时候。
根据list available on the Node.js website,这两个版本都没有使用V8 8.5,但是从Node.js 15.0.0开始,使用的是V8的8.6版本,因此,请升级到Node.js v15或更高版本。

用作聚合填充

如果您只想修复Jest的此问题,您可以按照本期中提到的操作:
1.作为npm i -D string.prototype.replaceallyarn add -D string.prototype.replaceall的开发依赖项安装;
1.修改您的Jest配置,添加setupFilesAfterEnv属性,如下所示:

{
  "jest": {
    "setupFilesAfterEnv": ["<rootDir>/jestSetup.js"]
  }
}

1.将以下代码添加到jestSetup文件中:

import replaceAllInserter from 'string.prototype.replaceall';

replaceAllInserter.shim();
9rbhqvlz

9rbhqvlz3#

您也可以将其添加到main.js文件中的任何位置

if (typeof String.prototype.replaceAll === "undefined") {
  String.prototype.replaceAll = function (match, replace) {
    return this.replace(new RegExp(match, 'g'), () => replace);
  }
}
d5vmydt9

d5vmydt94#

你可以使用Babel来转换你的代码(到ES 5),也可以让它在需要的地方注入polyfill。
在您的情况下,使用.replaceAll方法会失败,因为正如其他答案中所解释的,测试运行在不支持该方法的节点版本上。
我不建议这样做,其他回答说,因为他们只是修复这个特定的问题,但你可能会遇到类似的问题,如果你使用其他方法不支持您的当前节点版本。
为了保证永远不会有这样的问题,Babelcore-js一起使用。
这里有一个重要的报价从这个页面:https://jestjs.io/docs/getting-started#using-babel
babel-jest是在安装Jest时自动安装的,如果项目中存在babel配置,它将自动转换文件。
您还需要为vue安装Babel预设,以便编译vue特定的文件:https://www.npmjs.com/package/@vue/babel-preset-app
因此,在根文件夹中,查找或创建一个 Babel 配置文件:babel.config.js(过去是.babelrc.js.json文件)。
使用此配置:
1.确保更新您的core-js包,并在为Babel配置它时明确提到次要版本(见下文)
1.必须激活@babel/preset-env中的useBuiltIns设置才能使core-js多边形填充工作。

  1. targets设置也应该被指定,因为你的测试运行在节点上(而不是你的浏览器上)。2你也可以为此设置一个.browserlist文件。
module.exports = {
  presets: [
    ['@babel/preset-env', { 
      "corejs": "3.26", 
      "useBuiltIns": "usage", 
      "targets": { "node": "current" } 
    }],
    '@babel/preset-react'],
  plugins: [
    "@babel/plugin-transform-runtime"
  ]
};

有趣的阅读:
Running Mocha 6 ES6 tests with Babel 7, how to set up?

相关问题