chore: migrate jest-environment-jsdom to TypeScript

CHANGELOG.md

@@ -26,6 +26,7 @@
 
 ### Chore & Maintenance
 
+- `[jest-environment-jsdom]`: Migrate to TypeScript ([#7985](https://github.com/facebook/jest/pull/8003))
 - `[jest-environment-node]`: Migrate to TypeScript ([#7985](https://github.com/facebook/jest/pull/7985))
 - `[*]`: Setup building, linting and testing of TypeScript ([#7808](https://github.com/facebook/jest/pull/7808), [#7855](https://github.com/facebook/jest/pull/7855), [#7951](https://github.com/facebook/jest/pull/7951))
 - `[pretty-format]`: Migrate to TypeScript ([#7809](https://github.com/facebook/jest/pull/7809), [#7809](https://github.com/facebook/jest/pull/7972))

packages/jest-config/tsconfig.json

@@ -4,10 +4,10 @@
     "rootDir": "src",
     "outDir": "build"
   },
-  // TODO: This is missing `jest-validate`, in addition to
-  // `jest-environment-jsdom` and `jest-jasmine2`, but those are just
-  // `require.resolve`d, so no real use for their types
+  // TODO: This is missing `jest-validate`, in addition to and `jest-jasmine2`,
+  // but those are just `require.resolve`d, so no real use for their types
   "references": [
+    {"path": "../jest-environment-jsdom"},
     {"path": "../jest-environment-node"},
     {"path": "../jest-get-type"},
     {"path": "../jest-regex-util"},

packages/jest-environment-jsdom/package.json

@@ -8,13 +8,16 @@
   },
   "license": "MIT",
   "main": "build/index.js",
+  "types": "build/index.d.ts",
   "dependencies": {
+    "@jest/environment": "^24.1.0",
     "@jest/fake-timers": "^24.1.0",
+    "@jest/types": "^24.1.0",
     "jest-mock": "^24.0.0",
     "jest-util": "^24.0.0",
     "jsdom": "^11.5.1"
   },
-  "devDependencies":  {
+  "devDependencies": {
     "@types/jsdom": "^11.12.0"
   },
   "engines": {

packages/jest-environment-jsdom/src/__mocks__/index.js → packages/jest-environment-jsdom/src/__mocks__/index.ts

@@ -8,24 +8,27 @@
 
 const vm = jest.requireActual('vm');
 
-const JSDOMEnvironment = jest.genMockFromModule('../index');
+const JSDOMEnvironment = jest.genMockFromModule('../index') as jest.Mock;
 
 JSDOMEnvironment.mockImplementation(function(config) {
+  // @ts-ignore
   this.global = {
     JSON,
     console: {},
   };
 
   const globalValues = {...config.globals};
   for (const customGlobalKey in globalValues) {
+    // @ts-ignore
     this.global[customGlobalKey] = globalValues[customGlobalKey];
   }
 });
 
 JSDOMEnvironment.prototype.runSourceText.mockImplementation(function(
-  sourceText,
-  filename,
+  sourceText: string,
+  filename: string,
 ) {
+  // @ts-ignore
   return vm.runInNewContext(sourceText, this.global, {
     displayErrors: false,
     filename,

packages/jest-environment-jsdom/src/index.ts

@@ -0,0 +1,146 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {Script} from 'vm';
+import {Global, Config} from '@jest/types';
+import mock, {ModuleMocker} from 'jest-mock';
+import {installCommonGlobals} from 'jest-util';
+import {JestFakeTimers as FakeTimers} from '@jest/fake-timers';
+import {JestEnvironment, EnvironmentContext} from '@jest/environment';
+import {JSDOM, VirtualConsole} from 'jsdom';
+
+// The `Window` interface does not have an `Error.stackTraceLimit` property, but
+// `JSDOMEnvironment` assumes it is there.
+interface Win extends Window {
+  Error: {
+    stackTraceLimit: number;
+  };
+}
+
+function isWin(globals: Win | Global.Global): globals is Win {
+  return (globals as Win).document !== undefined;
+}
+
+class JSDOMEnvironment implements JestEnvironment {
+  dom: JSDOM | null;
+  fakeTimers: FakeTimers<number> | null;
+  // @ts-ignore
+  global: Global.Global | Win | null;
+  errorEventListener: ((event: Event & {error: unknown}) => void) | null;
+  moduleMocker: ModuleMocker | null;
+
+  constructor(config: Config.ProjectConfig, options: EnvironmentContext = {}) {
+    this.dom = new JSDOM('<!DOCTYPE html>', {
+      pretendToBeVisual: true,
+      runScripts: 'dangerously',
+      url: config.testURL,
+      virtualConsole: new VirtualConsole().sendTo(options.console || console),
+      ...config.testEnvironmentOptions,
+    });
+
+    // `defaultView` returns a `Window` type, which is missing the
+    // `Error.stackTraceLimit` property. See the `Win` interface above.
+    const global = (this.global = this.dom.window.document
+      .defaultView as Win | null);
+
+    if (!global || !this.global) {
+      this.fakeTimers = null;
+      this.errorEventListener = null;
+      this.moduleMocker = null;
+      return;
+    }
+
+    // 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;
+    // `global` is of type `Win`, but `installCommonGlobals` expects
+    // `NodeJS.Global`, so using `any` for now
+    installCommonGlobals(global as any, config.globals);
+
+    // Report uncaught errors.
+    this.errorEventListener = event => {
+      if (userErrorListenerCount === 0 && event.error) {
+        (process as NodeJS.EventEmitter).emit('uncaughtException', event.error);
+      }
+    };
+    global.addEventListener('error', this.errorEventListener);
+
+    // However, don't report them as uncaught if the user listens to 'error' event.
+    // In that case, we assume the might have custom error handling logic.
+    const originalAddListener = global.addEventListener;
+    const originalRemoveListener = global.removeEventListener;
+    let userErrorListenerCount = 0;
+    global.addEventListener = function(name: string) {
+      if (name === 'error') {
+        userErrorListenerCount++;
+      }
+      // TODO: remove `any` type assertion
+      return originalAddListener.apply(this, arguments as any);
+    };
+    global.removeEventListener = function(name: string) {
+      if (name === 'error') {
+        userErrorListenerCount--;
+      }
+      // TODO: remove `any` type assertion
+      return originalRemoveListener.apply(this, arguments as any);
+    };
+
+    // `global` is of type `Win`, but `ModuleMocker` expects `NodeJS.Global`, so
+    // using `any` for now
+    this.moduleMocker = new mock.ModuleMocker(global as any);
+
+    const timerConfig = {
+      idToRef: (id: number) => id,
+      refToId: (ref: number) => ref,
+    };
+
+    this.fakeTimers = new FakeTimers({
+      config,
+      // `global` is of type `Win`, but `FakeTimers` expects `NodeJS.Global`, so
+      // using `any` for now
+      global: global as any,
+      moduleMocker: this.moduleMocker,
+      timerConfig,
+    });
+  }
+
+  setup() {
+    return Promise.resolve();
+  }
+
+  teardown() {
+    if (this.fakeTimers) {
+      this.fakeTimers.dispose();
+    }
+    if (this.global) {
+      if (this.errorEventListener && isWin(this.global)) {
+        this.global.removeEventListener('error', this.errorEventListener);
+      }
+      // Dispose "document" to prevent "load" event from triggering.
+      Object.defineProperty(this.global, 'document', {value: null});
+      if (isWin(this.global)) {
+        this.global.close();
+      }
+    }
+    this.errorEventListener = null;
+    this.global = null;
+    this.dom = null;
+    this.fakeTimers = null;
+    return Promise.resolve();
+  }
+
+  runScript(script: Script) {
+    if (this.dom) {
+      // Explicitly returning `unknown` since `runVMScript` currently returns
+      // `void`, which is wrong
+      return this.dom.runVMScript(script) as unknown;
+    }
+    return null;
+  }
+}
+
+export = JSDOMEnvironment;

packages/jest-environment-jsdom/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "build",
+    "rootDir": "src"
+  },
+  "references": [
+    {"path": "../jest-environment"},
+    {"path": "../jest-fake-timers"},
+    {"path": "../jest-mock"},
+    {"path": "../jest-types"},
+    {"path": "../jest-util"}
+  ]
+}

packages/jest-environment/src/index.ts

@@ -22,15 +22,23 @@ export type EnvironmentContext = {
 // TODO: type this better: https://nodejs.org/api/modules.html#modules_the_module_wrapper
 type ModuleWrapper = (...args: Array<unknown>) => unknown;
 
+export function hasModuleWrapper(
+  obj: unknown,
+): obj is {[ScriptTransformer.EVAL_RESULT_VARIABLE]: ModuleWrapper} {
+  return (
+    typeof obj === 'object' &&
+    !!obj &&
+    obj.hasOwnProperty(ScriptTransformer.EVAL_RESULT_VARIABLE)
+  );
+}
+
 export declare class JestEnvironment {
   constructor(config: Config.ProjectConfig);
   constructor(config: Config.ProjectConfig, context: EnvironmentContext);
   global: Global.Global;
   fakeTimers: FakeTimers<unknown> | null;
   moduleMocker: ModuleMocker | null;
-  runScript(
-    script: Script,
-  ): {[ScriptTransformer.EVAL_RESULT_VARIABLE]: ModuleWrapper} | null;
+  runScript(script: Script): unknown;
   setup(): Promise<void>;
   teardown(): Promise<void>;
 }

packages/jest-runtime/src/index.ts

@@ -12,6 +12,7 @@ import {
   JestEnvironment,
   LocalModuleRequire,
   Module,
+  hasModuleWrapper
 } from '@jest/environment';
 import jestMock, {MockFunctionMetadata} from 'jest-mock';
 import HasteMap, {ModuleMap} from 'jest-haste-map';
@@ -679,7 +680,7 @@ class Runtime {
 
     const runScript = this._environment.runScript(transformedFile.script);
 
-    if (runScript === null) {
+    if (!hasModuleWrapper(runScript)) {
       this._logFormattedReferenceError(
         'You are trying to `import` a file after the Jest environment has been torn down.',
       );