chore(deps-dev): bump jest from 27.5.1 to 28.0.0

.github/workflows/ci.yml

@@ -160,15 +160,13 @@ jobs:
       timeout-minutes: 10
 
   e2e-web-tests:
-    name: e2e-web-tests (${{ strategy.job-index }}/${{ strategy.job-total }})
+    name: e2e-web-tests (${{ matrix.shard-index }}/${{ strategy.job-total }})
     runs-on: ubuntu-20.04
     container: mcr.microsoft.com/playwright:v1.21.1-focal
     strategy:
       fail-fast: false
       matrix:
-        test-filename-prefix-pattern:
-          - "[a-k]"
-          - "[^a-k]"
+        shard-index: [1, 2]
 
     steps:
     - uses: actions/checkout@v2
@@ -192,7 +190,7 @@ jobs:
 
     - name: yarn test:e2e
       run: |
-        xvfb-run --server-args="-screen 0 1024x768x24" yarn test:e2e --ci --testMatch="<rootDir>/**/${{ matrix.test-filename-prefix-pattern }}*.test.ts"
+        xvfb-run --server-args="-screen 0 1024x768x24" yarn test:e2e --ci --shard=${{ matrix.shard-index }}/${{ strategy.job-total }}
       env:
         # If you need to debug Playwright/Chromium, using pw:* instead may help
         DEBUG: pw:api
@@ -203,22 +201,22 @@ jobs:
       uses: actions/upload-artifact@v2
       if: ${{ always() }}
       with:
-        name: e2e-web-tests-${{ strategy.job-index }}-results
+        name: e2e-web-tests-${{ matrix.shard-index }}-results
         path: test-results/e2e/junit-e2e.xml
       timeout-minutes: 3
 
     - name: upload artifact e2e-web-tests-debug-logs
       uses: actions/upload-artifact@v2
       if: ${{ failure() }}
       with:
-        name: e2e-web-tests-${{ strategy.job-index }}-debug-logs
+        name: e2e-web-tests-${{ matrix.shard-index }}-debug-logs
         path: |
           test-results/e2e/chrome-logs
           test-results/e2e/failure-screenshots
       timeout-minutes: 15 # chrome-logs is several GB, this can take a while
 
   e2e-unified-tests:
-    name: e2e-unified-tests (${{ strategy.job-index }}/${{ strategy.job-total }})
+    name: e2e-unified-tests (${{ matrix.shard-index }}/${{ strategy.job-total }})
     runs-on: ubuntu-20.04
     env:
       PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
@@ -227,9 +225,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        test-filename-prefix-pattern:
-          - "a" # about half the tests start with "android-setup-"
-          - "[^a]"
+        shard-index: [1, 2]
 
     steps:
     - uses: actions/checkout@v2
@@ -271,14 +267,14 @@ jobs:
 
     - name: yarn test:unified
       run: |
-        yarn test:unified --ci --testMatch="<rootDir>/**/${{ matrix.test-filename-prefix-pattern }}*.test.ts"
+        yarn test:unified --ci --shard=${{ matrix.shard-index }}/${{ strategy.job-total }}
       timeout-minutes: 15
 
     - name: upload artifact e2e-unified-tests-results
       uses: actions/upload-artifact@v2
       if: ${{ always() }}
       with:
-        name: e2e-unified-tests-${{ strategy.job-index }}-results
+        name: e2e-unified-tests-${{ matrix.shard-index }}-results
         path: test-results/electron
       timeout-minutes: 3
 

jest.config.base.js

@@ -32,6 +32,7 @@ module.exports = {
     },
     reporters: [
         'default',
+        'github-actions',
         [
             'jest-junit',
             {
@@ -40,6 +41,7 @@ module.exports = {
             },
         ],
     ],
+    resolver: `${__dirname}/src/tests/common/resolver.js`,
     setupFilesAfterEnv: [`${__dirname}/src/tests/common/flush-promises-after-each-test.ts`],
     snapshotSerializers: [`${__dirname}/src/tests/common/typemoq-snapshot-serializer.ts`],
     testEnvironment: 'node',

package.json

@@ -143,7 +143,8 @@
         "grunt-contrib-watch": "^1.1.0",
         "grunt-exec": "^3.0.0",
         "grunt-sass": "^3.1.0",
-        "jest": "^27.5.1",
+        "jest": "^28.0.0",
+        "jest-environment-jsdom": "^28.0.0",
         "jest-junit": "^13.2.0",
         "js-yaml": "^4.1.0",
         "lerna": "^4.0.0",

packages/report-e2e-tests/package.json

@@ -20,7 +20,7 @@
     },
     "devDependencies": {
         "@types/jest": "^27.4.1",
-        "jest": "^27.5.1",
+        "jest": "^28.0.0",
         "jest-file-snapshot": "^0.5.0",
         "jest-junit": "^13.2.0",
         "prettier": "^2.6.2",

src/tests/common/resolver.js

@@ -0,0 +1,30 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+module.exports = (path, options) => {
+    // Call the defaultResolver, so we leverage its cache, error handling, etc.
+    return options.defaultResolver(path, {
+        ...options,
+        // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)
+        packageFilter: pkg => {
+            // This is a workaround for https://github.com/uuidjs/uuid/pull/616
+            //
+            // jest-environment-jsdom 28+ tries to use browser exports instead of default exports,
+            // but uuid only offers an ESM browser export and not a CommonJS one. Jest does not yet
+            // support ESM modules natively, so this causes a Jest error related to trying to parse
+            // "export" syntax.
+            //
+            // This workaround prevents Jest from considering uuid's module-based exports at all;
+            // it falls back to uuid's CommonJS+node "main" property.
+            //
+            // Once we're able to migrate our Jest config to ESM and a browser crypto
+            // implementation is available for the browser+ESM version of uuid to use (eg, via
+            // https://github.com/jsdom/jsdom/pull/3352 or a similar polyfill), this can go away.
+            if (pkg.name === 'uuid') {
+                delete pkg['exports'];
+                delete pkg['module'];
+            }
+            return pkg;
+        },
+    });
+};

src/tests/electron/jest.config.js

@@ -19,6 +19,7 @@ module.exports = {
     moduleFileExtensions: ['ts', 'tsx', 'js'],
     reporters: [
         'default',
+        'github-actions',
         [
             'jest-junit',
             {

src/tests/end-to-end/jest.config.js

@@ -21,6 +21,7 @@ module.exports = {
     moduleFileExtensions: ['ts', 'tsx', 'json', 'js'],
     reporters: [
         'default',
+        'github-actions',
         [
             'jest-junit',
             { outputDirectory: '<rootDir>/test-results/e2e/', outputName: 'junit-e2e.xml' },

src/tests/unit/jest-setup.ts

@@ -1,5 +1,6 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
+import * as util from 'util';
 import { setIconOptions } from '@fluentui/react';
 import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
@@ -8,3 +9,11 @@ configure({ adapter: new Adapter() });
 setIconOptions({
     disableWarnings: true,
 });
+
+// This is a workaround for https://github.com/jsdom/jsdom/issues/2524#issuecomment-902027138
+//
+// We have a few tests that intentionally load a fresh JSDOM context (to test in an isolated
+// document) from within a JSDOM-based environment (because several of our dependencies expect
+// global window APIs to be available).
+window.TextEncoder = util.TextEncoder as unknown as typeof window.TextEncoder;
+window.TextDecoder = util.TextDecoder as unknown as typeof window.TextDecoder;

src/tests/unit/jest.config.js

@@ -13,6 +13,7 @@ module.exports = {
     moduleFileExtensions: ['ts', 'tsx', 'js'],
     reporters: [
         'default',
+        'github-actions',
         [
             'jest-junit',
             { outputDirectory: '<rootDir>/test-results/unit/', outputName: 'junit.xml' },

src/tests/unit/tests/DetailsView/__snapshots__/details-view-content.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` render renders normally 1`] = `
+exports[`DetailsViewContent render renders normally 1`] = `
 <React.Fragment>
   <InteractiveHeader
     deps={

src/tests/unit/tests/DetailsView/components/__snapshots__/inline-start-over-button.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` renders 1`] = `
+exports[`InlineStartOverButton renders 1`] = `
 <InsightsCommandButton
   className="inlineStartOverButton"
   data-automation-id="inline-start-over-button"

src/tests/unit/tests/DetailsView/components/__snapshots__/report-export-button.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` renders ReportExportButton 1`] = `
+exports[`ReportExportButton renders ReportExportButton 1`] = `
 <InsightsCommandButton
   componentRef={Object {}}
   data-automation-id="report-export-button"

src/tests/unit/tests/DetailsView/components/inline-start-over-button.test.tsx

@@ -11,7 +11,7 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 import { IMock, Mock } from 'typemoq';
 
-describe(InlineStartOverButton, () => {
+describe(InlineStartOverButton.displayName, () => {
     const testType: VisualizationType = 1;
     let detailsViewActionMessageCreatorMock: IMock<DetailsViewActionMessageCreator>;
     let props: InlineStartOverButtonProps;

src/tests/unit/tests/DetailsView/components/left-nav/__snapshots__/assessment-left-nav.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` renders with reflow feature flag enabled 1`] = `
+exports[`AssessmentLeftNav renders with reflow feature flag enabled 1`] = `
 <BaseLeftNav
   links={
     Array [

src/tests/unit/tests/DetailsView/components/left-nav/__snapshots__/details-view-left-nav.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` should render from switcher nav 1`] = `
+exports[`DetailsViewLeftNav should render from switcher nav 1`] = `
 <div
   className="leftNav main-nav"
 >

src/tests/unit/tests/DetailsView/components/left-nav/__snapshots__/fast-pass-left-nav.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` renders visualization based left nav with appropriate params 1`] = `
+exports[`FastPassLeftNav renders visualization based left nav with appropriate params 1`] = `
 <VisualizationBasedLeftNav
   deps={
     Object {

src/tests/unit/tests/DetailsView/components/left-nav/assessment-left-nav.test.tsx

@@ -19,7 +19,7 @@ import { LeftNavLinkBuilder } from '../../../../../../DetailsView/components/lef
 import { NavLinkHandler } from '../../../../../../DetailsView/components/left-nav/nav-link-handler';
 import { DictionaryStringTo } from '../../../../../../types/common-types';
 
-describe(AssessmentLeftNav, () => {
+describe(AssessmentLeftNav.displayName, () => {
     let linkStub: AssessmentLeftNavLink;
     let deps: AssessmentLeftNavDeps;
     let props: AssessmentLeftNavProps;

src/tests/unit/tests/DetailsView/components/left-nav/details-view-left-nav.test.tsx

@@ -26,7 +26,7 @@ import {
 } from '../../../../../../DetailsView/components/left-nav/details-view-left-nav';
 import { GetLeftNavSelectedKeyProps } from '../../../../../../DetailsView/components/left-nav/get-left-nav-selected-key';
 
-describe(DetailsViewLeftNav, () => {
+describe(DetailsViewLeftNav.displayName, () => {
     it('should render from switcher nav', () => {
         const selectedTestStub: VisualizationType = -1;
         const selectedKeyStub: string = 'some key';

src/tests/unit/tests/DetailsView/components/left-nav/fast-pass-left-nav.test.tsx

@@ -9,7 +9,7 @@ import {
 } from '../../../../../../DetailsView/components/left-nav/fast-pass-left-nav';
 import { NavLinkHandler } from '../../../../../../DetailsView/components/left-nav/nav-link-handler';
 
-describe(FastPassLeftNav, () => {
+describe(FastPassLeftNav.displayName, () => {
     let onRightPanelContentSwitch: () => void;
     let setNavComponentRef: (_) => void;
     let navLinkHandlerStub: NavLinkHandler;

src/tests/unit/tests/DetailsView/components/report-export-button.test.tsx

@@ -10,7 +10,7 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 import { IMock, Mock, Times } from 'typemoq';
 
-describe(ReportExportButton, () => {
+describe(ReportExportButton.displayName, () => {
     let showDialogMock: IMock<() => void>;
     let props: ReportExportButtonProps;
 

src/tests/unit/tests/DetailsView/details-view-content.test.tsx

@@ -48,7 +48,7 @@ import { VisualizationStoreDataBuilder } from '../../common/visualization-store-
 import { DetailsViewContainerPropsBuilder } from './details-view-container-props-builder';
 import { StoreMocks } from './store-mocks';
 
-describe(DetailsViewContent, () => {
+describe(DetailsViewContent.displayName, () => {
     const pageTitle = 'DetailsViewContainerTest title';
     const pageUrl = 'http://detailsViewContainerTest/url/';
     let detailsViewActionMessageCreator: IMock<DetailsViewActionMessageCreator>;

src/tests/unit/tests/common/components/__snapshots__/new-tab-link-with-tooltip.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` handles children 1`] = `
+exports[`NewTabLinkWithTooltip handles children 1`] = `
 <StyledTooltipHostBase
   calloutProps={
     Object {
@@ -26,7 +26,7 @@ exports[` handles children 1`] = `
 </StyledTooltipHostBase>
 `;
 
-exports[` renders with null tooltip content 1`] = `
+exports[`NewTabLinkWithTooltip renders with null tooltip content 1`] = `
 <StyledTooltipHostBase
   calloutProps={
     Object {
@@ -49,7 +49,7 @@ exports[` renders with null tooltip content 1`] = `
 </StyledTooltipHostBase>
 `;
 
-exports[` renders with tooltip content 1`] = `
+exports[`NewTabLinkWithTooltip renders with tooltip content 1`] = `
 <StyledTooltipHostBase
   calloutProps={
     Object {

src/tests/unit/tests/common/components/new-tab-link-with-tooltip.test.tsx

@@ -4,7 +4,7 @@ import { NewTabLinkWithTooltip } from 'common/components/new-tab-link-with-toolt
 import { shallow } from 'enzyme';
 import * as React from 'react';
 
-describe(NewTabLinkWithTooltip, () => {
+describe(NewTabLinkWithTooltip.displayName, () => {
     const props = {
         href: 'test',
         tooltipContent: 'tooltip text',

src/tests/unit/tests/reports/components/__snapshots__/fast-pass-report.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` renders 1`] = `
+exports[`FastPassReport renders 1`] = `
 "<Fragment>
   <WebReportHead />
   <BodySection>

src/tests/unit/tests/reports/components/fast-pass-report.test.tsx

@@ -13,7 +13,7 @@ import { Mock } from 'typemoq';
 
 import { exampleUnifiedStatusResults } from '../../common/components/cards/sample-view-model-data';
 
-describe(FastPassReport, () => {
+describe(FastPassReport.displayName, () => {
     it('renders', () => {
         const pageTitle = 'page-title';
         const pageUrl = 'url:target-page';

src/tests/unit/tests/reports/components/report-sections/__snapshots__/combined-report-summary-section.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` renders 1`] = `
+exports[`CombinedReportSummarySection renders 1`] = `
 <UrlsSummarySection
   failedUrlsCount={2}
   failureInstancesCount={4}

src/tests/unit/tests/reports/components/report-sections/__snapshots__/failed-urls-section.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` renders 1`] = `
+exports[`FailedUrlsSection renders 1`] = `
 <CollapsibleUrlResultSection
   badgeCount={1}
   containerId="failed-urls-section"

src/tests/unit/tests/reports/components/report-sections/__snapshots__/not-scanned-urls-section.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` renders 1`] = `
+exports[`NotScannedUrlsSection renders 1`] = `
 <CollapsibleUrlResultSection
   badgeCount={3}
   containerId="not-scanned-urls-section"

src/tests/unit/tests/reports/components/report-sections/__snapshots__/passed-urls-section.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` renders 1`] = `
+exports[`PassedUrlsSection renders 1`] = `
 <CollapsibleUrlResultSection
   badgeCount={2}
   containerId="passed-urls-section"

src/tests/unit/tests/reports/components/report-sections/__snapshots__/rules-results-container.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` renders 1`] = `
+exports[`RulesResultsContainer renders 1`] = `
 <React.Fragment>
   <div
     className="rulesResultsContainer"

src/tests/unit/tests/reports/components/report-sections/__snapshots__/summary-report-details-section.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` renders 1`] = `
+exports[`SummaryReportDetailsSection renders 1`] = `
 <div
   className="crawlDetailsSection"
 >

src/tests/unit/tests/reports/components/report-sections/__snapshots__/summary-results-table.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` renders 1`] = `
+exports[`SummaryResultsTable renders 1`] = `
 <table
   className="summaryResultsTable"
   id="table-id"