The class extending the value #<Object> in Jest is neither a constructor nor null

Upon setting up a jest.env.js file and adding it to jest.config.js testEnvironment: './jest.env.js', I encountered an error related to TextEncoder and TextDecoder while running tests with jest@28:

TypeError: Class extends value #<Object> is not a constructor or null

>  7 | module.exports = class CustomTestEnvironment extends NodeEnvironment {
     |                                                      ^
   8 |   async setup() {
   9 |     await super.setup()
  10 |     if (typeof this.global.TextEncoder === 'undefined') {

I am looking to understand the root cause of the error and how to resolve it

To make my tests work without errors, I found that I needed to add the following lines at the beginning of my testfile instead of using testEnvironment:

global.TextEncoder = require('util').TextEncoder
global.TextDecoder = require('util').TextDecoder

Modified jest.env.js

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

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
    }
    if (typeof this.global.TextDecoder === 'undefined') {
      const { TextDecoder } = require('util')
      this.global.TextDecoder = TextDecoder
    }
  }
}

Answer №1

To properly utilize TestEnvironment, it is necessary to import it in the following manner:

const NodeEnvironment = require("jest-environment-node").TestEnvironment;

Referenced in the documentation here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Automating the movement of a slider input gradually throughout a specified duration

I am working on a website that includes a range input setup like this: <input type="range" min="1036000000000" max="1510462800000" value="0" class="slider" id ="slider"/> Additionally, I have integrated some D3 code for visualizations. You can view ...

Determining if the device is connected to the internet

Is there a way to create a unique code using HTML, JavaScript, or jQuery that executes a random action when the website detects that the device is offline? ...

Displaying multiple div elements when a button is clickedLet multiple divs be

ISSUE Hello there! I'm facing a challenge where I need to display a div when a button is clicked. The issue arises from having multiple divs with the same class, making it difficult for me to target each individual div... Image1 Image2 Desired Outco ...

Magnify novice mistakes: Unhandled promise rejection and Ensure every child has a distinct "key" property

Currently, I am working through Amazon's Getting Started with AWS tutorial found here: https://aws.amazon.com/getting-started/hands-on/build-react-app-amplify-graphql/module-four/ After successfully building and hosting the app on git, I noticed that ...

What is the reason for having a filled array containing data on currency exchange rates within an asynchronous function, while simultaneously having an empty array located outside of it? - React

After struggling with this programming issue for the past 5 days, I'm reaching out for help. The challenge I'm facing involves retrieving the rate of a specific currency between 1 and 50000 from an API. While I have successfully managed to obtai ...

Is there a more efficient method to select all the rows containing '1's in a specific cell within a large range of data?

As a beginner, I've developed a script that scans through a large table and extracts rows containing the value '1'. The table consists of approximately 2000 rows, so it's taking quite some time to process all of them. Is there a more e ...

Does AngularJS have a feature similar to jQuery.active?

As I utilize selenium to conduct tests on my application, I am encountering numerous ajax calls that utilize $resource or $http. It would be convenient if there was a method in angular to monitor active ajax requests so that selenium could wait until they ...

React and Material-Ui utilize class definitions in .js files, which are then passed as strings to components

I am attempting to define a class within my .js file in order to utilize the material-ui theme object and pass it as a string to a component since the component's prop only accepts strings. Unfortunately, the React-Dropzone import does not accept a cl ...

Show data from an API in an HTML table

I encountered an issue with an API, and despite trying console.log(response.[""0""].body) to view the response in the console, it does not seem to be working. My goal is to extract all the data from the API and display it in a table. Below is my code: ...

Experience a magical Vue form wizard just like Wilio

Searching for a vuejs wizard form similar to the Wilio Wizard Form. Tried out the Binar Code Wizard Form, but it's not quite what I'm looking for. Need a form wizard with a simple progress bar and step numbers like Wilio. Is it possible to mod ...

Generating random images using Javascript

I am facing some challenges while creating my first custom JavaScript function. My goal is to display three random thumbnails on my webpage by selecting images from a pool of options. However, I am encountering issues with duplicated images and handling s ...

Troubleshooting EJS Relative Path Problem when Using "include" in an HTML Document

I'm encountering an issue with my "index.ejs" file... The current content of the ejs file: <!DOCTYPE html> <html lang="en" dir="ltr"> <!-- THIS SECTION IS FOR <head> TAG THAT WILL BE STORED INSIDE "so_ ...

retrieving JSON data within the controller

When I use the command console.log($scope.data), I am able to view my JSON file. Additionally, by using <div ng-repeat="item in data">, I can see all the items in the view. However, when I try console.log($scope.data[0]) or console.log($scope.data[0] ...

Retrieving the attribute key from a dynamically typed object

Having this specific interface structure: interface test { [key: string]: string } along with an object defined as follows: const obj: test ={ name: 'mda', telephone: '1234' } Attempting to utilize this object in a variab ...

jQuery failing to compute and showcase the outcomes

I've been troubleshooting this issue for quite some time now and it seems like the input I'm providing to calculate the balance of a credit card debt keeps generating errors. Furthermore, the while function isn't executing properly to displ ...

All the GET request methods are functional except for the final one. I wonder if I made a mistake somewhere?

After examining all the GET request methods, it appears that only the last one is not functioning properly. Despite attempting to log something to the console, no output is being displayed. router.get('/', function(req, res) { Golf.find({Year: ...

Unable to render the iframe body using the srcdoc attribute on Internet Explorer browser

I am encountering issues when attempting to bind the iFrame from an API response to a div with a specific ID. The problem seems to be isolated to Internet Explorer. While I am able to successfully bind the iframe, it appears that the raw HTML content is no ...

What steps can I take to resolve the glitching issue with my progress bar?

There seems to be a problem with the progress bar lagging behind. To see the issue in action, click on THIS LINK and go to the second song. The progress bar appears to be malfunctioning. If you have any solutions or suggestions, please assist! For a visual ...

What could be causing this error in a new Next.js application?

After multiple attempts, my frustration and disappointment in myself are causing a headache. Can someone please assist me? I am trying to create an app using the following command: npx create-next-app@latest --ts Immediately after running next dev, I enco ...

Angular 13: Masking User Input with Reactive Form Controls

Looking to incorporate a phone number input field with formatting in a reactive form. The desired format is (123) 456-7890. For reference, check out this example link: https://stackblitz.com/edit/angular13-reactive-form-validation-y1qwmf?file=src/app/app. ...