Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jest: TypeError: replaceAll is not a function

String.prototype.replaceAll() is a useful method and while building and executing everything works fine. However, all Jest-tests fail with the following error:

TypeError: replaceAll is not a function 

These are my dependencies:

"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" }, 

How can I fix this behavior?

like image 946
leonheess Avatar asked Dec 14 '20 19:12

leonheess


People also ask

Why replaceAll is not a function?

The "replaceAll" is not a function error occurs when we call the replaceAll() method on a value that is not of type string, or in a browser that doesn't support it. To solve the error, only call the replaceAll() method on strings in supported browsers. Here is an example of how the error occurs. Copied!

How do you replace all occurrences of a string?

The str. replace(/abc/g, ''); (C) is a good cross-browser fast solution for all strings.


2 Answers

This most likely happens because String.prototype.replaceAll is not implemented in Node.js (at least as of version v14.15.0).

One alternative you could use are regular expressions like in this example:

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' 

You can check here for more info on regular expressions.

like image 156
ElCholoGamer Avatar answered Sep 25 '22 10:09

ElCholoGamer


The problem

This happens because replaceAll is a new function not implemented in all browsers nor older Node.js versions, as mentioned in the other answer. You can see which browsers support it in Can I Use:

enter image description here

But, instead o using .replace with a RegExp, you can add a polyfill to support older browsers (if needed). In my case, I'm using Electron, so I need to do it for Jest only.

The shim can be found here.

The solution

Using as a polyfill for browsers

  1. Install as a dependency with npm i string.prototype.replaceall or yarn add string.prototype.replaceall;

  2. Add the following code in your project. It need to be added in one place only.

import replaceAllInserter from 'string.prototype.replaceall';  replaceAllInserter.shim(); 

Using in Jest only

Update Node.js

As @leonheess mentioned in the comments, you can update Node.js to a more recent version. You'll need a version that uses the version 8.5 from V8, which is when .replaceAll was implemented.

According to the list available on the Node.js website, neither version uses V8 8.5, but as of Node.js 15.0.0, the version 8.6 of V8 is used. So, upgrade to Node.js v15 or higher.

Use as a polyfill

If you want to fix this problem for Jest only, you can do as mentioned in this issue:

  1. Install as a dev dependency with npm i -D string.prototype.replaceall or yarn add -D string.prototype.replaceall;

  2. Modify your Jest config, add a setupFilesAfterEnv property as bellow:

{   "jest": {     "setupFilesAfterEnv": ["<rootDir>/jestSetup.js"]   } } 
  1. Add the following code to your jestSetup file:
import replaceAllInserter from 'string.prototype.replaceall';  replaceAllInserter.shim(); 
like image 33
Rafael Tavares Avatar answered Sep 26 '22 10:09

Rafael Tavares