Giter Club home page Giter Club logo

Comments (6)

jamiegluk avatar jamiegluk commented on June 18, 2024 10

I did the upgrade of jest-environment-jsdom inside package.json, and it is working.

@valen22br how did you do this? Upgrading these packages independently didn't work for me, but I have a feeling you are doing something a bit more advanced.

You can manually edit your lockfile, that'll work, but the better way to do it is via resolutions, if you are using Yarn; add this to your package.json:

  "resolutions": {
    "jest-environment-jsdom": "27.3.1"
  },

You can also do this in classic NPM using the npm-force-resolutions package.

from enzyme-matchers.

valen22br avatar valen22br commented on June 18, 2024 4

Yes, I'm trying to run jest-environment-enzyme package with Jest 27.0.3, and it's breaking my tests.
I did the upgrade of jest-environment-jsdom inside package.json, and it is working.

Will this package be upgraded, or if not, what should we use instead?

from enzyme-matchers.

haixiangyan avatar haixiangyan commented on June 18, 2024 1

npm i -D jest-environment-jsdom@^27 could help

from enzyme-matchers.

GreenGremlin avatar GreenGremlin commented on June 18, 2024

Here's a diff of jest-environment-jsdom between v24.9.0 and v26.5.2, if that's helpful.

diff --git a/packages/jest-environment-jsdom/src/index.ts b/packages/jest-environment-jsdom/src/index.ts
index 5e362f9244..bdd5eec277 100644
--- a/packages/jest-environment-jsdom/src/index.ts
+++ b/packages/jest-environment-jsdom/src/index.ts
@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */

-import {Script} from 'vm';
-import {Global, Config} from '@jest/types';
+import type {Context, Script} from 'vm';
+import type {Config, Global} from '@jest/types';
 import {installCommonGlobals} from 'jest-util';
-import mock, {ModuleMocker} from 'jest-mock';
-import {JestFakeTimers as FakeTimers} from '@jest/fake-timers';
-import {JestEnvironment, EnvironmentContext} from '@jest/environment';
+import {ModuleMocker} from 'jest-mock';
+import {LegacyFakeTimers, ModernFakeTimers} from '@jest/fake-timers';
+import type {EnvironmentContext, JestEnvironment} from '@jest/environment';
 import {JSDOM, VirtualConsole} from 'jsdom';

 // The `Window` interface does not have an `Error.stackTraceLimit` property, but
@@ -24,7 +24,8 @@ type Win = Window &

 class JSDOMEnvironment implements JestEnvironment {
   dom: JSDOM | null;
-  fakeTimers: FakeTimers<number> | null;
+  fakeTimers: LegacyFakeTimers<number> | null;
+  fakeTimersModern: ModernFakeTimers | null;
   global: Win;
   errorEventListener: ((event: Event & {error: Error}) => void) | null;
   moduleMocker: ModuleMocker | null;
@@ -37,12 +38,17 @@ class JSDOMEnvironment implements JestEnvironment {
       virtualConsole: new VirtualConsole().sendTo(options.console || console),
       ...config.testEnvironmentOptions,
     });
-    const global = (this.global = this.dom.window.document.defaultView as Win);
+    const global = (this.global = (this.dom.window.document
+      .defaultView as unknown) as Win);

     if (!global) {
       throw new Error('JSDOM did not return a Window object');
     }

+    // In the `jsdom@16`, ArrayBuffer was not added to Window, ref: https://github.com/jsdom/jsdom/commit/3a4fd6258e6b13e9cf8341ddba60a06b9b5c7b5b
+    // Install ArrayBuffer to Window to fix it. Make sure the test is passed, ref: https://github.com/facebook/jest/pull/7626
+    global.ArrayBuffer = ArrayBuffer;
+
     // Node's error-message stack size is limited at 10, but it's pretty useful
     // to see more than that when a test fails.
     this.global.Error.stackTraceLimit = 100;
@@ -61,7 +67,7 @@ class JSDOMEnvironment implements JestEnvironment {
     const originalAddListener = global.addEventListener;
     const originalRemoveListener = global.removeEventListener;
     let userErrorListenerCount = 0;
-    global.addEventListener = function(
+    global.addEventListener = function (
       ...args: Parameters<typeof originalAddListener>
     ) {
       if (args[0] === 'error') {
@@ -69,7 +75,7 @@ class JSDOMEnvironment implements JestEnvironment {
       }
       return originalAddListener.apply(this, args);
     };
-    global.removeEventListener = function(
+    global.removeEventListener = function (
       ...args: Parameters<typeof originalRemoveListener>
     ) {
       if (args[0] === 'error') {
@@ -78,29 +84,32 @@ class JSDOMEnvironment implements JestEnvironment {
       return originalRemoveListener.apply(this, args);
     };

-    this.moduleMocker = new mock.ModuleMocker(global as any);
+    this.moduleMocker = new ModuleMocker(global as any);

     const timerConfig = {
       idToRef: (id: number) => id,
       refToId: (ref: number) => ref,
     };

-    this.fakeTimers = new FakeTimers({
+    this.fakeTimers = new LegacyFakeTimers({
       config,
-      global: global as any,
+      global,
       moduleMocker: this.moduleMocker,
       timerConfig,
     });
-  }

-  setup() {
-    return Promise.resolve();
+    this.fakeTimersModern = new ModernFakeTimers({config, global});
   }

-  teardown() {
+  async setup(): Promise<void> {}
+
+  async teardown(): Promise<void> {
     if (this.fakeTimers) {
       this.fakeTimers.dispose();
     }
+    if (this.fakeTimersModern) {
+      this.fakeTimersModern.dispose();
+    }
     if (this.global) {
       if (this.errorEventListener) {
         this.global.removeEventListener('error', this.errorEventListener);
@@ -110,16 +119,23 @@ class JSDOMEnvironment implements JestEnvironment {
       this.global.close();
     }
     this.errorEventListener = null;
-    // @ts-ignore
+    // @ts-expect-error
     this.global = null;
     this.dom = null;
     this.fakeTimers = null;
-    return Promise.resolve();
+    this.fakeTimersModern = null;
+  }
+
+  runScript<T = unknown>(script: Script): T | null {
+    if (this.dom) {
+      return script.runInContext(this.dom.getInternalVMContext());
+    }
+    return null;
   }

-  runScript(script: Script) {
+  getVmContext(): Context | null {
     if (this.dom) {
-      return this.dom.runVMScript(script) as any;
+      return this.dom.getInternalVMContext();
     }
     return null;
   }

from enzyme-matchers.

csalvato avatar csalvato commented on June 18, 2024

I did the upgrade of jest-environment-jsdom inside package.json, and it is working.

@valen22br how did you do this? Upgrading these packages independently didn't work for me, but I have a feeling you are doing something a bit more advanced.

from enzyme-matchers.

StephenGrable1 avatar StephenGrable1 commented on June 18, 2024

@jamiegluk ^ was encountering issues as well and this resolution block fixed it for me 🙏

from enzyme-matchers.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.