Changes for jest 27

extension/jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
   setupFilesAfterEnv: ['<rootDir>/test/setup.js'],
   testPathIgnorePatterns: ['<rootDir>/examples'],
+  testEnvironment: 'jsdom',
 };

extension/test/chrome/extension.spec.js

@@ -10,10 +10,12 @@ const actionsPattern =
   /^@@INIT(.|\n)+@@reduxReactRouter\/routerDidChange(.|\n)+@@reduxReactRouter\/initRoutes(.|\n)+$/;
 
 describe('Chrome extension', function () {
+  let driver;
+
   beforeAll(async () => {
     chromedriver.start();
     await delay(2000);
-    this.driver = new webdriver.Builder()
+    driver = new webdriver.Builder()
       .usingServer(`http://localhost:${port}`)
       .withCapabilities({
         chromeOptions: {
@@ -23,31 +25,32 @@ describe('Chrome extension', function () {
       .forBrowser('chrome')
       .build();
   });
+
   afterAll(async () => {
-    await this.driver.quit();
+    await driver.quit();
     chromedriver.stop();
   });
 
   it("should open extension's window", async () => {
-    await this.driver.get(`chrome-extension://${extensionId}/window.html#left`);
+    await driver.get(`chrome-extension://${extensionId}/window.html#left`);
-    const url = await this.driver.getCurrentUrl();
+    const url = await driver.getCurrentUrl();
     expect(url).toBe(`chrome-extension://${extensionId}/window.html#left`);
   });
 
   it('should match document title', async () => {
-    const title = await this.driver.getTitle();
+    const title = await driver.getTitle();
     expect(title).toBe('Redux DevTools');
   });
 
   it("should contain inspector monitor's component", async () => {
-    const val = await this.driver
+    const val = await driver
       .findElement(webdriver.By.xpath('//div[contains(@class, "inspector-")]'))
       .getText();
     expect(val).toBeDefined();
   });
 
   it('should contain an empty actions list', async () => {
-    const val = await this.driver
+    const val = await driver
       .findElement(
         webdriver.By.xpath('//div[contains(@class, "actionListRows-")]')
       )
@@ -56,24 +59,24 @@ describe('Chrome extension', function () {
   });
 
   Object.keys(switchMonitorTests).forEach((description) =>
-    it(description, switchMonitorTests[description].bind(this))
+    it(description, () => switchMonitorTests[description](driver))
   );
 
   it('should get actions list', async () => {
     const url = 'http://zalmoxisus.github.io/examples/router/';
-    await this.driver.executeScript(`window.open('${url}')`);
+    await driver.executeScript(`window.open('${url}')`);
     await delay(2000);
 
-    const tabs = await this.driver.getAllWindowHandles();
+    const tabs = await driver.getAllWindowHandles();
 
-    await this.driver.switchTo().window(tabs[1]);
+    await driver.switchTo().window(tabs[1]);
-    expect(await this.driver.getCurrentUrl()).toMatch(url);
+    expect(await driver.getCurrentUrl()).toMatch(url);
-    await this.driver.manage().timeouts().pageLoadTimeout(5000);
+    await driver.manage().timeouts().pageLoadTimeout(5000);
 
-    await this.driver.switchTo().window(tabs[0]);
+    await driver.switchTo().window(tabs[0]);
 
-    const result = await this.driver.wait(
+    const result = await driver.wait(
-      this.driver
+      driver
         .findElement(
           webdriver.By.xpath('//div[contains(@class, "actionListRows-")]')
         )

extension/test/electron/devpanel.spec.js

@@ -9,10 +9,12 @@ const devPanelPath =
   'chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/window.html';
 
 describe('DevTools panel for Electron', function () {
+  let driver;
+
   beforeAll(async () => {
     chromedriver.start();
     await delay(1000);
-    this.driver = new webdriver.Builder()
+    driver = new webdriver.Builder()
       .usingServer(`http://localhost:${port}`)
       .withCapabilities({
         chromeOptions: {
@@ -22,33 +24,33 @@ describe('DevTools panel for Electron', function () {
       })
       .forBrowser('electron')
       .build();
-    await this.driver.manage().timeouts().setScriptTimeout(10000);
+    await driver.manage().timeouts().setScriptTimeout(10000);
   });
 
   afterAll(async () => {
-    await this.driver.quit();
+    await driver.quit();
     chromedriver.stop();
   });
 
   it('should open Redux DevTools tab', async () => {
-    if (!(await this.driver.getCurrentUrl()).startsWith('devtools')) {
+    if (!(await driver.getCurrentUrl()).startsWith('devtools')) {
-      const originalWindow = await this.driver.getWindowHandle();
+      const originalWindow = await driver.getWindowHandle();
-      const windows = await this.driver.getAllWindowHandles();
+      const windows = await driver.getAllWindowHandles();
       for (const window of windows) {
         if (window === originalWindow) continue;
-        await this.driver.switchTo().window(window);
+        await driver.switchTo().window(window);
-        if ((await this.driver.getCurrentUrl()).startsWith('devtools')) {
+        if ((await driver.getCurrentUrl()).startsWith('devtools')) {
           break;
         }
       }
     }
-    expect(await this.driver.getCurrentUrl()).toMatch(
+    expect(await driver.getCurrentUrl()).toMatch(
       /devtools:\/\/devtools\/bundled\/devtools_app.html/
     );
 
-    await this.driver.manage().timeouts().pageLoadTimeout(5000);
+    await driver.manage().timeouts().pageLoadTimeout(5000);
 
-    const id = await this.driver.executeAsyncScript(function (callback) {
+    const id = await driver.executeAsyncScript(function (callback) {
       let attempts = 5;
       function showReduxPanel() {
         if (attempts === 0) {
@@ -71,17 +73,17 @@ describe('DevTools panel for Electron', function () {
     });
     expect(id).toBe('chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljdRedux');
 
-    const className = await this.driver
+    const className = await driver
       .findElement(webdriver.By.className(id))
       .getAttribute('class');
     expect(className).not.toMatch(/hidden/); // not hidden
   });
 
   it('should have Redux DevTools UI on current tab', async () => {
-    await this.driver
+    await driver
       .switchTo()
       .frame(
-        this.driver.findElement(
+        driver.findElement(
           webdriver.By.xpath(`//iframe[@src='${devPanelPath}']`)
         )
       );
@@ -89,7 +91,7 @@ describe('DevTools panel for Electron', function () {
   });
 
   it('should contain INIT action', async () => {
-    const element = await this.driver.wait(
+    const element = await driver.wait(
       webdriver.until.elementLocated(
         webdriver.By.xpath('//div[contains(@class, "actionListRows-")]')
       ),
@@ -101,23 +103,23 @@ describe('DevTools panel for Electron', function () {
   });
 
   it("should contain Inspector monitor's component", async () => {
-    const val = await this.driver
+    const val = await driver
       .findElement(webdriver.By.xpath('//div[contains(@class, "inspector-")]'))
       .getText();
     expect(val).toBeDefined();
   });
 
   Object.keys(switchMonitorTests).forEach((description) =>
-    it(description, switchMonitorTests[description].bind(this))
+    it(description, () => switchMonitorTests[description](driver))
   );
 
   /*  it('should be no logs in console of main window', async () => {
-    const handles = await this.driver.getAllWindowHandles();
+    const handles = await driver.getAllWindowHandles();
-    await this.driver.switchTo().window(handles[1]); // Change to main window
+    await driver.switchTo().window(handles[1]); // Change to main window
 
-    expect(await this.driver.getTitle()).toBe('Electron Test');
+    expect(await driver.getTitle()).toBe('Electron Test');
 
-    const logs = await this.driver.manage().logs().get(webdriver.logging.Type.BROWSER);
+    const logs = await driver.manage().logs().get(webdriver.logging.Type.BROWSER);
     expect(logs).toEqual([]);
   });
 */

extension/test/utils/e2e.js

@@ -4,16 +4,16 @@ export const delay = (time) =>
   new Promise((resolve) => setTimeout(resolve, time));
 
 export const switchMonitorTests = {
-  'should switch to Log Monitor': async function () {
+  'should switch to Log Monitor': async function (driver) {
-    await this.driver
+    await driver
       .findElement(webdriver.By.xpath('//button[text()="Inspector"]'))
       .click();
     await delay(500); // Wait till menu is fully opened
-    await this.driver
+    await driver
       .findElement(webdriver.By.xpath('//button[text()="Log monitor"]'))
       .click();
     await delay(500);
-    await this.driver.findElement(
+    await driver.findElement(
       webdriver.By.xpath(
         '//div[div[button[text()="Reset"]] and .//div[button[text()="Revert"]]]'
       )
@@ -21,27 +21,27 @@ export const switchMonitorTests = {
     await delay(500);
   },
 
-  'should switch to Chart Monitor': async function () {
+  'should switch to Chart Monitor': async function (driver) {
-    await this.driver
+    await driver
       .findElement(webdriver.By.xpath('//button[text()="Log monitor"]'))
       .click();
     await delay(500); // Wait till menu is fully opened
-    await this.driver
+    await driver
       .findElement(webdriver.By.xpath('//button[text()="Chart"]'))
       .click();
     await delay(500);
-    await this.driver.findElement(
+    await driver.findElement(
       webdriver.By.xpath('//*[@class="nodeText" and text()="state"]')
     );
     await delay(500); // Wait till menu is closed
   },
 
-  'should switch back to Inspector Monitor': async function () {
+  'should switch back to Inspector Monitor': async function (driver) {
-    await this.driver
+    await driver
       .findElement(webdriver.By.xpath('//button[text()="Chart"]'))
       .click();
     await delay(1000); // Wait till menu is fully opened
-    await this.driver
+    await driver
       .findElement(webdriver.By.xpath('//button[text()="Inspector"]'))
       .click();
     await delay(1500); // Wait till menu is closed

packages/devui/jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
   preset: 'ts-jest',
   setupFilesAfterEnv: ['<rootDir>/tests/setup.ts'],
+  testEnvironment: 'jsdom',
 };

packages/react-base16-styling/jest.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   preset: 'ts-jest',
+  testEnvironment: 'jsdom',
 };

packages/react-dock/jest.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   preset: 'ts-jest',
+  testEnvironment: 'jsdom',
 };

packages/redux-devtools-app/jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
   preset: 'ts-jest',
   setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
+  testEnvironment: 'jsdom',
 };

packages/redux-devtools-inspector-monitor-test-tab/jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
   preset: 'ts-jest',
   setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
+  testEnvironment: 'jsdom',
 };

packages/redux-devtools-inspector-monitor-trace-tab/jest.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   preset: 'ts-jest',
+  testEnvironment: 'jsdom',
 };