diff --git a/jest.config.js b/jest.config.js index 5384a346758..4e28a21b5ff 100644 --- a/jest.config.js +++ b/jest.config.js @@ -12,6 +12,7 @@ module.exports = { transform: { '^.+\\.[jt]sx?$': 'babel-jest' }, + setupFilesAfterEnv: ['/packages/testSetup.ts'], transformIgnorePatterns: ['node_modules/(?!@patternfly|@novnc|@popperjs|lodash|monaco-editor|react-monaco-editor)'], testPathIgnorePatterns: ['/packages/react-integration/'], coveragePathIgnorePatterns: ['/dist/'], diff --git a/packages/eslint-plugin-patternfly-react/CHANGELOG.md b/packages/eslint-plugin-patternfly-react/CHANGELOG.md index ec7dbfad277..5ed3dce8f4c 100644 --- a/packages/eslint-plugin-patternfly-react/CHANGELOG.md +++ b/packages/eslint-plugin-patternfly-react/CHANGELOG.md @@ -3,6 +3,63 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# 4.46.0 (2022-04-28) + + +### Features + +* **CodeBlock:** add class to code component ([#7281](https://github.com/patternfly/patternfly-react/issues/7281)) ([844e162](https://github.com/patternfly/patternfly-react/commit/844e1621bc695c97f911f5cc64998c5d36911a4d)) + + + + + +## 4.45.6 (2022-04-27) + +**Note:** Version bump only for package eslint-plugin-patternfly-react + + + + + +## 4.45.5 (2022-04-26) + +**Note:** Version bump only for package eslint-plugin-patternfly-react + + + + + +## 4.45.4 (2022-04-25) + + +### Bug Fixes + +* **DateTimePicker:** update date placeholder ([#7266](https://github.com/patternfly/patternfly-react/issues/7266)) ([4e9a73e](https://github.com/patternfly/patternfly-react/commit/4e9a73e8f7645b7a885d15754f99b9e078449806)) + + + + + +## 4.45.3 (2022-04-23) + +**Note:** Version bump only for package eslint-plugin-patternfly-react + + + + + +## 4.45.2 (2022-04-21) + + +### Bug Fixes + +* **DataListCheck:** revert checked prop ([#7284](https://github.com/patternfly/patternfly-react/issues/7284)) ([d9889fc](https://github.com/patternfly/patternfly-react/commit/d9889fc86f224533f81457f384954e6a299c5677)) + + + + + ## 4.45.1 (2022-04-20) **Note:** Version bump only for package eslint-plugin-patternfly-react diff --git a/packages/eslint-plugin-patternfly-react/package.json b/packages/eslint-plugin-patternfly-react/package.json index 670090b08ab..573cc3bd623 100644 --- a/packages/eslint-plugin-patternfly-react/package.json +++ b/packages/eslint-plugin-patternfly-react/package.json @@ -1,6 +1,6 @@ { "name": "eslint-plugin-patternfly-react", - "version": "4.45.1", + "version": "4.46.0", "private": false, "main": "./lib/index.js", "license": "MIT", diff --git a/packages/react-catalog-view-extension/CHANGELOG.md b/packages/react-catalog-view-extension/CHANGELOG.md index 856e8e3f73f..71225878a3b 100644 --- a/packages/react-catalog-view-extension/CHANGELOG.md +++ b/packages/react-catalog-view-extension/CHANGELOG.md @@ -3,6 +3,63 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# 4.58.0 (2022-04-28) + + +### Features + +* **CodeBlock:** add class to code component ([#7281](https://github.com/patternfly/patternfly-react/issues/7281)) ([844e162](https://github.com/patternfly/patternfly-react/commit/844e1621bc695c97f911f5cc64998c5d36911a4d)) + + + + + +## 4.57.6 (2022-04-27) + +**Note:** Version bump only for package @patternfly/react-catalog-view-extension + + + + + +## 4.57.5 (2022-04-26) + +**Note:** Version bump only for package @patternfly/react-catalog-view-extension + + + + + +## 4.57.4 (2022-04-25) + + +### Bug Fixes + +* **DateTimePicker:** update date placeholder ([#7266](https://github.com/patternfly/patternfly-react/issues/7266)) ([4e9a73e](https://github.com/patternfly/patternfly-react/commit/4e9a73e8f7645b7a885d15754f99b9e078449806)) + + + + + +## 4.57.3 (2022-04-23) + +**Note:** Version bump only for package @patternfly/react-catalog-view-extension + + + + + +## 4.57.2 (2022-04-21) + + +### Bug Fixes + +* **DataListCheck:** revert checked prop ([#7284](https://github.com/patternfly/patternfly-react/issues/7284)) ([d9889fc](https://github.com/patternfly/patternfly-react/commit/d9889fc86f224533f81457f384954e6a299c5677)) + + + + + ## 4.57.1 (2022-04-20) **Note:** Version bump only for package @patternfly/react-catalog-view-extension diff --git a/packages/react-catalog-view-extension/buildSass.js b/packages/react-catalog-view-extension/buildSass.js index b8035a2f859..79f3064892a 100644 --- a/packages/react-catalog-view-extension/buildSass.js +++ b/packages/react-catalog-view-extension/buildSass.js @@ -26,7 +26,7 @@ const res = sass.renderSync({ importer }); if (!fs.existsSync(outDir)) { - fs.mkdirSync(outDir); + fs.mkdirSync(outDir, { recursive: true }); } fs.writeFileSync(path.join(outDir, 'react-catalog-view-extension.css'), res.css); diff --git a/packages/react-catalog-view-extension/package.json b/packages/react-catalog-view-extension/package.json index eb556eb954a..ccbe0cb3ca8 100644 --- a/packages/react-catalog-view-extension/package.json +++ b/packages/react-catalog-view-extension/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-catalog-view-extension", - "version": "4.57.1", + "version": "4.58.0", "description": "This library provides catalog view extensions for PatternFly 4 React.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -29,18 +29,17 @@ }, "homepage": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-catalog-view-extension/README.md", "scripts": { - "generate": "concurrently \"yarn build:sass\" \"yarn copy:sass\"", + "generate": "yarn build:sass && yarn copy:sass", "build:sass": "node buildSass.js", "copy:sass": "shx mkdir -p dist/sass && shx cp -r sass/react-catalog-view-extension/* dist/sass", "clean": "rimraf dist" }, "dependencies": { - "@patternfly/patternfly": "4.192.1", - "@patternfly/react-core": "^4.206.1", - "@patternfly/react-styles": "^4.56.1" + "@patternfly/patternfly": "4.192.2", + "@patternfly/react-core": "^4.207.0", + "@patternfly/react-styles": "^4.57.0" }, "devDependencies": { - "concurrently": "^5.3.0", "rimraf": "^2.6.2", "sass": "^1.42.1", "shx": "^0.3.2", diff --git a/packages/react-catalog-view-extension/sass/react-catalog-view-extension/_filter-side-panel.scss b/packages/react-catalog-view-extension/sass/react-catalog-view-extension/_filter-side-panel.scss index 9e488cf7fbd..9c9e3ef6dc4 100644 --- a/packages/react-catalog-view-extension/sass/react-catalog-view-extension/_filter-side-panel.scss +++ b/packages/react-catalog-view-extension/sass/react-catalog-view-extension/_filter-side-panel.scss @@ -14,7 +14,7 @@ .filter-panel-pf-category-title { border: 0; font-size: inherit; - margin: 0; + margin: 0 0 8px 0; font-weight: 700; } diff --git a/packages/react-catalog-view-extension/src/components/CatalogItemHeader/CatalogItemHeader.test.tsx b/packages/react-catalog-view-extension/src/components/CatalogItemHeader/CatalogItemHeader.test.tsx index 90e3a3e2f31..d361ce50c3a 100644 --- a/packages/react-catalog-view-extension/src/components/CatalogItemHeader/CatalogItemHeader.test.tsx +++ b/packages/react-catalog-view-extension/src/components/CatalogItemHeader/CatalogItemHeader.test.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { render } from '@testing-library/react'; test('simple catalog item header', () => { - const view = render( + const { asFragment } = render( { } /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-catalog-view-extension/src/components/CatalogItemHeader/__snapshots__/CatalogItemHeader.test.tsx.snap b/packages/react-catalog-view-extension/src/components/CatalogItemHeader/__snapshots__/CatalogItemHeader.test.tsx.snap index bdf0c97855b..d79670ec7df 100644 --- a/packages/react-catalog-view-extension/src/components/CatalogItemHeader/__snapshots__/CatalogItemHeader.test.tsx.snap +++ b/packages/react-catalog-view-extension/src/components/CatalogItemHeader/__snapshots__/CatalogItemHeader.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`simple catalog item header 1`] = ` -
+
@@ -27,5 +27,5 @@ exports[`simple catalog item header 1`] = `
- + `; diff --git a/packages/react-catalog-view-extension/src/components/CatalogTile/CatalogTile.test.tsx b/packages/react-catalog-view-extension/src/components/CatalogTile/CatalogTile.test.tsx index dd7d34d8e5e..97fed602682 100644 --- a/packages/react-catalog-view-extension/src/components/CatalogTile/CatalogTile.test.tsx +++ b/packages/react-catalog-view-extension/src/components/CatalogTile/CatalogTile.test.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; -import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; -import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon'; + import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; +import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon'; import { CatalogTile } from './CatalogTile'; import { CatalogTileBadge } from './CatalogTileBadge'; @@ -90,7 +91,7 @@ test('CatalogTile renders properly', () => { }); test('CatalogTile href renders properly', () => { - const view = render( + const { asFragment } = render( { description="1234567890123" /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('CatalogTile onClick behaves properly', () => { @@ -119,5 +120,5 @@ test('CatalogTile onClick behaves properly', () => { ); userEvent.click(screen.getByText('Patternfly')); - expect(onClickMock).toBeCalled(); + expect(onClickMock).toHaveBeenCalled(); }); diff --git a/packages/react-catalog-view-extension/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap b/packages/react-catalog-view-extension/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap index 220aff35688..6306e06ad6c 100644 --- a/packages/react-catalog-view-extension/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap +++ b/packages/react-catalog-view-extension/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CatalogTile href renders properly 1`] = ` -
+
- + `; exports[`CatalogTile renders properly 1`] = ` diff --git a/packages/react-catalog-view-extension/src/components/FilterSidePanel/examples/filterSidePanel.css b/packages/react-catalog-view-extension/src/components/FilterSidePanel/examples/filterSidePanel.css index bf5143d2d59..cd5da788c2f 100644 --- a/packages/react-catalog-view-extension/src/components/FilterSidePanel/examples/filterSidePanel.css +++ b/packages/react-catalog-view-extension/src/components/FilterSidePanel/examples/filterSidePanel.css @@ -14,7 +14,7 @@ .filter-panel-pf-category-title { border: 0; font-size: inherit; - margin: 0; + margin: 0 0 8px 0; font-weight: 700; } diff --git a/packages/react-catalog-view-extension/src/components/VerticalTabs/VerticalTabs.test.tsx b/packages/react-catalog-view-extension/src/components/VerticalTabs/VerticalTabs.test.tsx index e182d255cb4..4a2d6f94661 100644 --- a/packages/react-catalog-view-extension/src/components/VerticalTabs/VerticalTabs.test.tsx +++ b/packages/react-catalog-view-extension/src/components/VerticalTabs/VerticalTabs.test.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; @@ -90,7 +91,7 @@ test('Vertical Tabs Tab onActivate is called correctly', () => { userEvent.click(screen.getByText('Click Me')); expect(component.container).toMatchSnapshot(); - expect(onActivateMock).toBeCalled(); + expect(onActivateMock).toHaveBeenCalled(); }); test('Vertical Tabs Tab wrap styling is set correctly', () => { diff --git a/packages/react-charts/CHANGELOG.md b/packages/react-charts/CHANGELOG.md index c61167f62df..0f9cf363f73 100644 --- a/packages/react-charts/CHANGELOG.md +++ b/packages/react-charts/CHANGELOG.md @@ -3,6 +3,63 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# 6.60.0 (2022-04-28) + + +### Features + +* **CodeBlock:** add class to code component ([#7281](https://github.com/patternfly/patternfly-react/issues/7281)) ([844e162](https://github.com/patternfly/patternfly-react/commit/844e1621bc695c97f911f5cc64998c5d36911a4d)) + + + + + +## 6.59.6 (2022-04-27) + +**Note:** Version bump only for package @patternfly/react-charts + + + + + +## 6.59.5 (2022-04-26) + +**Note:** Version bump only for package @patternfly/react-charts + + + + + +## 6.59.4 (2022-04-25) + + +### Bug Fixes + +* **DateTimePicker:** update date placeholder ([#7266](https://github.com/patternfly/patternfly-react/issues/7266)) ([4e9a73e](https://github.com/patternfly/patternfly-react/commit/4e9a73e8f7645b7a885d15754f99b9e078449806)) + + + + + +## 6.59.3 (2022-04-23) + +**Note:** Version bump only for package @patternfly/react-charts + + + + + +## 6.59.2 (2022-04-21) + + +### Bug Fixes + +* **DataListCheck:** revert checked prop ([#7284](https://github.com/patternfly/patternfly-react/issues/7284)) ([d9889fc](https://github.com/patternfly/patternfly-react/commit/d9889fc86f224533f81457f384954e6a299c5677)) + + + + + ## 6.59.1 (2022-04-20) **Note:** Version bump only for package @patternfly/react-charts diff --git a/packages/react-charts/package.json b/packages/react-charts/package.json index 73b3e83778e..7ec8dc97c7a 100644 --- a/packages/react-charts/package.json +++ b/packages/react-charts/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-charts", - "version": "6.59.1", + "version": "6.60.0", "description": "This library provides a set of React chart components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -29,8 +29,8 @@ }, "homepage": "https://github.com/patternfly/patternfly-react#readme", "dependencies": { - "@patternfly/react-styles": "^4.56.1", - "@patternfly/react-tokens": "^4.58.1", + "@patternfly/react-styles": "^4.57.0", + "@patternfly/react-tokens": "^4.59.0", "hoist-non-react-statics": "^3.3.0", "lodash": "^4.17.19", "tslib": "^2.0.0", diff --git a/packages/react-charts/src/components/Chart/Chart.test.tsx b/packages/react-charts/src/components/Chart/Chart.test.tsx index 83d360793a3..88432f4384d 100644 --- a/packages/react-charts/src/components/Chart/Chart.test.tsx +++ b/packages/react-charts/src/components/Chart/Chart.test.tsx @@ -6,13 +6,13 @@ import { ChartLine } from '../ChartLine'; Object.values([true, false]).forEach(() => { test('Chart', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders axis and component children', () => { - const view = render( + const { asFragment } = render( { ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap b/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap index 8c19b5e3025..71da8d15841 100644 --- a/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap +++ b/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Chart 1`] = ` -
+
- + `; exports[`Chart 2`] = ` -
+
- + `; exports[`renders axis and component children 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartArea/ChartArea.test.tsx b/packages/react-charts/src/components/ChartArea/ChartArea.test.tsx index 6eabe19cb34..972e37ba4ca 100644 --- a/packages/react-charts/src/components/ChartArea/ChartArea.test.tsx +++ b/packages/react-charts/src/components/ChartArea/ChartArea.test.tsx @@ -4,13 +4,13 @@ import { ChartArea } from '../ChartArea'; Object.values([true, false]).forEach(() => { test('ChartArea', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render( + const { asFragment } = render( { ]} /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap b/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap index 3990c06f09b..4611b706ec7 100644 --- a/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap +++ b/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartArea 1`] = ` -
+
- + `; exports[`ChartArea 2`] = ` -
+
- + `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartAxis/ChartAxis.test.tsx b/packages/react-charts/src/components/ChartAxis/ChartAxis.test.tsx index da3b48cb9bc..bf8a233609a 100644 --- a/packages/react-charts/src/components/ChartAxis/ChartAxis.test.tsx +++ b/packages/react-charts/src/components/ChartAxis/ChartAxis.test.tsx @@ -7,13 +7,13 @@ import { ChartLine } from '../ChartLine'; Object.values([true, false]).forEach(() => { test('ChartAxis', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render( + const { asFragment } = render( { ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap b/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap index 856709591a4..09230e4e047 100644 --- a/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap +++ b/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartAxis 1`] = ` -
+
- + `; exports[`ChartAxis 2`] = ` -
+
- + `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartBar/ChartBar.test.tsx b/packages/react-charts/src/components/ChartBar/ChartBar.test.tsx index 20dee94a345..afed8ec5832 100644 --- a/packages/react-charts/src/components/ChartBar/ChartBar.test.tsx +++ b/packages/react-charts/src/components/ChartBar/ChartBar.test.tsx @@ -6,13 +6,13 @@ import { ChartGroup } from '../ChartGroup'; Object.values([true, false]).forEach(() => { test('ChartBar', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render( + const { asFragment } = render( { ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap b/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap index 27475dbf02c..8530ad2bd4a 100644 --- a/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartBar 1`] = ` -
+
- + `; exports[`ChartBar 2`] = ` -
+
- + `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartBullet/ChartBullet.test.tsx b/packages/react-charts/src/components/ChartBullet/ChartBullet.test.tsx index 55a7a50331a..10c21a55e60 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBullet.test.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBullet.test.tsx @@ -4,13 +4,13 @@ import { ChartBullet } from './ChartBullet'; Object.values([true, false]).forEach(() => { test('ChartBulletQualitativeRange', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render( + const { asFragment } = render( { width={450} /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.test.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.test.tsx index 19f3869d93d..ee2e3468e30 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.test.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.test.tsx @@ -4,12 +4,14 @@ import { ChartBulletComparativeErrorMeasure } from './ChartBulletComparativeErro Object.values([true, false]).forEach(() => { test('ChartBulletComparativeErrorMeasure', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render( + + ); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeMeasure.test.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeMeasure.test.tsx index 37cae14d94c..065596c6bb9 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeMeasure.test.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeMeasure.test.tsx @@ -4,12 +4,14 @@ import { ChartBulletComparativeMeasure } from './ChartBulletComparativeMeasure'; Object.values([true, false]).forEach(() => { test('ChartBulletComparativeMeasure', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render( + + ); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.test.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.test.tsx index 8b001002970..b1bb81c26f4 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.test.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.test.tsx @@ -4,14 +4,14 @@ import { ChartBulletComparativeWarningMeasure } from './ChartBulletComparativeWa Object.values([true, false]).forEach(() => { test('ChartBulletComparativeZeroMeasure', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.test.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.test.tsx index b0a8b09e051..bbae6e048e4 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.test.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.test.tsx @@ -4,12 +4,12 @@ import { ChartBulletGroupTitle } from './ChartBulletGroupTitle'; Object.values([true, false]).forEach(() => { test('ChartBulletGroupTitle', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletPrimaryDotMeasure.test.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletPrimaryDotMeasure.test.tsx index 9055a648fe6..c795926f137 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletPrimaryDotMeasure.test.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletPrimaryDotMeasure.test.tsx @@ -4,14 +4,14 @@ import { ChartBulletPrimaryDotMeasure } from './ChartBulletPrimaryDotMeasure'; Object.values([true, false]).forEach(() => { test('ChartBulletPrimaryDotMeasure', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.test.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.test.tsx index c6068abcd93..80b09370953 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.test.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.test.tsx @@ -4,14 +4,14 @@ import { ChartBulletPrimarySegmentedMeasure } from './ChartBulletPrimarySegmente Object.values([true, false]).forEach(() => { test('ChartBulletPrimarySegmentedMeasure', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletQualitativeRange.test.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletQualitativeRange.test.tsx index fb1b7982998..7eba951db01 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletQualitativeRange.test.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletQualitativeRange.test.tsx @@ -4,14 +4,14 @@ import { ChartBulletQualitativeRange } from './ChartBulletQualitativeRange'; Object.values([true, false]).forEach(() => { test('ChartBulletQualitativeRange', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletTitle.test.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletTitle.test.tsx index d57ff5bcd78..2259ce4000d 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletTitle.test.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletTitle.test.tsx @@ -4,12 +4,12 @@ import { ChartBulletTitle } from './ChartBulletTitle'; Object.values([true, false]).forEach(() => { test('ChartBulletTitle', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap index 4badf7ccce8..3edab5a57e5 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartBulletQualitativeRange 1`] = ` -
+
- + `; exports[`ChartBulletQualitativeRange 2`] = ` -
+
- + `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap index b5b26acdad9..dc9006e634c 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartBulletComparativeErrorMeasure 1`] = ` -
+
- + `; exports[`ChartBulletComparativeErrorMeasure 2`] = ` -
+
- + `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap index 30789d28df3..a3b4ab2d0e1 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartBulletComparativeMeasure 1`] = ` -
+
- + `; exports[`ChartBulletComparativeMeasure 2`] = ` -
+
- + `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap index ab678e84965..c7add0824f8 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartBulletComparativeZeroMeasure 1`] = ` -
+
- + `; exports[`ChartBulletComparativeZeroMeasure 2`] = ` -
+
- + `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap index 2a02ee3fb94..72534609065 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartBulletGroupTitle 1`] = ` -
+
- + `; exports[`ChartBulletGroupTitle 2`] = ` -
+
- + `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap index aa88af457f4..d28365c38da 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartBulletPrimaryDotMeasure 1`] = ` -
+
- + `; exports[`ChartBulletPrimaryDotMeasure 2`] = ` -
+
- + `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap index 0fffa0ed46d..f7541aefacb 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartBulletPrimarySegmentedMeasure 1`] = ` -
+
- + `; exports[`ChartBulletPrimarySegmentedMeasure 2`] = ` -
+
- + `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap index 8c4315e2ab2..711173d4f4c 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartBulletQualitativeRange 1`] = ` -
+
- + `; exports[`ChartBulletQualitativeRange 2`] = ` -
+
- + `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap index fe0e2a90c6b..dd7810d0266 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartBulletTitle 1`] = ` -
+
- + `; exports[`ChartBulletTitle 2`] = ` -
+
- + `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartContainer/ChartContainer.test.tsx b/packages/react-charts/src/components/ChartContainer/ChartContainer.test.tsx index b2b39285b60..6fbdad04ca8 100644 --- a/packages/react-charts/src/components/ChartContainer/ChartContainer.test.tsx +++ b/packages/react-charts/src/components/ChartContainer/ChartContainer.test.tsx @@ -5,13 +5,13 @@ import { ChartLegend } from '../ChartLegend'; Object.values([true, false]).forEach(() => { test('ChartContainer', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders container via ChartLegend', () => { - const view = render( + const { asFragment } = render( { /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap b/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap index e07c160403c..dfcd7621cd5 100644 --- a/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap +++ b/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartContainer 1`] = ` -
+
- + `; exports[`ChartContainer 2`] = ` -
+
- + `; exports[`renders container via ChartLegend 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.test.tsx b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.test.tsx index c1b94337fa0..4edeb5735a5 100644 --- a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.test.tsx +++ b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.test.tsx @@ -6,13 +6,13 @@ import { ChartCursorContainer } from './ChartCursorContainer'; Object.values([true, false]).forEach(() => { test('ChartVoronoiContainer', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders container via ChartGroup', () => { - const view = render( + const { asFragment } = render( } height={200} width={200}> { /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap b/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap index 80ce36172c8..fc11d228383 100644 --- a/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap +++ b/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartVoronoiContainer 1`] = ` -
+
- + `; exports[`ChartVoronoiContainer 2`] = ` -
+
- + `; exports[`renders container via ChartGroup 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.test.tsx b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.test.tsx index 736974e29af..793d60d474b 100644 --- a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.test.tsx +++ b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.test.tsx @@ -8,18 +8,20 @@ import { createContainer } from '../ChartUtils'; Object.values([true, false]).forEach(() => { test('ChartTooltip', () => { - const view = render(} />); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render( + } /> + ); + expect(asFragment()).toMatchSnapshot(); }); }); test('allows tooltip via container component', () => { const CursorVoronoiContainer = createContainer('cursor', 'voronoi'); - const view = render( + const { asFragment } = render( 'y: ' + point.y} + labels={(point: { y: number }) => 'y: ' + point.y} labelComponent={} />} /> } @@ -45,5 +47,5 @@ test('allows tooltip via container component', () => { /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.test.tsx b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.test.tsx index b6b8ae48d14..fa0d1d0cbce 100644 --- a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.test.tsx +++ b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.test.tsx @@ -7,17 +7,20 @@ import { createContainer } from '../ChartUtils'; Object.values([true, false]).forEach(() => { test('ChartCursorTooltip', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('allows tooltip via container component', () => { const CursorVoronoiContainer = createContainer('cursor', 'voronoi'); - const view = render( + const { asFragment } = render( 'y: ' + point.y} labelComponent={} /> + 'y: ' + point.y} + labelComponent={} + /> } height={200} width={200} @@ -41,5 +44,5 @@ test('allows tooltip via container component', () => { /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap index 667f8be8dc4..bffba397c22 100644 --- a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap +++ b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ChartTooltip 1`] = `
`; +exports[`ChartTooltip 1`] = ``; -exports[`ChartTooltip 2`] = `
`; +exports[`ChartTooltip 2`] = ``; exports[`allows tooltip via container component 1`] = ` -
+
-
+ `; diff --git a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap index 5931a8596f2..adf80dfea39 100644 --- a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap +++ b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ChartCursorTooltip 1`] = `
`; +exports[`ChartCursorTooltip 1`] = ``; -exports[`ChartCursorTooltip 2`] = `
`; +exports[`ChartCursorTooltip 2`] = ``; exports[`allows tooltip via container component 1`] = ` -
+
-
+ `; diff --git a/packages/react-charts/src/components/ChartDonut/ChartDonut.test.tsx b/packages/react-charts/src/components/ChartDonut/ChartDonut.test.tsx index 84c116a1de8..03f4b6cbe4c 100644 --- a/packages/react-charts/src/components/ChartDonut/ChartDonut.test.tsx +++ b/packages/react-charts/src/components/ChartDonut/ChartDonut.test.tsx @@ -4,13 +4,13 @@ import { ChartDonut } from './ChartDonut'; Object.values([true, false]).forEach(() => { test('ChartDonut', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render( + const { asFragment } = render( { width={200} /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap b/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap index bdb6aa1af4b..9bd924a2a4e 100644 --- a/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap +++ b/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartDonut 1`] = ` -
+
-
+ `; exports[`ChartDonut 2`] = ` -
+
-
+ `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.test.tsx b/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.test.tsx index a1dc4b4f386..913f69b374e 100644 --- a/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.test.tsx +++ b/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.test.tsx @@ -4,13 +4,13 @@ import { ChartDonutThreshold } from './ChartDonutThreshold'; Object.values([true, false]).forEach(() => { test('ChartDonutThreshold', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render( + const { asFragment } = render( { width={200} /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.test.tsx b/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.test.tsx index 00372224013..82e564ed53c 100644 --- a/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.test.tsx +++ b/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.test.tsx @@ -4,12 +4,12 @@ import { ChartDonutUtilization } from './ChartDonutUtilization'; Object.values([true, false]).forEach(() => { test('ChartDonutUtilization', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap index 0ea8ca9a6bc..81650b1eb5f 100644 --- a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap +++ b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartDonutThreshold 1`] = ` -
+
- + `; exports[`ChartDonutThreshold 2`] = ` -
+
- + `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap index 698651870fc..bcfbcb98139 100644 --- a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap +++ b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartDonutUtilization 1`] = ` -
+
- + `; exports[`ChartDonutUtilization 2`] = ` -
+
- + `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartGroup/ChartGroup.test.tsx b/packages/react-charts/src/components/ChartGroup/ChartGroup.test.tsx index 0b0f7decc42..94b3107f887 100644 --- a/packages/react-charts/src/components/ChartGroup/ChartGroup.test.tsx +++ b/packages/react-charts/src/components/ChartGroup/ChartGroup.test.tsx @@ -5,13 +5,13 @@ import { ChartGroup } from './ChartGroup'; Object.values([true, false]).forEach(() => { test('ChartGroup', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders container children', () => { - const view = render( + const { asFragment } = render( { /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap b/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap index 8ac7f11b85a..099d5a292ed 100644 --- a/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap +++ b/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartGroup 1`] = ` -
+
- + `; exports[`ChartGroup 2`] = ` -
+
- + `; exports[`renders container children 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartLabel/ChartLabel.test.tsx b/packages/react-charts/src/components/ChartLabel/ChartLabel.test.tsx index 90042cd94e9..591cf5ea333 100644 --- a/packages/react-charts/src/components/ChartLabel/ChartLabel.test.tsx +++ b/packages/react-charts/src/components/ChartLabel/ChartLabel.test.tsx @@ -4,12 +4,12 @@ import { ChartLabel } from './ChartLabel'; Object.values([true, false]).forEach(() => { test('ChartLabel', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component text', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap b/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap index 6703b6ffabf..505940e4f56 100644 --- a/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ChartLabel 1`] = `
`; +exports[`ChartLabel 1`] = ``; -exports[`ChartLabel 2`] = `
`; +exports[`ChartLabel 2`] = ``; exports[`renders component text 1`] = ` -
+ -
+ `; diff --git a/packages/react-charts/src/components/ChartLegend/ChartLegend.test.tsx b/packages/react-charts/src/components/ChartLegend/ChartLegend.test.tsx index 06e9a8cbffc..bf8d1243ef0 100644 --- a/packages/react-charts/src/components/ChartLegend/ChartLegend.test.tsx +++ b/packages/react-charts/src/components/ChartLegend/ChartLegend.test.tsx @@ -4,14 +4,14 @@ import { ChartLegend } from './ChartLegend'; Object.values([true, false]).forEach(() => { test('ChartLegend', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap b/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap index 583f07b629a..5c0c232cd4b 100644 --- a/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartLegend 1`] = ` -
+
-
+ `; exports[`ChartLegend 2`] = ` -
+
-
+ `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.test.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.test.tsx index f147085cc69..ade032dddc0 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.test.tsx +++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.test.tsx @@ -10,8 +10,8 @@ import { ChartLegendTooltip } from './ChartLegendTooltip'; Object.values([true, false]).forEach(() => { test('ChartLegendTooltip', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); @@ -23,14 +23,16 @@ test('allows tooltip via container component', () => { { name: 'Birds' }, { name: 'Mice' } ]; - const view = render( + const { asFragment } = render( `${datum.y !== null ? datum.y : 'no data'}`} - labelComponent={ datum.x} />} + labels={({ datum }: { datum: { y: number } }) => `${datum.y !== null ? datum.y : 'no data'}`} + labelComponent={ + datum.x} /> + } mouseFollowTooltips voronoiDimension="x" voronoiPadding={50} @@ -93,5 +95,5 @@ test('allows tooltip via container component', () => { ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.test.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.test.tsx index 56896b08ee9..480a43e19b0 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.test.tsx +++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.test.tsx @@ -4,8 +4,8 @@ import { ChartLegendTooltipContent } from './ChartLegendTooltipContent'; Object.values([true, false]).forEach(() => { test('ChartLegendTooltipContent', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); @@ -16,6 +16,6 @@ test('renders component text', () => { { name: 'Birds' }, { name: 'Mice' } ]; - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.test.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.test.tsx index 6ae265c849b..9826af32eea 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.test.tsx +++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.test.tsx @@ -4,8 +4,8 @@ import { ChartLegendTooltipLabel } from './ChartLegendTooltipLabel'; Object.values([true, false]).forEach(() => { test('ChartLegendTooltipLabel', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); @@ -16,6 +16,6 @@ test('renders component text', () => { { name: 'Birds' }, { name: 'Mice' } ]; - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap index 4b087cbdebb..3ad3963ecf8 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ChartLegendTooltip 1`] = `
`; +exports[`ChartLegendTooltip 1`] = ``; -exports[`ChartLegendTooltip 2`] = `
`; +exports[`ChartLegendTooltip 2`] = ``; exports[`allows tooltip via container component 1`] = ` -
+
-
+ `; diff --git a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipContent.test.tsx.snap b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipContent.test.tsx.snap index 4a3f98cb872..9f9db62b2bc 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipContent.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipContent.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartLegendTooltipContent 1`] = ` -
+ -
+ `; exports[`ChartLegendTooltipContent 2`] = ` -
+ -
+ `; exports[`renders component text 1`] = ` -
+ -
+ `; diff --git a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap index 86fdfc4786b..a742b97c77f 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ChartLegendTooltipLabel 1`] = `
`; +exports[`ChartLegendTooltipLabel 1`] = ``; -exports[`ChartLegendTooltipLabel 2`] = `
`; +exports[`ChartLegendTooltipLabel 2`] = ``; exports[`renders component text 1`] = ` -
+ -
+ `; diff --git a/packages/react-charts/src/components/ChartLine/ChartLine.test.tsx b/packages/react-charts/src/components/ChartLine/ChartLine.test.tsx index 7b6eacb68e5..bec331c202e 100644 --- a/packages/react-charts/src/components/ChartLine/ChartLine.test.tsx +++ b/packages/react-charts/src/components/ChartLine/ChartLine.test.tsx @@ -6,13 +6,13 @@ import { ChartLine } from './ChartLine'; Object.values([true, false]).forEach(() => { test('ChartLine', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render( + const { asFragment } = render( { ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap b/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap index 08f74b8c0a1..32a05673086 100644 --- a/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartLine 1`] = ` -
+
-
+ `; exports[`ChartLine 2`] = ` -
+
-
+ `; exports[`renders component data 1`] = ` -
+
-
+ `; diff --git a/packages/react-charts/src/components/ChartPie/ChartPie.test.tsx b/packages/react-charts/src/components/ChartPie/ChartPie.test.tsx index 4a88a854d42..03406cfeb54 100644 --- a/packages/react-charts/src/components/ChartPie/ChartPie.test.tsx +++ b/packages/react-charts/src/components/ChartPie/ChartPie.test.tsx @@ -4,13 +4,13 @@ import { ChartPie } from './ChartPie'; Object.values([true, false]).forEach(() => { test('ChartPie', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render( + const { asFragment } = render( { width={200} /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap b/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap index feb6d674d7b..7c119a80ae5 100644 --- a/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap +++ b/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartPie 1`] = ` -
+
- + `; exports[`ChartPie 2`] = ` -
+
- + `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartPoint/ChartPoint.test.tsx b/packages/react-charts/src/components/ChartPoint/ChartPoint.test.tsx index 25ad77ea003..50b3c978cd9 100644 --- a/packages/react-charts/src/components/ChartPoint/ChartPoint.test.tsx +++ b/packages/react-charts/src/components/ChartPoint/ChartPoint.test.tsx @@ -5,13 +5,13 @@ import { ChartPoint } from './ChartPoint'; Object.values([true, false]).forEach(() => { test('ChartPoint', () => { - const view = render(} />); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(} />); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render( + const { asFragment } = render( { width={200} /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap b/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap index 54e63c4c3ef..6be8426422d 100644 --- a/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap +++ b/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartPoint 1`] = ` -
+
- + `; exports[`ChartPoint 2`] = ` -
+
- + `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartScatter/ChartScatter.test.tsx b/packages/react-charts/src/components/ChartScatter/ChartScatter.test.tsx index 05d10e30cc8..841d25a4c67 100644 --- a/packages/react-charts/src/components/ChartScatter/ChartScatter.test.tsx +++ b/packages/react-charts/src/components/ChartScatter/ChartScatter.test.tsx @@ -6,13 +6,13 @@ import { ChartScatter } from './ChartScatter'; Object.values([true, false]).forEach(() => { test('ChartScatter', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render( + const { asFragment } = render( { ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap b/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap index 8e08a2f02f2..513ad57c411 100644 --- a/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap +++ b/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartScatter 1`] = ` -
+
- + `; exports[`ChartScatter 2`] = ` -
+
- + `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartStack/ChartStack.test.tsx b/packages/react-charts/src/components/ChartStack/ChartStack.test.tsx index 75be6401854..041e16164bc 100644 --- a/packages/react-charts/src/components/ChartStack/ChartStack.test.tsx +++ b/packages/react-charts/src/components/ChartStack/ChartStack.test.tsx @@ -6,13 +6,13 @@ import { ChartStack } from './ChartStack'; Object.values([true, false]).forEach(() => { test('ChartStack', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders component data', () => { - const view = render( + const { asFragment } = render( { ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap b/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap index bbe559b68ca..ec362981cfd 100644 --- a/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap +++ b/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartStack 1`] = ` -
+
- + `; exports[`ChartStack 2`] = ` -
+
- + `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartThreshold/ChartThreshold.test.tsx b/packages/react-charts/src/components/ChartThreshold/ChartThreshold.test.tsx index 9a2b2e807cb..bcd09f0bfe7 100644 --- a/packages/react-charts/src/components/ChartThreshold/ChartThreshold.test.tsx +++ b/packages/react-charts/src/components/ChartThreshold/ChartThreshold.test.tsx @@ -6,8 +6,8 @@ import { ChartThreshold } from './ChartThreshold'; Object.values([true, false]).forEach(() => { test('ChartThreshold', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); @@ -18,12 +18,12 @@ test('renders component data', () => { { name: 'Birds Threshold', x: 2, y: 3 }, { name: 'Birds Threshold', x: 5, y: 3 } ]; - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap b/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap index 608957aca2d..2ff05a801c7 100644 --- a/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap +++ b/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartThreshold 1`] = ` -
+
- + `; exports[`ChartThreshold 2`] = ` -
+
- + `; exports[`renders component data 1`] = ` -
+
- + `; diff --git a/packages/react-charts/src/components/ChartTooltip/ChartTooltip.test.tsx b/packages/react-charts/src/components/ChartTooltip/ChartTooltip.test.tsx index 7d753205662..f5dd1195add 100644 --- a/packages/react-charts/src/components/ChartTooltip/ChartTooltip.test.tsx +++ b/packages/react-charts/src/components/ChartTooltip/ChartTooltip.test.tsx @@ -7,15 +7,15 @@ import { ChartTooltip } from './ChartTooltip'; Object.values([true, false]).forEach(() => { test('ChartTooltip', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('allows tooltip via container component', () => { - const view = render( + const { asFragment } = render( 'y: ' + point.y} />} + containerComponent={ 'y: ' + point.y} />} height={200} width={200} > @@ -38,5 +38,5 @@ test('allows tooltip via container component', () => { /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap index ab54202bead..0cc6eb2ccca 100644 --- a/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap +++ b/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ChartTooltip 1`] = `
`; +exports[`ChartTooltip 1`] = ``; -exports[`ChartTooltip 2`] = `
`; +exports[`ChartTooltip 2`] = ``; exports[`allows tooltip via container component 1`] = ` -
+
-
+ `; diff --git a/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoContainer.test.tsx b/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoContainer.test.tsx index 817ec8a31fa..482bfaf5594 100644 --- a/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoContainer.test.tsx +++ b/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoContainer.test.tsx @@ -6,13 +6,13 @@ import { ChartVoronoiContainer } from './ChartVoronoiContainer'; Object.values([true, false]).forEach(() => { test('ChartVoronoiContainer', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); test('renders container via ChartGroup', () => { - const view = render( + const { asFragment } = render( } height={200} width={200}> { /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap b/packages/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap index 80ce36172c8..fc11d228383 100644 --- a/packages/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap +++ b/packages/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartVoronoiContainer 1`] = ` -
+
-
+ `; exports[`ChartVoronoiContainer 2`] = ` -
+
- + `; exports[`renders container via ChartGroup 1`] = ` -
+
- + `; diff --git a/packages/react-code-editor/CHANGELOG.md b/packages/react-code-editor/CHANGELOG.md index f8121afecd6..27731bad461 100644 --- a/packages/react-code-editor/CHANGELOG.md +++ b/packages/react-code-editor/CHANGELOG.md @@ -3,6 +3,63 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# 4.48.0 (2022-04-28) + + +### Features + +* **CodeBlock:** add class to code component ([#7281](https://github.com/patternfly/patternfly-react/issues/7281)) ([844e162](https://github.com/patternfly/patternfly-react/commit/844e1621bc695c97f911f5cc64998c5d36911a4d)) + + + + + +## 4.47.6 (2022-04-27) + +**Note:** Version bump only for package @patternfly/react-code-editor + + + + + +## 4.47.5 (2022-04-26) + +**Note:** Version bump only for package @patternfly/react-code-editor + + + + + +## 4.47.4 (2022-04-25) + + +### Bug Fixes + +* **DateTimePicker:** update date placeholder ([#7266](https://github.com/patternfly/patternfly-react/issues/7266)) ([4e9a73e](https://github.com/patternfly/patternfly-react/commit/4e9a73e8f7645b7a885d15754f99b9e078449806)) + + + + + +## 4.47.3 (2022-04-23) + +**Note:** Version bump only for package @patternfly/react-code-editor + + + + + +## 4.47.2 (2022-04-21) + + +### Bug Fixes + +* **DataListCheck:** revert checked prop ([#7284](https://github.com/patternfly/patternfly-react/issues/7284)) ([d9889fc](https://github.com/patternfly/patternfly-react/commit/d9889fc86f224533f81457f384954e6a299c5677)) + + + + + ## 4.47.1 (2022-04-20) **Note:** Version bump only for package @patternfly/react-code-editor diff --git a/packages/react-code-editor/package.json b/packages/react-code-editor/package.json index bf5e8003b65..c35c98ee78b 100644 --- a/packages/react-code-editor/package.json +++ b/packages/react-code-editor/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-code-editor", - "version": "4.47.1", + "version": "4.48.0", "description": "This package provides a PatternFly wrapper for the Monaco code editor\n", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -30,9 +30,9 @@ "clean": "rimraf dist" }, "dependencies": { - "@patternfly/react-core": "^4.206.1", - "@patternfly/react-icons": "^4.57.1", - "@patternfly/react-styles": "^4.56.1", + "@patternfly/react-core": "^4.207.0", + "@patternfly/react-icons": "^4.58.0", + "@patternfly/react-styles": "^4.57.0", "react-dropzone": "9.0.0", "tslib": "^2.0.0" }, diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx b/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx index 5ef5014bcd0..f8927aa6e3a 100644 --- a/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx @@ -8,12 +8,12 @@ describe('CodeEditor', () => { }); test('matches snapshot without props', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('matches snapshot with all props', () => { - const view = render( + const { asFragment } = render( { language={Language.javascript} /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap index bc17554226f..37266ab9584 100644 --- a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap +++ b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CodeEditor matches snapshot with all props 1`] = ` -
+
@@ -342,11 +342,11 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
- + `; exports[`CodeEditor matches snapshot without props 1`] = ` -
+
@@ -574,5 +574,5 @@ exports[`CodeEditor matches snapshot without props 1`] = `
- + `; diff --git a/packages/react-console/CHANGELOG.md b/packages/react-console/CHANGELOG.md index 930ec3a2220..c2ce7766a5e 100644 --- a/packages/react-console/CHANGELOG.md +++ b/packages/react-console/CHANGELOG.md @@ -3,6 +3,63 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# 4.58.0 (2022-04-28) + + +### Features + +* **CodeBlock:** add class to code component ([#7281](https://github.com/patternfly/patternfly-react/issues/7281)) ([844e162](https://github.com/patternfly/patternfly-react/commit/844e1621bc695c97f911f5cc64998c5d36911a4d)) + + + + + +## 4.57.6 (2022-04-27) + +**Note:** Version bump only for package @patternfly/react-console + + + + + +## 4.57.5 (2022-04-26) + +**Note:** Version bump only for package @patternfly/react-console + + + + + +## 4.57.4 (2022-04-25) + + +### Bug Fixes + +* **DateTimePicker:** update date placeholder ([#7266](https://github.com/patternfly/patternfly-react/issues/7266)) ([4e9a73e](https://github.com/patternfly/patternfly-react/commit/4e9a73e8f7645b7a885d15754f99b9e078449806)) + + + + + +## 4.57.3 (2022-04-23) + +**Note:** Version bump only for package @patternfly/react-console + + + + + +## 4.57.2 (2022-04-21) + + +### Bug Fixes + +* **DataListCheck:** revert checked prop ([#7284](https://github.com/patternfly/patternfly-react/issues/7284)) ([d9889fc](https://github.com/patternfly/patternfly-react/commit/d9889fc86f224533f81457f384954e6a299c5677)) + + + + + ## 4.57.1 (2022-04-20) **Note:** Version bump only for package @patternfly/react-console diff --git a/packages/react-console/package.json b/packages/react-console/package.json index 194fa46c731..09e75adbe8e 100644 --- a/packages/react-console/package.json +++ b/packages/react-console/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-console", - "version": "4.57.1", + "version": "4.58.0", "description": "This package provides VncConsole, SerialConsole and DesktopViewer React components to be used alongside patternfly-react to access virtual machine or server consoles.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -33,8 +33,8 @@ }, "dependencies": { "@novnc/novnc": "^1.2.0", - "@patternfly/patternfly": "4.192.1", - "@patternfly/react-core": "^4.206.1", + "@patternfly/patternfly": "4.192.2", + "@patternfly/react-core": "^4.207.0", "@spice-project/spice-html5": "^0.2.1", "@types/file-saver": "^2.0.1", "file-saver": "^1.3.8", diff --git a/packages/react-console/src/components/AccessConsoles/__tests__/AccessConsoles.test.tsx b/packages/react-console/src/components/AccessConsoles/__tests__/AccessConsoles.test.tsx index 1290ce52c55..6207f69d4fb 100644 --- a/packages/react-console/src/components/AccessConsoles/__tests__/AccessConsoles.test.tsx +++ b/packages/react-console/src/components/AccessConsoles/__tests__/AccessConsoles.test.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import '@testing-library/jest-dom'; import { AccessConsoles } from '../AccessConsoles'; import { SerialConsole } from '../../SerialConsole'; diff --git a/packages/react-console/src/components/DesktopViewer/__tests__/DesktopViewer.test.tsx b/packages/react-console/src/components/DesktopViewer/__tests__/DesktopViewer.test.tsx index 7d32eade352..8c6cb469dc7 100644 --- a/packages/react-console/src/components/DesktopViewer/__tests__/DesktopViewer.test.tsx +++ b/packages/react-console/src/components/DesktopViewer/__tests__/DesktopViewer.test.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import '@testing-library/jest-dom'; import { DesktopViewer } from '../DesktopViewer'; import { MoreInformationDefaultContent } from '../MoreInformationDefaultContent'; @@ -90,8 +89,8 @@ describe('DesktopViewer', () => { }); test('default MoreInformationContent', () => { - render(); - expect(screen.getByText(/Launch Remote Viewer/).outerHTML).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('default implementation of generateVVFile()', () => { diff --git a/packages/react-console/src/components/DesktopViewer/__tests__/__snapshots__/DesktopViewer.test.tsx.snap b/packages/react-console/src/components/DesktopViewer/__tests__/__snapshots__/DesktopViewer.test.tsx.snap index ed545b28d0c..b2f253e6077 100644 --- a/packages/react-console/src/components/DesktopViewer/__tests__/__snapshots__/DesktopViewer.test.tsx.snap +++ b/packages/react-console/src/components/DesktopViewer/__tests__/__snapshots__/DesktopViewer.test.tsx.snap @@ -1,6 +1,122 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`DesktopViewer default MoreInformationContent 1`] = `"

Clicking \\"Launch Remote Viewer\\" will download a .vv file and launch Remote Viewer

"`; +exports[`DesktopViewer default MoreInformationContent 1`] = ` + +

+ Clicking "Launch Remote Viewer" will download a .vv file and launch + + Remote Viewer + +

+

+ + Remote Viewer + + is available for most operating systems. To install it, search for it in GNOME Software or run the following: +

+
+
+
+ + RHEL, CentOS + +
+
+
+ sudo yum install virt-viewer +
+
+
+
+
+ + Fedora + +
+
+
+ sudo dnf install virt-viewer +
+
+
+
+
+ + Ubuntu, Debian + +
+
+
+ sudo apt-get install virt-viewer +
+
+
+
+
+ + Windows + +
+
+
+
+ Download the MSI from + + virt-manager.org + +
+
+
+
+
+ +`; exports[`DesktopViewer empty 1`] = ` diff --git a/packages/react-console/src/components/SerialConsole/__tests__/SerialConsoleActions.test.tsx b/packages/react-console/src/components/SerialConsole/__tests__/SerialConsoleActions.test.tsx index 2ca5ed3a8a3..03d24179cd1 100644 --- a/packages/react-console/src/components/SerialConsole/__tests__/SerialConsoleActions.test.tsx +++ b/packages/react-console/src/components/SerialConsole/__tests__/SerialConsoleActions.test.tsx @@ -2,20 +2,13 @@ import React from 'react'; import { render } from '@testing-library/react'; import { SerialConsoleActions } from '../SerialConsoleActions'; -test('placeholder render test', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); -}); - test('Render SerialConsoleActions', () => { - const view = render( - - ); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('Render SerialConsoleActions with custom texts', () => { - const view = render( + const { asFragment } = render( { textReset="My Reconnect Text" /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-console/src/components/SerialConsole/__tests__/__snapshots__/SerialConsoleActions.test.tsx.snap b/packages/react-console/src/components/SerialConsole/__tests__/__snapshots__/SerialConsoleActions.test.tsx.snap index 6d3be72febd..0ce105d4e9d 100644 --- a/packages/react-console/src/components/SerialConsole/__tests__/__snapshots__/SerialConsoleActions.test.tsx.snap +++ b/packages/react-console/src/components/SerialConsole/__tests__/__snapshots__/SerialConsoleActions.test.tsx.snap @@ -1,14 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Render SerialConsoleActions 1`] = ` -
+
-
+ `; exports[`Render SerialConsoleActions with custom texts 1`] = ` -
+
-
-`; - -exports[`placeholder render test 1`] = ` -
-
- - -
-
+ `; diff --git a/packages/react-console/src/components/VncConsole/__tests__/VncActions.test.tsx b/packages/react-console/src/components/VncConsole/__tests__/VncActions.test.tsx index 4a92dc90f35..a6d0a8adc40 100644 --- a/packages/react-console/src/components/VncConsole/__tests__/VncActions.test.tsx +++ b/packages/react-console/src/components/VncConsole/__tests__/VncActions.test.tsx @@ -13,28 +13,24 @@ describe('VncActions', () => { test('VncActions renders correctly component hierarchy', () => { const { asFragment } = render( -
- -
+ ); expect(asFragment()).toMatchSnapshot(); }); test('VncActions renders correctly html', () => { const { asFragment } = render( -
- -
+ ); expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-console/src/components/VncConsole/__tests__/VncConsole.test.tsx b/packages/react-console/src/components/VncConsole/__tests__/VncConsole.test.tsx index 52d5c6a07f1..cfef7c874a7 100644 --- a/packages/react-console/src/components/VncConsole/__tests__/VncConsole.test.tsx +++ b/packages/react-console/src/components/VncConsole/__tests__/VncConsole.test.tsx @@ -4,6 +4,6 @@ import { render } from '@testing-library/react'; import { VncConsole } from '../../VncConsole'; test('placeholder render test', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-console/src/components/VncConsole/__tests__/__snapshots__/VncActions.test.tsx.snap b/packages/react-console/src/components/VncConsole/__tests__/__snapshots__/VncActions.test.tsx.snap index 72659be4b6b..ed30aef0d13 100644 --- a/packages/react-console/src/components/VncConsole/__tests__/__snapshots__/VncActions.test.tsx.snap +++ b/packages/react-console/src/components/VncConsole/__tests__/__snapshots__/VncActions.test.tsx.snap @@ -3,63 +3,59 @@ exports[`VncActions VncActions renders correctly component hierarchy 1`] = `
-
- -
+
`; @@ -67,63 +63,59 @@ exports[`VncActions VncActions renders correctly component hierarchy 1`] = ` exports[`VncActions VncActions renders correctly html 1`] = `
-
- -
+
`; diff --git a/packages/react-console/src/components/VncConsole/__tests__/__snapshots__/VncConsole.test.tsx.snap b/packages/react-console/src/components/VncConsole/__tests__/__snapshots__/VncConsole.test.tsx.snap index 2221815cb3c..2334ecb85f3 100644 --- a/packages/react-console/src/components/VncConsole/__tests__/__snapshots__/VncConsole.test.tsx.snap +++ b/packages/react-console/src/components/VncConsole/__tests__/__snapshots__/VncConsole.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`placeholder render test 1`] = ` -
+
@@ -42,5 +42,5 @@ exports[`placeholder render test 1`] = `
-
+ `; diff --git a/packages/react-core/CHANGELOG.md b/packages/react-core/CHANGELOG.md index b4284730e1f..25c00486b4d 100644 --- a/packages/react-core/CHANGELOG.md +++ b/packages/react-core/CHANGELOG.md @@ -3,6 +3,63 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# 4.207.0 (2022-04-28) + + +### Features + +* **CodeBlock:** add class to code component ([#7281](https://github.com/patternfly/patternfly-react/issues/7281)) ([844e162](https://github.com/patternfly/patternfly-react/commit/844e1621bc695c97f911f5cc64998c5d36911a4d)) + + + + + +## 4.206.6 (2022-04-27) + +**Note:** Version bump only for package @patternfly/react-core + + + + + +## 4.206.5 (2022-04-26) + +**Note:** Version bump only for package @patternfly/react-core + + + + + +## 4.206.4 (2022-04-25) + + +### Bug Fixes + +* **DateTimePicker:** update date placeholder ([#7266](https://github.com/patternfly/patternfly-react/issues/7266)) ([4e9a73e](https://github.com/patternfly/patternfly-react/commit/4e9a73e8f7645b7a885d15754f99b9e078449806)) + + + + + +## 4.206.3 (2022-04-23) + +**Note:** Version bump only for package @patternfly/react-core + + + + + +## 4.206.2 (2022-04-21) + + +### Bug Fixes + +* **DataListCheck:** revert checked prop ([#7284](https://github.com/patternfly/patternfly-react/issues/7284)) ([d9889fc](https://github.com/patternfly/patternfly-react/commit/d9889fc86f224533f81457f384954e6a299c5677)) + + + + + ## 4.206.1 (2022-04-20) **Note:** Version bump only for package @patternfly/react-core diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 56ee803ced5..821029cd3b0 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-core", - "version": "4.206.1", + "version": "4.207.0", "description": "This library provides a set of common React components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -34,16 +34,16 @@ "generate": "node scripts/copyStyles.js" }, "dependencies": { - "@patternfly/react-icons": "^4.57.1", - "@patternfly/react-styles": "^4.56.1", - "@patternfly/react-tokens": "^4.58.1", + "@patternfly/react-icons": "^4.58.0", + "@patternfly/react-styles": "^4.57.0", + "@patternfly/react-tokens": "^4.59.0", "focus-trap": "6.2.2", "react-dropzone": "9.0.0", "tippy.js": "5.1.2", "tslib": "^2.0.0" }, "devDependencies": { - "@patternfly/patternfly": "4.192.1", + "@patternfly/patternfly": "4.192.2", "@rollup/plugin-commonjs": "^21.0.0", "@rollup/plugin-node-resolve": "^13.0.0", "@rollup/plugin-replace": "^3.0.0", diff --git a/packages/react-core/src/components/AboutModal/__tests__/AboutModal.test.tsx b/packages/react-core/src/components/AboutModal/__tests__/AboutModal.test.tsx index fe68390a106..6f03b9422b5 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/AboutModal.test.tsx +++ b/packages/react-core/src/components/AboutModal/__tests__/AboutModal.test.tsx @@ -19,7 +19,7 @@ describe('AboutModal', () => { render(); userEvent.type(screen.getByRole('dialog'), '{esc}'); - expect(props.onClose).toBeCalled(); + expect(props.onClose).toHaveBeenCalled(); }); test('does not render the modal when isOpen is not specified', () => { @@ -48,6 +48,6 @@ describe('AboutModal', () => { global.console = { error: myMock } as any; render(Test About Modal); - expect(myMock).toBeCalled(); + expect(myMock).toHaveBeenCalled(); }); }); diff --git a/packages/react-core/src/components/AboutModal/__tests__/AboutModalBox.test.tsx b/packages/react-core/src/components/AboutModal/__tests__/AboutModalBox.test.tsx index 7540481d510..f824409ef9d 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/AboutModalBox.test.tsx +++ b/packages/react-core/src/components/AboutModal/__tests__/AboutModalBox.test.tsx @@ -3,10 +3,10 @@ import { render } from '@testing-library/react'; import { AboutModalBox } from '../AboutModalBox'; test('AboutModalBox Test', () => { - const view = render( + const { asFragment } = render( This is a AboutModalBox ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxBrand.test.tsx b/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxBrand.test.tsx index d10dc66425a..a764474aaab 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxBrand.test.tsx +++ b/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxBrand.test.tsx @@ -3,6 +3,6 @@ import { render } from '@testing-library/react'; import { AboutModalBoxBrand } from '../AboutModalBoxBrand'; test('test About Modal Brand', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxCloseButton.test.tsx b/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxCloseButton.test.tsx index 7f6a82c010b..817b526a15b 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxCloseButton.test.tsx +++ b/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxCloseButton.test.tsx @@ -3,18 +3,18 @@ import { render } from '@testing-library/react'; import { AboutModalBoxCloseButton } from '../AboutModalBoxCloseButton'; test('AboutModalBoxCloseButton Test', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('AboutModalBoxCloseButton Test onclose', () => { const onClose = jest.fn(); - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('AboutModalBoxCloseButton Test close button aria label', () => { const closeButtonAriaLabel = 'Klose Daylok'; - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxContent.test.tsx b/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxContent.test.tsx index cf163527829..62bf982fae7 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxContent.test.tsx +++ b/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxContent.test.tsx @@ -3,10 +3,10 @@ import { render } from '@testing-library/react'; import { AboutModalBoxContent } from '../AboutModalBoxContent'; test('AboutModalBoxContent Test', () => { - const view = render( + const { asFragment } = render( This is a AboutModalBoxContent ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxHeader.test.tsx b/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxHeader.test.tsx index 042b66aa2af..5e12a89f70f 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxHeader.test.tsx +++ b/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxHeader.test.tsx @@ -3,10 +3,10 @@ import { render } from '@testing-library/react'; import { AboutModalBoxHeader } from '../AboutModalBoxHeader'; test('AboutModalBoxHeader Test', () => { - const view = render( + const { asFragment } = render( This is a AboutModalBox header ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxHero.test.tsx b/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxHero.test.tsx index 4fe38a7970e..deab24d340d 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxHero.test.tsx +++ b/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxHero.test.tsx @@ -3,6 +3,6 @@ import { render } from '@testing-library/react'; import { AboutModalBoxHero } from '../AboutModalBoxHero'; test('test About Modal Box SHero', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/AboutModal/__tests__/AboutModalContainer.test.tsx b/packages/react-core/src/components/AboutModal/__tests__/AboutModalContainer.test.tsx index 984ed9b1db2..a45993c9f69 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/AboutModalContainer.test.tsx +++ b/packages/react-core/src/components/AboutModal/__tests__/AboutModalContainer.test.tsx @@ -10,27 +10,29 @@ const props = { brandImageAlt: 'Brand Image', backgroundImageSrc: 'backgroundImageSrc...', 'aria-labelledby': 'ariaLablledbyId', - 'aria-describedby': 'ariaDescribedById' + 'aria-describedby': 'ariaDescribedById', + aboutModalBoxHeaderId: 'header-id', + aboutModalBoxContentId: 'content-id' }; test('About Modal Container Test simple', () => { - const view = render(This is ModalBox content); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(This is ModalBox content); + expect(asFragment()).toMatchSnapshot(); }); test('About Modal Container Test isOpen', () => { - const view = render( + const { asFragment } = render( This is ModalBox content ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('About Modal Container Test with onlose', () => { - const view = render( + const { asFragment } = render( undefined} {...props}> This is ModalBox content ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBox.test.tsx.snap b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBox.test.tsx.snap index 1b25f1fea3e..19df35aa60b 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBox.test.tsx.snap +++ b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBox.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AboutModalBox Test 1`] = ` -
+
This is a AboutModalBox
-
+ `; diff --git a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxBrand.test.tsx.snap b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxBrand.test.tsx.snap index 2ad630971bf..4cdb1989a81 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxBrand.test.tsx.snap +++ b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxBrand.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`test About Modal Brand 1`] = ` -
+
@@ -11,5 +11,5 @@ exports[`test About Modal Brand 1`] = ` src="testimage.." />
-
+ `; diff --git a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap index df8a6b40ea6..5d9ec226908 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap +++ b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AboutModalBoxCloseButton Test 1`] = ` -
+
@@ -29,11 +29,11 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
-
+ `; exports[`AboutModalBoxCloseButton Test close button aria label 1`] = ` -
+
@@ -61,11 +61,11 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
-
+ `; exports[`AboutModalBoxCloseButton Test onclose 1`] = ` -
+
@@ -93,5 +93,5 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
-
+ `; diff --git a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxContent.test.tsx.snap b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxContent.test.tsx.snap index 185ba240824..913bbd382b8 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxContent.test.tsx.snap +++ b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxContent.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AboutModalBoxContent Test 1`] = ` -
+
-
+ `; diff --git a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHeader.test.tsx.snap b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHeader.test.tsx.snap index 32348ed7e29..c3703b6f6ed 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHeader.test.tsx.snap +++ b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHeader.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AboutModalBoxHeader Test 1`] = ` -
+
@@ -15,5 +15,5 @@ exports[`AboutModalBoxHeader Test 1`] = ` Product Name
-
+ `; diff --git a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHero.test.tsx.snap b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHero.test.tsx.snap index 790bb5cd1c3..0a304021eed 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHero.test.tsx.snap +++ b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHero.test.tsx.snap @@ -1,10 +1,10 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`test About Modal Box SHero 1`] = ` -
+
-
+ `; diff --git a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalContainer.test.tsx.snap b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalContainer.test.tsx.snap index 632cfcc6e6d..484ebe2a411 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalContainer.test.tsx.snap +++ b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalContainer.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`About Modal Container Test isOpen 1`] = ` -
+
@@ -9,6 +9,8 @@ exports[`About Modal Container Test isOpen 1`] = ` class="pf-l-bullseye" > -
+ `; -exports[`About Modal Container Test simple 1`] = `
`; +exports[`About Modal Container Test simple 1`] = ``; -exports[`About Modal Container Test with onlose 1`] = `
`; +exports[`About Modal Container Test with onlose 1`] = ``; diff --git a/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx b/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx index 9c151100671..0416efdf08e 100644 --- a/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx +++ b/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; -import '@testing-library/jest-dom'; import { Accordion } from '../Accordion'; import { AccordionToggle } from '../AccordionToggle'; @@ -11,12 +10,12 @@ import { AccordionExpandedContentBody } from '../AccordionExpandedContentBody'; describe('Accordion', () => { test('Accordion default', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('Accordion with non-default headingLevel', () => { - const view = render( + const { asFragment } = render( Item One @@ -24,7 +23,7 @@ describe('Accordion', () => { ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('It should pass optional aria props', () => { @@ -35,9 +34,9 @@ describe('Accordion', () => { ); const button = screen.getByRole('button'); - expect(button.getAttribute('aria-label')).toEqual('Toggle details for'); - expect(button.getAttribute('aria-labelledby')).toEqual('ex-toggle2 ex-item2'); - expect(button.getAttribute('aria-expanded')).toEqual('false'); + expect(button).toHaveAttribute('aria-label', 'Toggle details for'); + expect(button).toHaveAttribute('aria-labelledby', 'ex-toggle2 ex-item2'); + expect(button).toHaveAttribute('aria-expanded', 'false'); }); test('Toggle expanded', () => { @@ -48,14 +47,14 @@ describe('Accordion', () => { ); const button = screen.getByRole('button'); - expect(button.getAttribute('aria-expanded')).toEqual('true'); - expect(button.className).toContain('pf-m-expanded'); + expect(button).toHaveAttribute('aria-expanded', 'true'); + expect(button).toHaveClass('pf-m-expanded'); }); test('renders content with custom Toggle and Content containers', () => { const container = 'a'; - const view = render( + const { asFragment } = render( @@ -71,7 +70,7 @@ describe('Accordion', () => { }); test('Accordion bordered', () => { - const view = render( + const { asFragment } = render( Item One @@ -79,11 +78,11 @@ describe('Accordion', () => { ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('Accordion display large', () => { - const view = render( + const { asFragment } = render( Item One @@ -91,11 +90,11 @@ describe('Accordion', () => { ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('Accordion custom content', () => { - const view = render( + const { asFragment } = render( Item One @@ -106,6 +105,6 @@ describe('Accordion', () => { ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionContent.test.tsx b/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionContent.test.tsx index a35f15e76e0..e89d520984c 100644 --- a/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionContent.test.tsx +++ b/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionContent.test.tsx @@ -8,7 +8,7 @@ import { AccordionContent } from '../../AccordionContent'; import {} from '../..'; it('AccordionContent should match snapshot (auto-generated)', () => { - const view = render( + const { asFragment } = render( ReactNode} className={"''"} @@ -19,5 +19,5 @@ it('AccordionContent should match snapshot (auto-generated)', () => { component={() =>
} /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionItem.test.tsx b/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionItem.test.tsx index 9e370c32c73..ba6e6f5b939 100644 --- a/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionItem.test.tsx +++ b/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionItem.test.tsx @@ -8,6 +8,6 @@ import { AccordionItem } from '../../AccordionItem'; import {} from '../..'; it('AccordionItem should match snapshot (auto-generated)', () => { - const view = render(ReactNode} />); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(ReactNode} />); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionToggle.test.tsx b/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionToggle.test.tsx index dea3730d1de..ee320cdd12b 100644 --- a/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionToggle.test.tsx +++ b/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionToggle.test.tsx @@ -8,7 +8,7 @@ import { AccordionToggle } from '../../AccordionToggle'; import {} from '../..'; it('AccordionToggle should match snapshot (auto-generated)', () => { - const view = render( + const { asFragment } = render( ReactNode} className={"''"} @@ -17,5 +17,5 @@ it('AccordionToggle should match snapshot (auto-generated)', () => { component={() =>
} /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionContent.test.tsx.snap b/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionContent.test.tsx.snap index 7891a9ee4e1..37bfce90533 100644 --- a/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionContent.test.tsx.snap +++ b/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionContent.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AccordionContent should match snapshot (auto-generated) 1`] = ` -
+
-
+ `; diff --git a/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionItem.test.tsx.snap b/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionItem.test.tsx.snap index 1affeb4e2e1..6731e404674 100644 --- a/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionItem.test.tsx.snap +++ b/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionItem.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AccordionItem should match snapshot (auto-generated) 1`] = ` -
+ ReactNode -
+ `; diff --git a/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionToggle.test.tsx.snap b/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionToggle.test.tsx.snap index 68b3a392903..53562f03e49 100644 --- a/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionToggle.test.tsx.snap +++ b/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionToggle.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AccordionToggle should match snapshot (auto-generated) 1`] = ` -
+
-
+ `; diff --git a/packages/react-core/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap b/packages/react-core/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap index b20d7847778..4e4121ce518 100644 --- a/packages/react-core/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap +++ b/packages/react-core/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Accordion Accordion bordered 1`] = ` -
+
-
+ `; exports[`Accordion Accordion custom content 1`] = ` -
+
-
+ `; exports[`Accordion Accordion default 1`] = ` -
+
-
+ `; exports[`Accordion Accordion display large 1`] = ` -
+
-
+ `; exports[`Accordion Accordion with non-default headingLevel 1`] = ` -
+
-
+ `; diff --git a/packages/react-core/src/components/ActionList/__tests__/ActionList.test.tsx b/packages/react-core/src/components/ActionList/__tests__/ActionList.test.tsx index a531f44d10e..ae5da51e036 100644 --- a/packages/react-core/src/components/ActionList/__tests__/ActionList.test.tsx +++ b/packages/react-core/src/components/ActionList/__tests__/ActionList.test.tsx @@ -4,11 +4,11 @@ import { ActionList } from '../ActionList'; describe('action list', () => { test('renders successfully', () => { - const view = render(test); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(test); + expect(asFragment()).toMatchSnapshot(); }); test('isIconList flag adds modifier', () => { - const view = render(test); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(test); + expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/react-core/src/components/ActionList/__tests__/ActionListGroup.test.tsx b/packages/react-core/src/components/ActionList/__tests__/ActionListGroup.test.tsx index 8744d36ecd1..4f1f2ddd74b 100644 --- a/packages/react-core/src/components/ActionList/__tests__/ActionListGroup.test.tsx +++ b/packages/react-core/src/components/ActionList/__tests__/ActionListGroup.test.tsx @@ -4,7 +4,7 @@ import { ActionListGroup } from '../ActionListGroup'; describe('action list group', () => { test('renders successfully', () => { - const view = render(test); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(test); + expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/react-core/src/components/ActionList/__tests__/ActionListItem.test.tsx b/packages/react-core/src/components/ActionList/__tests__/ActionListItem.test.tsx index 7d84d727eb7..7be807a1ecb 100644 --- a/packages/react-core/src/components/ActionList/__tests__/ActionListItem.test.tsx +++ b/packages/react-core/src/components/ActionList/__tests__/ActionListItem.test.tsx @@ -4,7 +4,7 @@ import { ActionListItem } from '../ActionListItem'; describe('action list item', () => { test('renders successfully', () => { - const view = render(test); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(test); + expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/react-core/src/components/ActionList/__tests__/__snapshots__/ActionList.test.tsx.snap b/packages/react-core/src/components/ActionList/__tests__/__snapshots__/ActionList.test.tsx.snap index c24a4e5c800..d010d4a0f0b 100644 --- a/packages/react-core/src/components/ActionList/__tests__/__snapshots__/ActionList.test.tsx.snap +++ b/packages/react-core/src/components/ActionList/__tests__/__snapshots__/ActionList.test.tsx.snap @@ -1,21 +1,21 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`action list isIconList flag adds modifier 1`] = ` -
+
test
-
+ `; exports[`action list renders successfully 1`] = ` -
+
test
-
+ `; diff --git a/packages/react-core/src/components/ActionList/__tests__/__snapshots__/ActionListGroup.test.tsx.snap b/packages/react-core/src/components/ActionList/__tests__/__snapshots__/ActionListGroup.test.tsx.snap index 40020482ddc..c1cc0d63d80 100644 --- a/packages/react-core/src/components/ActionList/__tests__/__snapshots__/ActionListGroup.test.tsx.snap +++ b/packages/react-core/src/components/ActionList/__tests__/__snapshots__/ActionListGroup.test.tsx.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`action list group renders successfully 1`] = ` -
+
test
-
+ `; diff --git a/packages/react-core/src/components/ActionList/__tests__/__snapshots__/ActionListItem.test.tsx.snap b/packages/react-core/src/components/ActionList/__tests__/__snapshots__/ActionListItem.test.tsx.snap index f2b20743a09..8999e1b84a4 100644 --- a/packages/react-core/src/components/ActionList/__tests__/__snapshots__/ActionListItem.test.tsx.snap +++ b/packages/react-core/src/components/ActionList/__tests__/__snapshots__/ActionListItem.test.tsx.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`action list item renders successfully 1`] = ` -
+
test
-
+ `; diff --git a/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx b/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx index a982f2fb497..006095e89b0 100644 --- a/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx +++ b/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; + import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; @@ -10,45 +11,45 @@ import { UsersIcon } from '@patternfly/react-icons'; describe('Alert', () => { test('default Alert variant is default', () => { render(Alert testing); - expect(screen.getByText('this is a test').className).toContain('pf-c-alert'); + expect(screen.getByText('this is a test')).toHaveClass('pf-c-alert__title'); }); Object.values(AlertVariant).forEach(variant => { describe(`Alert - ${variant}`, () => { test('Description', () => { - const view = render( + const { asFragment } = render( Some alert ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('Title', () => { - const view = render( + const { asFragment } = render( Some alert ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('Heading level', () => { - const view = render( + const { asFragment } = render( Some alert ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('Action Link', () => { - const view = render( + const { asFragment } = render( test]} title=""> Some alert ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('Action Close Button', () => { @@ -69,7 +70,7 @@ describe('Alert', () => { }); test('Action and Title', () => { - const view = render( + const { asFragment } = render( test]} @@ -78,11 +79,11 @@ describe('Alert', () => { Some alert ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('Custom aria label', () => { - const view = render( + const { asFragment } = render( { Some alert ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('inline variation', () => { - const view = render( + const { asFragment } = render( Some alert ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('expandable variation', () => { - const view = render( + const { asFragment } = render(

Success alert description. This should tell the user more information about the alert.

 ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('expandable variation description hidden', () => { @@ -126,12 +127,12 @@ describe('Alert', () => { }); test('Toast alerts match snapsnot', () => { - const view = render( + const { asFragment } = render( Some toast alert ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('Toast alerts contain default live region', () => { @@ -143,7 +144,7 @@ describe('Alert', () => { ); - expect(screen.getByLabelText(ariaLabel).getAttribute('aria-live')).toEqual('polite'); + expect(screen.getByLabelText(ariaLabel)).toHaveAttribute('aria-live', 'polite'); }); test('Toast alert live regions are not atomic', () => { @@ -155,7 +156,7 @@ describe('Alert', () => { ); - expect(screen.getByLabelText(ariaLabel).getAttribute('aria-atomic')).toEqual('false'); + expect(screen.getByLabelText(ariaLabel)).toHaveAttribute('aria-atomic', 'false'); }); test('Non-toast alerts can have custom live region settings', () => { @@ -175,13 +176,13 @@ describe('Alert', () => { ); const alert = screen.getByLabelText(ariaLabel); - expect(alert.getAttribute('aria-live')).toEqual('assertive'); - expect(alert.getAttribute('aria-relevant')).toEqual('all'); - expect(alert.getAttribute('aria-atomic')).toEqual('true'); + expect(alert).toHaveAttribute('aria-live', 'assertive'); + expect(alert).toHaveAttribute('aria-relevant', 'all'); + expect(alert).toHaveAttribute('aria-atomic', 'true'); }); test('Custom icon', () => { - const view = render( + const { asFragment } = render( } variant={variant} @@ -191,7 +192,7 @@ describe('Alert', () => { Some noisy alert ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); }); }); @@ -203,6 +204,6 @@ describe('Alert', () => { ); - expect(screen.getByText('this is a test').className).toContain('pf-m-truncate'); + expect(screen.getByText('this is a test')).toHaveClass('pf-m-truncate'); }); }); diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionCloseButton.test.tsx b/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionCloseButton.test.tsx index e02b22c56ce..5bbd710608a 100644 --- a/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionCloseButton.test.tsx +++ b/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionCloseButton.test.tsx @@ -7,7 +7,7 @@ import { AlertContext } from '../../AlertContext'; describe('AlertActionCloseButton', () => { it('should match snapshot', () => { - const view = render( + const { asFragment } = render( { /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionLink.test.tsx b/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionLink.test.tsx index 861c033b6ff..21600743628 100644 --- a/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionLink.test.tsx +++ b/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionLink.test.tsx @@ -8,6 +8,6 @@ import { AlertActionLink } from '../../AlertActionLink'; import {} from '../..'; it('AlertActionLink should match snapshot (auto-generated)', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/AlertIcon.test.tsx b/packages/react-core/src/components/Alert/__tests__/Generated/AlertIcon.test.tsx index 606eed7f023..fd0fb6005b3 100644 --- a/packages/react-core/src/components/Alert/__tests__/Generated/AlertIcon.test.tsx +++ b/packages/react-core/src/components/Alert/__tests__/Generated/AlertIcon.test.tsx @@ -8,6 +8,6 @@ import { AlertIcon } from '../../AlertIcon'; import {} from '../..'; it('AlertIcon should match snapshot (auto-generated)', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap index cc0841b3d4d..d3038015afb 100644 --- a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AlertActionCloseButton should match snapshot 1`] = ` -
+ -
+ `; diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap index 5d1275789fe..3182c7b493e 100644 --- a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AlertActionLink should match snapshot (auto-generated) 1`] = ` -
+ -
+ `; diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertIcon.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertIcon.test.tsx.snap index c29860e3421..ceca9c159b0 100644 --- a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertIcon.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertIcon.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AlertIcon should match snapshot (auto-generated) 1`] = ` -
+
@@ -19,5 +19,5 @@ exports[`AlertIcon should match snapshot (auto-generated) 1`] = ` />
-
+ `; diff --git a/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap index 4f2118a687b..6d3f59a100e 100644 --- a/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Alert Alert - danger Action Link 1`] = ` -
+
Danger alert: -
-
+ `; exports[`Alert Alert - danger Action and Title 1`] = ` -
+
-
+ `; exports[`Alert Alert - danger Custom aria label 1`] = ` -
+
-
+ `; exports[`Alert Alert - danger Custom icon 1`] = ` -
+
-
+ `; exports[`Alert Alert - danger Description 1`] = ` -
+
Danger alert: -
-
+ `; exports[`Alert Alert - danger Heading level 1`] = ` -
+
-
+ `; exports[`Alert Alert - danger Title 1`] = ` -
+
-
+ `; exports[`Alert Alert - danger Toast alerts match snapsnot 1`] = ` -
+
-
+ `; exports[`Alert Alert - danger expandable variation 1`] = ` -
+
-
+ `; exports[`Alert Alert - danger inline variation 1`] = ` -
+
-
+ `; exports[`Alert Alert - default Action Link 1`] = ` -
+
Default alert: -
-
+ `; exports[`Alert Alert - default Action and Title 1`] = ` -
+
-
+ `; exports[`Alert Alert - default Custom aria label 1`] = ` -
+
-
+ `; exports[`Alert Alert - default Custom icon 1`] = ` -
+
-
+ `; exports[`Alert Alert - default Description 1`] = ` -
+
Default alert: -
-
+ `; exports[`Alert Alert - default Heading level 1`] = ` -
+
-
+ `; exports[`Alert Alert - default Title 1`] = ` -
+
-
+ `; exports[`Alert Alert - default Toast alerts match snapsnot 1`] = ` -
+
-
+ `; exports[`Alert Alert - default expandable variation 1`] = ` -
+
-
+ `; exports[`Alert Alert - default inline variation 1`] = ` -
+
-
+ `; exports[`Alert Alert - info Action Link 1`] = ` -
+
Info alert: -
-
+ `; exports[`Alert Alert - info Action and Title 1`] = ` -
+
-
+ `; exports[`Alert Alert - info Custom aria label 1`] = ` -
+
-
+ `; exports[`Alert Alert - info Custom icon 1`] = ` -
+
-
+ `; exports[`Alert Alert - info Description 1`] = ` -
+
Info alert: -
-
+ `; exports[`Alert Alert - info Heading level 1`] = ` -
+
-
+ `; exports[`Alert Alert - info Title 1`] = ` -
+
-
+ `; exports[`Alert Alert - info Toast alerts match snapsnot 1`] = ` -
+
-
+ `; exports[`Alert Alert - info expandable variation 1`] = ` -
+
-
+ `; exports[`Alert Alert - info inline variation 1`] = ` -
+
-
+ `; exports[`Alert Alert - success Action Link 1`] = ` -
+
Success alert: -
-
+ `; exports[`Alert Alert - success Action and Title 1`] = ` -
+
-
+ `; exports[`Alert Alert - success Custom aria label 1`] = ` -
+
-
+ `; exports[`Alert Alert - success Custom icon 1`] = ` -
+
-
+ `; exports[`Alert Alert - success Description 1`] = ` -
+
Success alert: -
-
+ `; exports[`Alert Alert - success Heading level 1`] = ` -
+
-
+ `; exports[`Alert Alert - success Title 1`] = ` -
+
-
+ `; exports[`Alert Alert - success Toast alerts match snapsnot 1`] = ` -
+
-
+ `; exports[`Alert Alert - success expandable variation 1`] = ` -
+
-
+ `; exports[`Alert Alert - success inline variation 1`] = ` -
+
-
+ `; exports[`Alert Alert - warning Action Link 1`] = ` -
+
Warning alert: -
-
+ `; exports[`Alert Alert - warning Action and Title 1`] = ` -
+
-
+ `; exports[`Alert Alert - warning Custom aria label 1`] = ` -
+
-
+ `; exports[`Alert Alert - warning Custom icon 1`] = ` -
+
-
+ `; exports[`Alert Alert - warning Description 1`] = ` -
+
Warning alert: -
-
+ `; exports[`Alert Alert - warning Heading level 1`] = ` -
+
-
+ `; exports[`Alert Alert - warning Title 1`] = ` -
+
-
+ `; exports[`Alert Alert - warning Toast alerts match snapsnot 1`] = ` -
+
-
+ `; exports[`Alert Alert - warning expandable variation 1`] = ` -
+
-
+ `; exports[`Alert Alert - warning inline variation 1`] = ` -
+
-
+ `; diff --git a/packages/react-core/src/components/AlertGroup/__tests__/AlertGroup.test.tsx b/packages/react-core/src/components/AlertGroup/__tests__/AlertGroup.test.tsx index fcf8fd70895..d34d82d8381 100644 --- a/packages/react-core/src/components/AlertGroup/__tests__/AlertGroup.test.tsx +++ b/packages/react-core/src/components/AlertGroup/__tests__/AlertGroup.test.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import '@testing-library/jest-dom'; import { Alert } from '../../Alert'; import { AlertGroup } from '../../AlertGroup'; @@ -10,18 +9,18 @@ import { AlertActionCloseButton } from '../../../components/Alert/AlertActionClo describe('AlertGroup', () => { test('Alert Group renders without children', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('Alert Group works with n children', () => { - const view = render( + const { asFragment } = render( ); - expect(view).toBeTruthy(); + expect(asFragment()).toBeTruthy(); }); test('Alert group overflow shows up', () => { @@ -40,7 +39,7 @@ describe('AlertGroup', () => { expect(overflowButton).toBeInTheDocument(); userEvent.click(overflowButton); - expect(onOverflowClick).toBeCalled(); + expect(onOverflowClick).toHaveBeenCalled(); }); test('Standard Alert Group is not a toast alert group', () => { @@ -77,6 +76,6 @@ describe('AlertGroup', () => { ); userEvent.click(screen.getByLabelText('Close')); - expect(onClose).toBeCalled(); + expect(onClose).toHaveBeenCalled(); }); }); diff --git a/packages/react-core/src/components/AlertGroup/__tests__/Generated/AlertGroup.test.tsx b/packages/react-core/src/components/AlertGroup/__tests__/Generated/AlertGroup.test.tsx index 343a29efe32..b88c41d42bf 100644 --- a/packages/react-core/src/components/AlertGroup/__tests__/Generated/AlertGroup.test.tsx +++ b/packages/react-core/src/components/AlertGroup/__tests__/Generated/AlertGroup.test.tsx @@ -8,8 +8,8 @@ import { AlertGroup } from '../../AlertGroup'; import {} from '../..'; it('AlertGroup should match snapshot (auto-generated)', () => { - const view = render( + const { asFragment } = render( ReactNode
} isToast={true} appendTo={undefined} /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/AlertGroup/__tests__/Generated/AlertGroupInline.test.tsx b/packages/react-core/src/components/AlertGroup/__tests__/Generated/AlertGroupInline.test.tsx index e52e2776498..4cdec220359 100644 --- a/packages/react-core/src/components/AlertGroup/__tests__/Generated/AlertGroupInline.test.tsx +++ b/packages/react-core/src/components/AlertGroup/__tests__/Generated/AlertGroupInline.test.tsx @@ -8,6 +8,6 @@ import { AlertGroupInline } from '../../AlertGroupInline'; import {} from '../..'; it('AlertGroupInline should match snapshot (auto-generated)', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/AlertGroup/__tests__/Generated/__snapshots__/AlertGroup.test.tsx.snap b/packages/react-core/src/components/AlertGroup/__tests__/Generated/__snapshots__/AlertGroup.test.tsx.snap index b46feaf5cc5..c704bee01bc 100644 --- a/packages/react-core/src/components/AlertGroup/__tests__/Generated/__snapshots__/AlertGroup.test.tsx.snap +++ b/packages/react-core/src/components/AlertGroup/__tests__/Generated/__snapshots__/AlertGroup.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`AlertGroup should match snapshot (auto-generated) 1`] = `
`; +exports[`AlertGroup should match snapshot (auto-generated) 1`] = ``; diff --git a/packages/react-core/src/components/AlertGroup/__tests__/Generated/__snapshots__/AlertGroupInline.test.tsx.snap b/packages/react-core/src/components/AlertGroup/__tests__/Generated/__snapshots__/AlertGroupInline.test.tsx.snap index cfa118d32f4..cfc521424a7 100644 --- a/packages/react-core/src/components/AlertGroup/__tests__/Generated/__snapshots__/AlertGroupInline.test.tsx.snap +++ b/packages/react-core/src/components/AlertGroup/__tests__/Generated/__snapshots__/AlertGroupInline.test.tsx.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AlertGroupInline should match snapshot (auto-generated) 1`] = ` -
+
    -
+ `; diff --git a/packages/react-core/src/components/AlertGroup/__tests__/__snapshots__/AlertGroup.test.tsx.snap b/packages/react-core/src/components/AlertGroup/__tests__/__snapshots__/AlertGroup.test.tsx.snap index 26368230b48..ecd04b19c1c 100644 --- a/packages/react-core/src/components/AlertGroup/__tests__/__snapshots__/AlertGroup.test.tsx.snap +++ b/packages/react-core/src/components/AlertGroup/__tests__/__snapshots__/AlertGroup.test.tsx.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AlertGroup Alert Group renders without children 1`] = ` -
+
    -
+ `; diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/ApplicationLauncher.test.tsx b/packages/react-core/src/components/ApplicationLauncher/__tests__/ApplicationLauncher.test.tsx index b5a94993cc7..49eac289b72 100644 --- a/packages/react-core/src/components/ApplicationLauncher/__tests__/ApplicationLauncher.test.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/ApplicationLauncher.test.tsx @@ -27,40 +27,36 @@ const dropdownItems = [ describe('ApplicationLauncher', () => { test('regular', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('right aligned', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('dropup', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('dropup + right aligned', () => { - const view = render( - + const { asFragment } = render( + ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('expanded', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('custom icon', () => { - const view = render( + const { asFragment } = render( } /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherContent.test.tsx b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherContent.test.tsx index 43b7534fc24..4d76648527c 100644 --- a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherContent.test.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherContent.test.tsx @@ -8,6 +8,6 @@ import { ApplicationLauncherContent } from '../../ApplicationLauncherContent'; import {} from '../..'; it('ApplicationLauncherContent should match snapshot (auto-generated)', () => { - const view = render(ReactNode
} />); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(ReactNode
} />); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherGroup.test.tsx b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherGroup.test.tsx index 80094ea727c..d84f9c59175 100644 --- a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherGroup.test.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherGroup.test.tsx @@ -8,6 +8,6 @@ import { ApplicationLauncherGroup } from '../../ApplicationLauncherGroup'; import {} from '../..'; it('ApplicationLauncherGroup should match snapshot (auto-generated)', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherIcon.test.tsx b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherIcon.test.tsx index 9b6474dd322..3a4b6a72b8f 100644 --- a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherIcon.test.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherIcon.test.tsx @@ -8,6 +8,6 @@ import { ApplicationLauncherIcon } from '../../ApplicationLauncherIcon'; import {} from '../..'; it('ApplicationLauncherIcon should match snapshot (auto-generated)', () => { - const view = render(ReactNode} className={"''"} />); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(ReactNode} className={"''"} />); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx index 02971bcbc9c..fbba4de4795 100644 --- a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx @@ -6,11 +6,11 @@ import { DropdownArrowContext } from '../../../Dropdown/dropdownConstants'; describe('ApplicationLauncherSeparator', () => { it('should match snapshot', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherText.test.tsx b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherText.test.tsx index 7f38890f9a6..4208c3b4e63 100644 --- a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherText.test.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherText.test.tsx @@ -8,6 +8,6 @@ import { ApplicationLauncherText } from '../../ApplicationLauncherText'; import {} from '../..'; it('ApplicationLauncherText should match snapshot (auto-generated)', () => { - const view = render(ReactNode} className={"''"} />); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(ReactNode} className={"''"} />); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherContent.test.tsx.snap b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherContent.test.tsx.snap index 2fc0d996162..eaaeceb4bb3 100644 --- a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherContent.test.tsx.snap +++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherContent.test.tsx.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ApplicationLauncherContent should match snapshot (auto-generated) 1`] = ` -
+
ReactNode
-
+ `; diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherGroup.test.tsx.snap b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherGroup.test.tsx.snap index 7de502c5ecd..cac805c9416 100644 --- a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherGroup.test.tsx.snap +++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherGroup.test.tsx.snap @@ -1,14 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ApplicationLauncherGroup should match snapshot (auto-generated) 1`] = ` -
+
-
-
+ `; diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherIcon.test.tsx.snap b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherIcon.test.tsx.snap index ed9ab5746b3..46112bf757d 100644 --- a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherIcon.test.tsx.snap +++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherIcon.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ApplicationLauncherIcon should match snapshot (auto-generated) 1`] = ` -
+ @@ -9,5 +9,5 @@ exports[`ApplicationLauncherIcon should match snapshot (auto-generated) 1`] = ` ReactNode
- + `; diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherSeparator.test.tsx.snap b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherSeparator.test.tsx.snap index fa9744a96ac..d69c576a95e 100644 --- a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherSeparator.test.tsx.snap +++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherSeparator.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ApplicationLauncherSeparator should match snapshot 1`] = ` -
+
  • @@ -10,5 +10,5 @@ exports[`ApplicationLauncherSeparator should match snapshot 1`] = ` role="separator" />
    • -
    + `; diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherText.test.tsx.snap b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherText.test.tsx.snap index 69d202d634f..ab032302c3c 100644 --- a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherText.test.tsx.snap +++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherText.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ApplicationLauncherText should match snapshot (auto-generated) 1`] = ` -
    + @@ -9,5 +9,5 @@ exports[`ApplicationLauncherText should match snapshot (auto-generated) 1`] = ` ReactNode
    - + `; diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap b/packages/react-core/src/components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap index 2e3d115d837..ed8e5f70afe 100644 --- a/packages/react-core/src/components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap +++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ApplicationLauncher custom icon 1`] = ` -
    + -
    + `; exports[`ApplicationLauncher dropup + right aligned 1`] = ` -
    + -
    + `; exports[`ApplicationLauncher dropup 1`] = ` -
    + -
    + `; exports[`ApplicationLauncher expanded 1`] = ` -
    + -
    + `; exports[`ApplicationLauncher regular 1`] = ` -
    + -
    + `; exports[`ApplicationLauncher right aligned 1`] = ` -
    + -
    + `; diff --git a/packages/react-core/src/components/Avatar/__tests__/Avatar.test.tsx b/packages/react-core/src/components/Avatar/__tests__/Avatar.test.tsx index 2084d601b38..179f7d61085 100644 --- a/packages/react-core/src/components/Avatar/__tests__/Avatar.test.tsx +++ b/packages/react-core/src/components/Avatar/__tests__/Avatar.test.tsx @@ -3,6 +3,6 @@ import { render } from '@testing-library/react'; import { Avatar } from '../Avatar'; test('simple avatar', () => { - const view: any = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/packages/react-core/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap index fcb59a50915..6ac2a939af3 100644 --- a/packages/react-core/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap +++ b/packages/react-core/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`simple avatar 1`] = ` -
    + avatar -
    + `; diff --git a/packages/react-core/src/components/BackToTop/__tests__/BackToTop.test.tsx b/packages/react-core/src/components/BackToTop/__tests__/BackToTop.test.tsx index ae900b39a62..68703145014 100644 --- a/packages/react-core/src/components/BackToTop/__tests__/BackToTop.test.tsx +++ b/packages/react-core/src/components/BackToTop/__tests__/BackToTop.test.tsx @@ -4,19 +4,19 @@ import { BackToTop } from '../BackToTop'; describe('BackToTop', () => { test('verify basic', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('verify custom class', () => { - const view = render(test); + const { asFragment } = render(test); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('verify always show', () => { - const view = render(test); + const { asFragment } = render(test); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); -}); \ No newline at end of file +}); diff --git a/packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap b/packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap index 8e75151e503..396367f61a4 100644 --- a/packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap +++ b/packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`BackToTop verify always show 1`] = ` -
    +
    @@ -33,11 +33,11 @@ exports[`BackToTop verify always show 1`] = `
    -
    + `; exports[`BackToTop verify basic 1`] = ` -
    +
    @@ -69,11 +69,11 @@ exports[`BackToTop verify basic 1`] = `
    -
    + `; exports[`BackToTop verify custom class 1`] = ` -
    +
    @@ -105,5 +105,5 @@ exports[`BackToTop verify custom class 1`] = `
    -
    + `; diff --git a/packages/react-core/src/components/Backdrop/__tests__/Backdrop.test.tsx b/packages/react-core/src/components/Backdrop/__tests__/Backdrop.test.tsx index 02d81d85356..3307faacceb 100644 --- a/packages/react-core/src/components/Backdrop/__tests__/Backdrop.test.tsx +++ b/packages/react-core/src/components/Backdrop/__tests__/Backdrop.test.tsx @@ -3,6 +3,6 @@ import { render } from '@testing-library/react'; import { Backdrop } from '../Backdrop'; test('Backdrop Test', () => { - const view = render(Backdrop); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(Backdrop); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/Backdrop/__tests__/__snapshots__/Backdrop.test.tsx.snap b/packages/react-core/src/components/Backdrop/__tests__/__snapshots__/Backdrop.test.tsx.snap index 545a3c9ded5..c341a6f53f4 100644 --- a/packages/react-core/src/components/Backdrop/__tests__/__snapshots__/Backdrop.test.tsx.snap +++ b/packages/react-core/src/components/Backdrop/__tests__/__snapshots__/Backdrop.test.tsx.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Backdrop Test 1`] = ` -
    +
    Backdrop
    -
    + `; diff --git a/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx b/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx index 3d922f91c68..e8ab030a4ea 100644 --- a/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx +++ b/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx @@ -3,19 +3,19 @@ import * as React from 'react'; import { render } from '@testing-library/react'; const images = { - 'lg': '/assets/images/pfbg_1200.jpg', - 'sm': '/assets/images/pfbg_768.jpg', - 'sm2x': '/assets/images/pfbg_768@2x.jpg', - 'xs': '/assets/images/pfbg_576.jpg', - 'xs2x': '/assets/images/pfbg_576@2x.jpg' + lg: '/assets/images/pfbg_1200.jpg', + sm: '/assets/images/pfbg_768.jpg', + sm2x: '/assets/images/pfbg_768@2x.jpg', + xs: '/assets/images/pfbg_576.jpg', + xs2x: '/assets/images/pfbg_576@2x.jpg' }; test('BackgroundImage', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('allows passing in a single string as the image src', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/BackgroundImage/__tests__/__snapshots__/BackgroundImage.test.tsx.snap b/packages/react-core/src/components/BackgroundImage/__tests__/__snapshots__/BackgroundImage.test.tsx.snap index fe0cb3bcae9..6d2c7cf1122 100644 --- a/packages/react-core/src/components/BackgroundImage/__tests__/__snapshots__/BackgroundImage.test.tsx.snap +++ b/packages/react-core/src/components/BackgroundImage/__tests__/__snapshots__/BackgroundImage.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`BackgroundImage 1`] = ` -
    +
    -
    + `; exports[`allows passing in a single string as the image src 1`] = ` -
    +
    -
    + `; diff --git a/packages/react-core/src/components/Badge/__tests__/Badge.test.tsx b/packages/react-core/src/components/Badge/__tests__/Badge.test.tsx index d41ddeff3b8..492bc03ec83 100644 --- a/packages/react-core/src/components/Badge/__tests__/Badge.test.tsx +++ b/packages/react-core/src/components/Badge/__tests__/Badge.test.tsx @@ -4,7 +4,7 @@ import { render } from '@testing-library/react'; Object.values([true, false]).forEach(isRead => { test(`${isRead} Badge`, () => { - const view = render({isRead ? 'read' : 'unread'} Badge); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render({isRead ? 'read' : 'unread'} Badge); + expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/react-core/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap b/packages/react-core/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap index 126e5157eb8..69ff36ba72e 100644 --- a/packages/react-core/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap +++ b/packages/react-core/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap @@ -1,23 +1,21 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`false Badge 1`] = ` -
    + - unread - Badge + unread Badge -
    + `; exports[`true Badge 1`] = ` -
    + - read - Badge + read Badge -
    + `; diff --git a/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx b/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx index 182cef9728e..3378df00675 100644 --- a/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx +++ b/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx @@ -2,24 +2,22 @@ import { Banner } from '../Banner'; import React from 'react'; import { render } from '@testing-library/react'; -['default', 'info', 'success', 'warning', 'danger'].forEach( - (variant: 'default' | 'info' | 'success' | 'warning' | 'danger') => { - test(`${variant} banner`, () => { - const view = render( - - {variant} Banner - - ); - expect(view.container).toMatchSnapshot(); - }); - } -); +['default', 'info', 'success', 'warning', 'danger'].forEach((variant: string) => { + test(`${variant} banner`, () => { + const { asFragment } = render( + + {variant} Banner + + ); + expect(asFragment()).toMatchSnapshot(); + }); +}); test(`sticky banner`, () => { - const view = render( + const { asFragment } = render( Sticky Banner ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/Banner/__tests__/__snapshots__/Banner.test.tsx.snap b/packages/react-core/src/components/Banner/__tests__/__snapshots__/Banner.test.tsx.snap index 366a8041ad2..902f1fca6ad 100644 --- a/packages/react-core/src/components/Banner/__tests__/__snapshots__/Banner.test.tsx.snap +++ b/packages/react-core/src/components/Banner/__tests__/__snapshots__/Banner.test.tsx.snap @@ -1,72 +1,67 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`danger banner 1`] = ` -
    +
    - danger - Banner + danger Banner
    -
    + `; exports[`default banner 1`] = ` -
    +
    - default - Banner + default Banner
    -
    + `; exports[`info banner 1`] = ` -
    +
    - info - Banner + info Banner
    -
    + `; exports[`sticky banner 1`] = ` -
    +
    Sticky Banner
    -
    + `; exports[`success banner 1`] = ` -
    +
    - success - Banner + success Banner
    -
    + `; exports[`warning banner 1`] = ` -
    +
    - warning - Banner + warning Banner
    -
    + `; diff --git a/packages/react-core/src/components/Brand/__tests__/Brand.test.tsx b/packages/react-core/src/components/Brand/__tests__/Brand.test.tsx index 48a2fb30a79..102e8510429 100644 --- a/packages/react-core/src/components/Brand/__tests__/Brand.test.tsx +++ b/packages/react-core/src/components/Brand/__tests__/Brand.test.tsx @@ -5,12 +5,13 @@ import '@testing-library/jest-dom'; describe('Brand', () => { test('simple brand', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); + test('passing children creates picture brand', () => { - const view = render( - + render( +
    test
     ); diff --git a/packages/react-core/src/components/Brand/__tests__/__snapshots__/Brand.test.tsx.snap b/packages/react-core/src/components/Brand/__tests__/__snapshots__/Brand.test.tsx.snap index 36f357fe594..5adddc3b108 100644 --- a/packages/react-core/src/components/Brand/__tests__/__snapshots__/Brand.test.tsx.snap +++ b/packages/react-core/src/components/Brand/__tests__/__snapshots__/Brand.test.tsx.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Brand simple brand 1`] = ` -
    + brand -
    + `; diff --git a/packages/react-core/src/components/Breadcrumb/__tests__/Breadcrumb.test.tsx b/packages/react-core/src/components/Breadcrumb/__tests__/Breadcrumb.test.tsx index 13b88ab727f..bc793f7313f 100644 --- a/packages/react-core/src/components/Breadcrumb/__tests__/Breadcrumb.test.tsx +++ b/packages/react-core/src/components/Breadcrumb/__tests__/Breadcrumb.test.tsx @@ -5,26 +5,26 @@ import { render } from '@testing-library/react'; describe('Breadcrumb component', () => { test('should render default breadcrumb', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('should render breadcrumb with className', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('should render breadcrumb with aria-label', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('should render breadcrumb with children', () => { - const view = render( + const { asFragment } = render( Item 1 Item 1 ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/react-core/src/components/Breadcrumb/__tests__/BreadcrumbHeading.test.tsx b/packages/react-core/src/components/Breadcrumb/__tests__/BreadcrumbHeading.test.tsx index 25c4e4aab55..a1c1f89c778 100644 --- a/packages/react-core/src/components/Breadcrumb/__tests__/BreadcrumbHeading.test.tsx +++ b/packages/react-core/src/components/Breadcrumb/__tests__/BreadcrumbHeading.test.tsx @@ -4,31 +4,31 @@ import { render } from '@testing-library/react'; describe('BreadcrumbHeading component', () => { test('should render default breadcrumbHeading', () => { - const view = render(Item); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(Item); + expect(asFragment()).toMatchSnapshot(); }); test('should pass classname', () => { - const view = render(Item); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(Item); + expect(asFragment()).toMatchSnapshot(); }); test('should pass custom id', () => { - const view = render(Item); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(Item); + expect(asFragment()).toMatchSnapshot(); }); test('should render link breadcrumbTitle', () => { - const view = render(Item); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(Item); + expect(asFragment()).toMatchSnapshot(); }); test('should render breadcrumbHeading with target', () => { - const view = render( + const { asFragment } = render( Item ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/react-core/src/components/Breadcrumb/__tests__/BreadcrumbItem.test.tsx b/packages/react-core/src/components/Breadcrumb/__tests__/BreadcrumbItem.test.tsx index 9721ed242a1..d333bfda427 100644 --- a/packages/react-core/src/components/Breadcrumb/__tests__/BreadcrumbItem.test.tsx +++ b/packages/react-core/src/components/Breadcrumb/__tests__/BreadcrumbItem.test.tsx @@ -4,51 +4,49 @@ import { render } from '@testing-library/react'; describe('BreadcrumbItem component', () => { test('should render default breadcrumbItem', () => { - const view = render(Item); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(Item); + expect(asFragment()).toMatchSnapshot(); }); test('should render breadcrumbItem with className', () => { - const view = render(Item); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(Item); + expect(asFragment()).toMatchSnapshot(); }); test('should render breadcrumbItem with id', () => { - const view = render(Item); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(Item); + expect(asFragment()).toMatchSnapshot(); }); test('should render active breadcrumbItem', () => { - const view = render(Item); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(Item); + expect(asFragment()).toMatchSnapshot(); }); test('should render link breadcrumbItem', () => { - const view = render(Item); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(Item); + expect(asFragment()).toMatchSnapshot(); }); test('should render breadcrumbItem with target', () => { - const view = render(Item); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(Item); + expect(asFragment()).toMatchSnapshot(); }); test('should render breadcrumbItem with custom element', () => { - const view = render( + const { asFragment } = render(

    Header

     ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('should render breadcrumbItem with component', () => { const MyComponent = () =>
    My component contents
    ; const consoleError = jest.spyOn(console, 'error').mockImplementation(); - const view = render( - Stuff - ); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(Stuff); + expect(asFragment()).toMatchSnapshot(); expect(consoleError).not.toHaveBeenCalled(); }); }); diff --git a/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap b/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap index e0b7c8682c5..0a30b033145 100644 --- a/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap +++ b/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Breadcrumb component should render breadcrumb with aria-label 1`] = ` -
    + -
    + `; exports[`Breadcrumb component should render breadcrumb with children 1`] = ` -
    + -
    + `; exports[`Breadcrumb component should render breadcrumb with className 1`] = ` -
    + -
    + `; exports[`Breadcrumb component should render default breadcrumb 1`] = ` -
    + -
    + `; diff --git a/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/BreadcrumbHeading.test.tsx.snap b/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/BreadcrumbHeading.test.tsx.snap index eeb48c1317c..f441c0c16a5 100644 --- a/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/BreadcrumbHeading.test.tsx.snap +++ b/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/BreadcrumbHeading.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`BreadcrumbHeading component should pass classname 1`] = ` -
    +
  • @@ -11,11 +11,11 @@ exports[`BreadcrumbHeading component should pass classname 1`] = ` Item
    • -
    + `; exports[`BreadcrumbHeading component should pass custom id 1`] = ` -
    +
    • -
    + `; exports[`BreadcrumbHeading component should render breadcrumbHeading with target 1`] = ` -
    +
  • @@ -47,11 +47,11 @@ exports[`BreadcrumbHeading component should render breadcrumbHeading with target
    • -
    + `; exports[`BreadcrumbHeading component should render default breadcrumbHeading 1`] = ` -
    +
  • @@ -61,11 +61,11 @@ exports[`BreadcrumbHeading component should render default breadcrumbHeading 1`] Item
    • -
    + `; exports[`BreadcrumbHeading component should render link breadcrumbTitle 1`] = ` -
    +
  • @@ -81,5 +81,5 @@ exports[`BreadcrumbHeading component should render link breadcrumbTitle 1`] = `
    • -
    + `; diff --git a/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/BreadcrumbItem.test.tsx.snap b/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/BreadcrumbItem.test.tsx.snap index ddcfdc28697..9bc113a9dba 100644 --- a/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/BreadcrumbItem.test.tsx.snap +++ b/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/BreadcrumbItem.test.tsx.snap @@ -1,37 +1,37 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`BreadcrumbItem component should render active breadcrumbItem 1`] = ` -
    +
  • Item
    • -
    + `; exports[`BreadcrumbItem component should render breadcrumbItem with className 1`] = ` -
    +
  • Item
    • -
    + `; exports[`BreadcrumbItem component should render breadcrumbItem with component 1`] = ` -
    +
  • Stuff
    • -
    + `; exports[`BreadcrumbItem component should render breadcrumbItem with custom element 1`] = ` -
    +
  • @@ -39,42 +39,42 @@ exports[`BreadcrumbItem component should render breadcrumbItem with custom eleme Header
    • -
    + `; exports[`BreadcrumbItem component should render breadcrumbItem with id 1`] = ` -
    +
  • Item
    • -
    + `; exports[`BreadcrumbItem component should render breadcrumbItem with target 1`] = ` -
    +
  • Item
    • -
    + `; exports[`BreadcrumbItem component should render default breadcrumbItem 1`] = ` -
    +
  • Item
    • -
    + `; exports[`BreadcrumbItem component should render link breadcrumbItem 1`] = ` -
    +
  • @@ -85,5 +85,5 @@ exports[`BreadcrumbItem component should render link breadcrumbItem 1`] = ` Item
    • -
    + `; diff --git a/packages/react-core/src/components/Button/__tests__/Button.test.tsx b/packages/react-core/src/components/Button/__tests__/Button.test.tsx index 26fcfb993de..b8d19a3472e 100644 --- a/packages/react-core/src/components/Button/__tests__/Button.test.tsx +++ b/packages/react-core/src/components/Button/__tests__/Button.test.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; -import '@testing-library/jest-dom'; import CartArrowDownIcon from '@patternfly/react-icons/dist/esm/icons/cart-arrow-down-icon'; import { Button, ButtonVariant } from '../Button'; @@ -9,12 +8,12 @@ import { Button, ButtonVariant } from '../Button'; describe('Button', () => { Object.values(ButtonVariant).forEach(variant => { test(`${variant} button`, () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); }); @@ -26,82 +25,82 @@ describe('Button', () => { }); test('link with icon', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('isBlock', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('isDisabled', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('isDanger secondary', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('isDanger link', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('isAriaDisabled button', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('isAriaDisabled link button', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('isInline', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('isSmall', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('isLarge', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('isLoading', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('allows passing in a string as the component', () => { @@ -119,23 +118,23 @@ describe('Button', () => { }); test('aria-disabled is set to true and tabIndex to -1 if component is not a button and is disabled', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('setting tab index through props', () => { render(); - expect(screen.getByRole('button').getAttribute('tabindex')).toEqual('0'); + expect(screen.getByRole('button')).toHaveAttribute('tabindex', '0'); }); test('isLoading icon only', () => { - const view = render( + const { asFragment } = render( - + `; exports[`Button danger button 1`] = ` -
    + -
    + `; exports[`Button isAriaDisabled button 1`] = ` -
    + -
    + `; exports[`Button isAriaDisabled link button 1`] = ` - + `; exports[`Button isBlock 1`] = ` -
    + -
    + `; exports[`Button isDanger link 1`] = ` -
    + -
    + `; exports[`Button isDanger secondary 1`] = ` -
    + -
    + `; exports[`Button isDisabled 1`] = ` -
    + -
    + `; exports[`Button isInline 1`] = ` -
    + -
    + `; exports[`Button isLarge 1`] = ` -
    + -
    + `; exports[`Button isLoading 1`] = ` -
    + -
    + `; exports[`Button isLoading icon only 1`] = ` -
    + -
    + `; exports[`Button isSmall 1`] = ` -
    + -
    + `; exports[`Button link button 1`] = ` -
    + -
    + `; exports[`Button link with icon 1`] = ` -
    + -
    + `; exports[`Button plain button 1`] = ` -
    + -
    + `; exports[`Button primary button 1`] = ` -
    + -
    + `; exports[`Button secondary button 1`] = ` -
    + -
    + `; exports[`Button tertiary button 1`] = ` -
    + -
    + `; exports[`Button warning button 1`] = ` -
    + -
    + `; diff --git a/packages/react-core/src/components/Card/__tests__/Card.test.tsx b/packages/react-core/src/components/Card/__tests__/Card.test.tsx index bd9cdcd9160..225dfa200c0 100644 --- a/packages/react-core/src/components/Card/__tests__/Card.test.tsx +++ b/packages/react-core/src/components/Card/__tests__/Card.test.tsx @@ -1,19 +1,16 @@ import React from 'react'; - import { render, screen } from '@testing-library/react'; -import '@testing-library/jest-dom'; - import { Card } from '../Card'; describe('Card', () => { test('renders with PatternFly Core styles', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('className is added to the root element', () => { render(); - expect(screen.getByRole('article').className).toContain('extra-class'); + expect(screen.getByRole('article')).toHaveClass('extra-class'); }); test('extra props are spread to the root element', () => { @@ -38,80 +35,80 @@ describe('Card', () => { }); test('card with isHoverable applied ', () => { - render(); - expect(screen.getByRole('article').outerHTML).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('card with isCompact applied ', () => { - render(); - expect(screen.getByRole('article').outerHTML).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('card with isSelectable applied ', () => { render(); const card = screen.getByRole('article'); - expect(card.className).toContain('selectable'); - expect(card.getAttribute('tabindex')).toEqual('0'); + expect(card).toHaveClass('pf-m-selectable'); + expect(card).toHaveAttribute('tabindex', '0'); }); test('card with isSelectable and isSelected applied ', () => { render(); const card = screen.getByRole('article'); - expect(card.className).toContain('selectable'); - expect(card.className).toContain('selected'); - expect(card.getAttribute('tabindex')).toEqual('0'); + expect(card).toHaveClass('pf-m-selectable'); + expect(card).toHaveClass('pf-m-selected'); + expect(card).toHaveAttribute('tabindex', '0'); }); test('card with only isSelected applied - not change', () => { render(); const card = screen.getByRole('article'); - expect(card.className).not.toContain('selected'); + expect(card).not.toHaveClass('pf-m-selected'); expect(card.getAttribute('tabindex')).toBeNull(); }); test('card with isDisabledRaised applied', () => { render(); - expect(screen.getByRole('article').className).toContain('non-selectable-raised'); + expect(screen.getByRole('article')).toHaveClass('pf-m-non-selectable-raised'); }); test('card with isSelectableRaised applied - not change', () => { render(); const card = screen.getByRole('article'); - expect(card.className).toContain('selectable-raised'); - expect(card.getAttribute('tabindex')).toEqual('0'); + expect(card).toHaveClass('pf-m-selectable-raised'); + expect(card).toHaveAttribute('tabindex', '0'); }); test('card with isSelectableRaised and isSelected applied ', () => { render(); const card = screen.getByRole('article'); - expect(card.className).toContain('selectable-raised'); - expect(card.className).toContain('selected-raised'); - expect(card.getAttribute('tabindex')).toEqual('0'); + expect(card).toHaveClass('pf-m-selectable-raised'); + expect(card).toHaveClass('pf-m-selected-raised'); + expect(card).toHaveAttribute('tabindex', '0'); }); test('card with isFlat applied', () => { render(); - expect(screen.getByRole('article').className).toContain('m-flat'); + expect(screen.getByRole('article')).toHaveClass('pf-m-flat'); }); test('card with isExpanded applied', () => { render(); - expect(screen.getByRole('article').className).toContain('m-expanded'); + expect(screen.getByRole('article')).toHaveClass('pf-m-expanded'); }); test('card with isRounded applied', () => { render(); - expect(screen.getByRole('article').className).toContain('m-rounded'); + expect(screen.getByRole('article')).toHaveClass('pf-m-rounded'); }); test('card with isLarge applied', () => { render(); - expect(screen.getByRole('article').className).toContain('m-display-lg'); + expect(screen.getByRole('article')).toHaveClass('pf-m-display-lg'); }); test('card warns when isLarge and isCompact', () => { @@ -119,6 +116,6 @@ describe('Card', () => { global.console = { warn: consoleWarnMock } as any; render(); - expect(consoleWarnMock).toBeCalled(); + expect(consoleWarnMock).toHaveBeenCalled(); }); }); diff --git a/packages/react-core/src/components/Card/__tests__/CardBody.test.tsx b/packages/react-core/src/components/Card/__tests__/CardBody.test.tsx index ce5dca84388..b4f77d82415 100644 --- a/packages/react-core/src/components/Card/__tests__/CardBody.test.tsx +++ b/packages/react-core/src/components/Card/__tests__/CardBody.test.tsx @@ -1,19 +1,16 @@ import React from 'react'; - import { render, screen } from '@testing-library/react'; -import '@testing-library/jest-dom'; - import { CardBody } from '../CardBody'; describe('CardBody', () => { test('renders with PatternFly Core styles', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('className is added to the root element', () => { render(); - expect(screen.getByTestId('test-id').className).toContain('extra-class'); + expect(screen.getByTestId('test-id')).toHaveClass('extra-class'); }); test('extra props are spread to the root element', () => { @@ -38,7 +35,7 @@ describe('CardBody', () => { }); test('body with no-fill applied', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/react-core/src/components/Card/__tests__/CardExpandableContent.test.tsx b/packages/react-core/src/components/Card/__tests__/CardExpandableContent.test.tsx index 76dddfd1462..72316947730 100644 --- a/packages/react-core/src/components/Card/__tests__/CardExpandableContent.test.tsx +++ b/packages/react-core/src/components/Card/__tests__/CardExpandableContent.test.tsx @@ -4,10 +4,10 @@ import { CardExpandableContent } from '../CardExpandableContent'; import { render } from '@testing-library/react'; test('renders successfully', () => { - const view = render( + const { asFragment } = render( ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/Card/__tests__/CardFooter.test.tsx b/packages/react-core/src/components/Card/__tests__/CardFooter.test.tsx index bfa2e55eb66..c48d145920c 100644 --- a/packages/react-core/src/components/Card/__tests__/CardFooter.test.tsx +++ b/packages/react-core/src/components/Card/__tests__/CardFooter.test.tsx @@ -1,19 +1,16 @@ import React from 'react'; - import { render, screen } from '@testing-library/react'; -import '@testing-library/jest-dom'; - import { CardFooter } from '../CardFooter'; describe('CardFooter', () => { test('renders with PatternFly Core styles', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('className is added to the root element', () => { render(text); - expect(screen.getByText('text').className).toContain('extra-class'); + expect(screen.getByText('text')).toHaveClass('extra-class'); }); test('extra props are spread to the root element', () => { diff --git a/packages/react-core/src/components/Card/__tests__/CardHeadMain.test.tsx b/packages/react-core/src/components/Card/__tests__/CardHeadMain.test.tsx index f2b88eb577f..d7eb72e0e4d 100644 --- a/packages/react-core/src/components/Card/__tests__/CardHeadMain.test.tsx +++ b/packages/react-core/src/components/Card/__tests__/CardHeadMain.test.tsx @@ -1,19 +1,16 @@ import React from 'react'; - import { render, screen } from '@testing-library/react'; -import '@testing-library/jest-dom'; - import { CardHeadMain } from '../CardHeadMain'; describe('CardHeadMain', () => { test('renders with PatternFly Core styles', () => { - render(text); - expect(screen.getByText('text').outerHTML).toMatchSnapshot(); + const { asFragment } = render(text); + expect(asFragment()).toMatchSnapshot(); }); test('className is added to the root element', () => { render(text); - expect(screen.getByText('text').className).toContain('extra-class'); + expect(screen.getByText('text')).toHaveClass('extra-class'); }); test('extra props are spread to the root element', () => { diff --git a/packages/react-core/src/components/Card/__tests__/CardHeader.test.tsx b/packages/react-core/src/components/Card/__tests__/CardHeader.test.tsx index 58611997e63..07e4718991e 100644 --- a/packages/react-core/src/components/Card/__tests__/CardHeader.test.tsx +++ b/packages/react-core/src/components/Card/__tests__/CardHeader.test.tsx @@ -4,7 +4,7 @@ import { CardHeader } from '../CardHeader'; describe('CardHeader', () => { test('onExpand adds the toggle button', () => { - const view = render(); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/react-core/src/components/Card/__tests__/CardHeaderMain.test.tsx b/packages/react-core/src/components/Card/__tests__/CardHeaderMain.test.tsx index 54b9c9827dc..e72ed722d70 100644 --- a/packages/react-core/src/components/Card/__tests__/CardHeaderMain.test.tsx +++ b/packages/react-core/src/components/Card/__tests__/CardHeaderMain.test.tsx @@ -1,19 +1,16 @@ import React from 'react'; - import { render, screen } from '@testing-library/react'; -import '@testing-library/jest-dom'; - import { CardHeaderMain } from '../CardHeaderMain'; describe('CardHeaderMain', () => { test('renders with PatternFly Core styles', () => { - render(text); - expect(screen.getByText('text').outerHTML).toMatchSnapshot(); + const { asFragment } = render(text); + expect(asFragment()).toMatchSnapshot(); }); test('className is added to the root element', () => { render(text); - expect(screen.getByText('text').className).toContain('extra-class'); + expect(screen.getByText('text')).toHaveClass('extra-class'); }); test('extra props are spread to the root element', () => { diff --git a/packages/react-core/src/components/Card/__tests__/CardTitle.test.tsx b/packages/react-core/src/components/Card/__tests__/CardTitle.test.tsx index b2863bc4add..0aa55985b51 100644 --- a/packages/react-core/src/components/Card/__tests__/CardTitle.test.tsx +++ b/packages/react-core/src/components/Card/__tests__/CardTitle.test.tsx @@ -1,19 +1,16 @@ import React from 'react'; - import { render, screen } from '@testing-library/react'; -import '@testing-library/jest-dom'; - import { CardTitle } from '../CardTitle'; describe('CardTitle', () => { test('renders with PatternFly Core styles', () => { - render(text); - expect(screen.getByText('text').outerHTML).toMatchSnapshot(); + const { asFragment } = render(text); + expect(asFragment()).toMatchSnapshot(); }); test('className is added to the root element', () => { render(text); - expect(screen.getByText('text').className).toContain('extra-class'); + expect(screen.getByText('text')).toHaveClass('extra-class'); }); test('extra props are spread to the root element', () => { diff --git a/packages/react-core/src/components/Card/__tests__/Generated/CardActions.test.tsx b/packages/react-core/src/components/Card/__tests__/Generated/CardActions.test.tsx index 5ac751885c1..9bd416885cc 100644 --- a/packages/react-core/src/components/Card/__tests__/Generated/CardActions.test.tsx +++ b/packages/react-core/src/components/Card/__tests__/Generated/CardActions.test.tsx @@ -8,6 +8,6 @@ import { CardActions } from '../../CardActions'; import {} from '../..'; it('CardActions should match snapshot (auto-generated)', () => { - const view = render(ReactNode} className={"''"} />); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(ReactNode} className={"''"} />); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/Card/__tests__/Generated/__snapshots__/CardActions.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/Generated/__snapshots__/CardActions.test.tsx.snap index b34dba7fb48..dbd8435d2bd 100644 --- a/packages/react-core/src/components/Card/__tests__/Generated/__snapshots__/CardActions.test.tsx.snap +++ b/packages/react-core/src/components/Card/__tests__/Generated/__snapshots__/CardActions.test.tsx.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CardActions should match snapshot (auto-generated) 1`] = ` -
    +
    ReactNode
    -
    + `; diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap index d5e41218635..d59d89794ef 100644 --- a/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap +++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap @@ -1,11 +1,31 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Card card with isCompact applied 1`] = `"
    "`; +exports[`Card card with isCompact applied 1`] = ` + +
    + +`; -exports[`Card card with isHoverable applied 1`] = `"
    "`; +exports[`Card card with isHoverable applied 1`] = ` + +
    + +`; exports[`Card renders with PatternFly Core styles 1`] = ` -
    +
    -
    + `; diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardBody.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardBody.test.tsx.snap index 73132ee7e70..b6897f3a0f9 100644 --- a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardBody.test.tsx.snap +++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardBody.test.tsx.snap @@ -1,17 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CardBody body with no-fill applied 1`] = ` -
    +
    -
    +     `; exports[`CardBody renders with PatternFly Core styles 1`] = ` -
    +
    -
    +     `; diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardExpandableContent.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardExpandableContent.test.tsx.snap index 6e8487ae131..6a60aea4a22 100644 --- a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardExpandableContent.test.tsx.snap +++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardExpandableContent.test.tsx.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders successfully 1`] = ` -
    +
    -
    +     `; diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardFooter.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardFooter.test.tsx.snap index 10e0d44fd4f..5e21ed73fec 100644 --- a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardFooter.test.tsx.snap +++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardFooter.test.tsx.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CardFooter renders with PatternFly Core styles 1`] = ` -
    +
    -
    +     `; diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeadMain.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeadMain.test.tsx.snap index afb02d353ec..3acaedade34 100644 --- a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeadMain.test.tsx.snap +++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeadMain.test.tsx.snap @@ -1,3 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`CardHeadMain renders with PatternFly Core styles 1`] = `"
    text
    "`; +exports[`CardHeadMain renders with PatternFly Core styles 1`] = ` + +
    + text +
    +     +`; diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap index 031316680c3..5902b426d50 100644 --- a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap +++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CardHeader onExpand adds the toggle button 1`] = ` -
    +
    @@ -36,5 +36,5 @@ exports[`CardHeader onExpand adds the toggle button 1`] = `
    -
    + `; diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeaderMain.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeaderMain.test.tsx.snap index 7a621767d63..bcef3e52266 100644 --- a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeaderMain.test.tsx.snap +++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeaderMain.test.tsx.snap @@ -1,3 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`CardHeaderMain renders with PatternFly Core styles 1`] = `"
    text
    "`; +exports[`CardHeaderMain renders with PatternFly Core styles 1`] = ` + +
    + text +
    +     +`; diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardTitle.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardTitle.test.tsx.snap index ba526d9978a..e96b0ae62e9 100644 --- a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardTitle.test.tsx.snap +++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardTitle.test.tsx.snap @@ -1,3 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`CardTitle renders with PatternFly Core styles 1`] = `"
    text
    "`; +exports[`CardTitle renders with PatternFly Core styles 1`] = ` + +
    + text +
    +     +`; diff --git a/packages/react-core/src/components/Checkbox/__tests__/Checkbox.test.tsx b/packages/react-core/src/components/Checkbox/__tests__/Checkbox.test.tsx index bbc629c0b38..53173639882 100644 --- a/packages/react-core/src/components/Checkbox/__tests__/Checkbox.test.tsx +++ b/packages/react-core/src/components/Checkbox/__tests__/Checkbox.test.tsx @@ -2,55 +2,58 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import '@testing-library/jest-dom'; import { Checkbox } from '../Checkbox'; describe('Checkbox', () => { test('controlled', () => { - render(); - expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('controlled - 3rd state', () => { - render(); - expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('uncontrolled', () => { - render(); - expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('isDisabled', () => { - render(); - expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('label is string', () => { - render(); - expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('label is function', () => { const functionLabel = () =>

    Header

    ; - render(); - expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); test('label is node', () => { - render(Header} id="check" isChecked aria-label="check" />); - expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot(); + const { asFragment } = render(Header} id="check" isChecked aria-label="check" />); + expect(asFragment()).toMatchSnapshot(); }); test('passing class', () => { - render(); - expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot(); + const { asFragment } = render( + + ); + expect(asFragment()).toMatchSnapshot(); }); test('passing HTML attribute', () => { - render(); - expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot(); + const { asFragment } = render( + + ); + expect(asFragment()).toMatchSnapshot(); }); test('passing description', () => { @@ -69,7 +72,7 @@ describe('Checkbox', () => { render(); userEvent.click(screen.getByLabelText('check')); - expect(onChangeHandler).toBeCalled(); + expect(onChangeHandler).toHaveBeenCalled(); }); test('should throw console error when no id is given', () => { @@ -77,6 +80,6 @@ describe('Checkbox', () => { global.console = { ...global.console, error: myMock }; render(); - expect(myMock).toBeCalled(); + expect(myMock).toHaveBeenCalled(); }); }); diff --git a/packages/react-core/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap b/packages/react-core/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap index 2a5e42bf9d6..09381cd080d 100644 --- a/packages/react-core/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap +++ b/packages/react-core/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap @@ -1,19 +1,214 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Checkbox controlled - 3rd state 1`] = `""`; +exports[`Checkbox controlled - 3rd state 1`] = ` + +
    + +
    +     +`; -exports[`Checkbox controlled 1`] = `""`; +exports[`Checkbox controlled 1`] = ` + +
    + +
    +     +`; -exports[`Checkbox isDisabled 1`] = `""`; +exports[`Checkbox isDisabled 1`] = ` + +
    + +
    +     +`; -exports[`Checkbox label is function 1`] = `""`; +exports[`Checkbox label is function 1`] = ` + +
    + + +
    +     +`; -exports[`Checkbox label is node 1`] = `""`; +exports[`Checkbox label is node 1`] = ` + +
    + + +
    +     +`; -exports[`Checkbox label is string 1`] = `""`; +exports[`Checkbox label is string 1`] = ` + +
    + + +
    +     +`; -exports[`Checkbox passing HTML attribute 1`] = `""`; +exports[`Checkbox passing HTML attribute 1`] = ` + +
    + + +
    +     +`; -exports[`Checkbox passing class 1`] = `""`; +exports[`Checkbox passing class 1`] = ` + +
    + + +
    +     +`; -exports[`Checkbox uncontrolled 1`] = `""`; +exports[`Checkbox uncontrolled 1`] = ` + +
    + +
    +     +`; diff --git a/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx b/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx index 10ae9a7180b..3dde3dfcf56 100644 --- a/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx +++ b/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx @@ -2,42 +2,40 @@ import React from 'react'; import { render } from '@testing-library/react'; import { Chip } from '../Chip'; - describe('Chip', () => { test('overflow', () => { - const view = render( + const { asFragment } = render( 4 more ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('closable', () => { - const view = render( + const { asFragment } = render( Chip ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('closable with tooltip', () => { - const view = render( + const { asFragment } = render( 1234567890123456789 ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('readonly', () => { - const view = render( + const { asFragment } = render( 4 more ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); }); - diff --git a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap index 50d661bbb03..c7ea2051481 100644 --- a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap +++ b/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Chip closable 1`] = ` -
    +
    -
    + `; exports[`Chip closable with tooltip 1`] = ` -
    +
    -
    + `; exports[`Chip overflow 1`] = ` -
    +
    -
    + `; exports[`Chip readonly 1`] = ` -
    +
    -
    + `; diff --git a/packages/react-core/src/components/ChipGroup/__tests__/ChipGroup.test.tsx b/packages/react-core/src/components/ChipGroup/__tests__/ChipGroup.test.tsx index 9bda475a842..8c69c75e61d 100644 --- a/packages/react-core/src/components/ChipGroup/__tests__/ChipGroup.test.tsx +++ b/packages/react-core/src/components/ChipGroup/__tests__/ChipGroup.test.tsx @@ -2,38 +2,37 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import '@testing-library/jest-dom'; import { ChipGroup } from '../index'; import { Chip } from '../../Chip'; describe('ChipGroup', () => { test('chip group default', () => { - const view = render( + const { asFragment } = render( 1.1 ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('chip group with category', () => { - const view = render( + const { asFragment } = render( 1.1 ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('chip group with closable category', () => { - const view = render( + const { asFragment } = render( 1.1 ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('chip group expanded', () => { @@ -59,11 +58,11 @@ describe('ChipGroup', () => { }); test('chip group with category and tooltip', () => { - const view = render( + const { asFragment } = render( 1.1 ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap b/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap index 8b3e48f0038..6cbf8fe1ed6 100644 --- a/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap +++ b/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChipGroup chip group default 1`] = ` -
    +
    -
    -
    + `; exports[`ChipGroup chip group with category 1`] = ` -
    +
    -
    + `; exports[`ChipGroup chip group with category and tooltip 1`] = ` -
    +
    -
    + `; exports[`ChipGroup chip group with closable category 1`] = ` -
    +
    - + `; diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyButton.test.tsx b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyButton.test.tsx index cd848b09279..805d57c0d85 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyButton.test.tsx +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyButton.test.tsx @@ -1,8 +1,9 @@ import React from 'react'; + import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; + import { ClipboardCopyButton } from '../ClipboardCopyButton'; -import { Button } from '../../Button'; const props = { id: 'my-id', @@ -17,8 +18,8 @@ const props = { }; test('copy button render', () => { - const view = render(Copy Me); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(Copy Me); + expect(asFragment()).toMatchSnapshot(); }); test('copy button onClick', () => { @@ -30,5 +31,5 @@ test('copy button onClick', () => { ); userEvent.click(screen.getByRole('button')); - expect(onclick).toBeCalled(); + expect(onclick).toHaveBeenCalled(); }); diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyExpanded.test.tsx b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyExpanded.test.tsx index c563a1e247a..0a9c8b32174 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyExpanded.test.tsx +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyExpanded.test.tsx @@ -8,16 +8,16 @@ const props = { }; test('expanded content render', () => { - const view = render(This is my text); - expect(view.container).toMatchSnapshot(); + const { asFragment } = render(This is my text); + expect(asFragment()).toMatchSnapshot(); }); test('expanded code content render', () => { - const view = render( + const { asFragment } = render( {`{ "name": "@patternfly/react-core", "version": "1.33.2" }`} ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx index 8c358e0c7bf..d6c1c7494fc 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx @@ -1,6 +1,8 @@ import React from 'react'; + import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; + import { ClipboardCopyToggle, ClipboardCopyToggleProps } from '../ClipboardCopyToggle'; const props: ClipboardCopyToggleProps = { @@ -15,9 +17,9 @@ const props: ClipboardCopyToggleProps = { describe('ClipboardCopyToggle', () => { test('toggle button render', () => { const desc = 'toggle content'; - const view = render(); + const { asFragment } = render(); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('toggle button onClick', () => { @@ -25,20 +27,20 @@ describe('ClipboardCopyToggle', () => { render(); userEvent.click(screen.getByRole('button')); - expect(onclick).toBeCalled(); + expect(onclick).toHaveBeenCalled(); }); test('has aria-expanded set to true when isExpanded is true', () => { render(); const toggleButton = screen.getByRole('button'); - expect(toggleButton.getAttribute('aria-expanded')).toEqual('true'); + expect(toggleButton).toHaveAttribute('aria-expanded', 'true'); }); test('has aria-expanded set to false when isExpanded is false', () => { render(); const toggleButton = screen.getByRole('button'); - expect(toggleButton.getAttribute('aria-expanded')).toEqual('false'); + expect(toggleButton).toHaveAttribute('aria-expanded', 'false'); }); }); diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/ClipboardCopy.test.tsx b/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/ClipboardCopy.test.tsx index fce94b99d24..a8f2e4488fe 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/ClipboardCopy.test.tsx +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/ClipboardCopy.test.tsx @@ -8,7 +8,7 @@ import { ClipboardCopy } from '../../ClipboardCopy'; import {} from '../..'; it('ClipboardCopy should match snapshot (auto-generated)', () => { - const view = render( + const { asFragment } = render( { children={
    ReactNode
    } /> ); - expect(view.container).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap index 14815e61e0e..615784fe2ca 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = ` -
    +
    @@ -46,5 +46,5 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
    - + `; diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap index 1d98b4a72bd..a736ec271d5 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`copy button render 1`] = ` -
    + -
    + `; diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyExpanded.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyExpanded.test.tsx.snap index 12f9d08af3d..6ab8a4d429e 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyExpanded.test.tsx.snap +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyExpanded.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`expanded code content render 1`] = ` -
    +
    -
    + `; exports[`expanded content render 1`] = ` -
    +
    This is my text
    -
    + `; diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap index 65bf8a9b503..684954cb053 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ClipboardCopyToggle toggle button render 1`] = ` -
    + -
    + `; diff --git a/packages/react-core/src/components/CodeBlock/CodeBlockCode.tsx b/packages/react-core/src/components/CodeBlock/CodeBlockCode.tsx index 797969c6418..274b23c6851 100644 --- a/packages/react-core/src/components/CodeBlock/CodeBlockCode.tsx +++ b/packages/react-core/src/components/CodeBlock/CodeBlockCode.tsx @@ -5,14 +5,20 @@ import { css } from '@patternfly/react-styles'; export interface CodeBlockCodeProps extends React.HTMLProps { /** Code rendered inside the code block */ children?: React.ReactNode; + /** Additional classes passed to the code block pre wrapper */ + className?: string; + /** Additional classes passed to the code block code */ + codeClassName?: string; } export const CodeBlockCode: React.FunctionComponent = ({ children = null, + className, + codeClassName, ...props }: CodeBlockCodeProps) => ( - 
    -    {children}
+  
    +    {children}
   
    
 );
 
diff --git a/packages/react-core/src/components/CodeBlock/__tests__/CodeBlock.test.tsx b/packages/react-core/src/components/CodeBlock/__tests__/CodeBlock.test.tsx
index 0f8cb77d51e..d97cc37b55d 100644
--- a/packages/react-core/src/components/CodeBlock/__tests__/CodeBlock.test.tsx
+++ b/packages/react-core/src/components/CodeBlock/__tests__/CodeBlock.test.tsx
@@ -5,26 +5,26 @@ import { CodeBlockAction } from '../CodeBlockAction';
 import { CodeBlockCode } from '../CodeBlockCode';
 
 test('CodeBlock renders successfully', () => {
-  const view = render(test text);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(test text);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('CodeBlockAction renders successfully', () => {
-  const view = render(action);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(action);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('CodeBlockCode renders successfully', () => {
-  const view = render(action);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(action);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('CodeBlock with components renders successfully', () => {
-  const view = render(
+  const { asFragment } = render(
     button}>
       inside pre/code tags
       test outer text
     
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/CodeBlock/__tests__/__snapshots__/CodeBlock.test.tsx.snap b/packages/react-core/src/components/CodeBlock/__tests__/__snapshots__/CodeBlock.test.tsx.snap
index d1b0cea0068..5b52e37d67e 100644
--- a/packages/react-core/src/components/CodeBlock/__tests__/__snapshots__/CodeBlock.test.tsx.snap
+++ b/packages/react-core/src/components/CodeBlock/__tests__/__snapshots__/CodeBlock.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CodeBlock renders successfully 1`] = `
-
    
+
   
    
@@ -18,11 +18,11 @@ exports[`CodeBlock renders successfully 1`] = `
       test text
     
    
   
    
-
+
 `;
 
 exports[`CodeBlock with components renders successfully 1`] = `
-
    
+
   
    
@@ -54,21 +54,21 @@ exports[`CodeBlock with components renders successfully 1`] = `
       test outer text
     
    
   
    
-
+
 `;
 
 exports[`CodeBlockAction renders successfully 1`] = `
-
    
+
   
    
     action
   
    
-
    
+
 `;
 
 exports[`CodeBlockCode renders successfully 1`] = `
-
    
+
   
    @@ -78,5 +78,5 @@ exports[`CodeBlockCode renders successfully 1`] = `
       action
     
   
    
-
    
+
 `;
diff --git a/packages/react-core/src/components/ContextSelector/__tests__/ContextSelector.test.tsx b/packages/react-core/src/components/ContextSelector/__tests__/ContextSelector.test.tsx
index 616a7984146..e5f543fc675 100644
--- a/packages/react-core/src/components/ContextSelector/__tests__/ContextSelector.test.tsx
+++ b/packages/react-core/src/components/ContextSelector/__tests__/ContextSelector.test.tsx
@@ -16,17 +16,13 @@ const items = [
 
 describe('ContextSelector', () => {
   test('Renders ContextSelector', () => {
-    render({items});
-    expect(screen.getByTestId('context-test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render({items});
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Renders ContextSelector open', () => {
-    render(
-      
-        {items}
-      
-    );
-    expect(screen.getByTestId('context-test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render({items});
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Verify onToggle is called ', () => {
diff --git a/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorFooter.test.tsx b/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorFooter.test.tsx
index 6071a1445c6..efd5c22bbc0 100644
--- a/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorFooter.test.tsx
+++ b/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorFooter.test.tsx
@@ -3,6 +3,6 @@ import { render } from '@testing-library/react';
 import { ContextSelectorFooter } from '../ContextSelectorFooter';
 
 test('Renders ContextSelectorFooter', () => {
-  const view = render(testing text);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(testing text);
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorItem.test.tsx b/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorItem.test.tsx
index 5d309c55d80..bc61448d42b 100644
--- a/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorItem.test.tsx
+++ b/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorItem.test.tsx
@@ -1,24 +1,26 @@
 import React from 'react';
+
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+
 import { ContextSelectorItem } from '../ContextSelectorItem';
 
 test('Renders ContextSelectorItem', () => {
-  const view = render(
+  const { asFragment } = render(
     
       My Project
     
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Renders ContextSelectorItem disabled and hovered', () => {
-  const view = render(
+  const { asFragment } = render(
     
       My Project
     
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Verify onClick is called ', () => {
diff --git a/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorMenuList.test.tsx b/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorMenuList.test.tsx
index 52873a86d0c..5cc0a35d95b 100644
--- a/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorMenuList.test.tsx
+++ b/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorMenuList.test.tsx
@@ -12,11 +12,11 @@ const items = [
 ];
 
 test('Renders ContextSelectorMenuList open', () => {
-  const view = render({items});
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render({items});
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Renders ContextSelectorMenuList closed', () => {
-  const view = render({items});
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render({items});
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorToggle.test.tsx b/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorToggle.test.tsx
index 6cb488d498d..1da4b3240ae 100644
--- a/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorToggle.test.tsx
+++ b/packages/react-core/src/components/ContextSelector/__tests__/ContextSelectorToggle.test.tsx
@@ -7,8 +7,8 @@ import { ContextSelectorToggle } from '../ContextSelectorToggle';
 
 describe('ContextSelectorToggle', () => {
   test('Renders ContextSelectorToggle', () => {
-    render();
-    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Verify onToggle is called ', () => {
@@ -17,42 +17,34 @@ describe('ContextSelectorToggle', () => {
     render();
 
     userEvent.click(screen.getByRole('button'));
-    expect(mockfnOnToggle.mock.calls).toHaveLength(1);
+    expect(mockfnOnToggle).toHaveBeenCalledTimes(1);
   });
 
   test('Verify ESC press', () => {
-    render();
+    const { asFragment } = render();
 
-    const toggleButton = screen.getByRole('button');
-
-    userEvent.type(toggleButton, '{esc}');
-    expect(toggleButton.outerHTML).toMatchSnapshot();
+    userEvent.type(screen.getByRole('button'), '{esc}');
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Verify ESC press with not isOpen', () => {
-    render();
-
-    const toggleButton = screen.getByRole('button');
+    const { asFragment } = render();
 
     userEvent.type(screen.getByRole('button'), '{esc}');
-    expect(toggleButton.outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Verify keydown tab ', () => {
-    render();
-
-    const toggleButton = screen.getByRole('button');
+    const { asFragment } = render();
 
     userEvent.type(screen.getByRole('button'), '{tab}');
-    expect(toggleButton.outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Verify keydown enter ', () => {
-    render();
-
-    const toggleButton = screen.getByRole('button');
+    const { asFragment } = render();
 
     userEvent.type(screen.getByRole('button'), '{enter}');
-    expect(toggleButton.outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap b/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap
index 2a413659a45..b85cc8bd188 100644
--- a/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap
+++ b/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap
@@ -1,5 +1,181 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ContextSelector Renders ContextSelector 1`] = `"
    "`;
+exports[`ContextSelector Renders ContextSelector 1`] = `
+
+  
    
+    
+  
    
+    
+`;
 
-exports[`ContextSelector Renders ContextSelector open 1`] = `"
    "`;
+exports[`ContextSelector Renders ContextSelector open 1`] = `
+
+  
    
+    
+    
    
+      
    
+        
    
+          
    
+            
+            
+          
    
+        
    
+        
+      
    
+    
    
+  
    
+    
+`;
diff --git a/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorFooter.test.tsx.snap b/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorFooter.test.tsx.snap
index 6c3be3d8909..9b859fd549a 100644
--- a/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorFooter.test.tsx.snap
+++ b/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorFooter.test.tsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Renders ContextSelectorFooter 1`] = `
-
    
+
   
    
     testing text
   
    
-
    
+
 `;
diff --git a/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorItem.test.tsx.snap b/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorItem.test.tsx.snap
index be21268e7b0..7d9c1ae45a5 100644
--- a/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorItem.test.tsx.snap
+++ b/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorItem.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Renders ContextSelectorItem 1`] = `
-
    
+
   
  • 
@@ -11,11 +11,11 @@ exports[`Renders ContextSelectorItem 1`] = `
       My Project
     
   
    • 
-
    
+
 `;
 
 exports[`Renders ContextSelectorItem disabled and hovered 1`] = `
-
    
+
   
  • 
@@ -26,5 +26,5 @@ exports[`Renders ContextSelectorItem disabled and hovered 1`] = `
       My Project
     
   
    • 
-
    
+
 `;
diff --git a/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorMenuList.test.tsx.snap b/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorMenuList.test.tsx.snap
index 7f9a3fe4e89..ea3c78552b1 100644
--- a/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorMenuList.test.tsx.snap
+++ b/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorMenuList.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Renders ContextSelectorMenuList closed 1`] = `
-
    
+
   
-
    
+
 `;
 
 exports[`Renders ContextSelectorMenuList open 1`] = `
-
    
+
   
-
    
+
 `;
diff --git a/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorToggle.test.tsx.snap b/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorToggle.test.tsx.snap
index 8d9e58ce449..8cc18b2cdf2 100644
--- a/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorToggle.test.tsx.snap
+++ b/packages/react-core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelectorToggle.test.tsx.snap
@@ -1,11 +1,161 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ContextSelectorToggle Renders ContextSelectorToggle 1`] = `""`;
+exports[`ContextSelectorToggle Renders ContextSelectorToggle 1`] = `
+
+  
+
+`;
 
-exports[`ContextSelectorToggle Verify ESC press 1`] = `""`;
+exports[`ContextSelectorToggle Verify ESC press 1`] = `
+
+  
+
+`;
 
-exports[`ContextSelectorToggle Verify ESC press with not isOpen 1`] = `""`;
+exports[`ContextSelectorToggle Verify ESC press with not isOpen 1`] = `
+
+  
+
+`;
 
-exports[`ContextSelectorToggle Verify keydown enter  1`] = `""`;
+exports[`ContextSelectorToggle Verify keydown enter  1`] = `
+
+  
+
+`;
 
-exports[`ContextSelectorToggle Verify keydown tab  1`] = `""`;
+exports[`ContextSelectorToggle Verify keydown tab  1`] = `
+
+  
+
+`;
diff --git a/packages/react-core/src/components/DataList/DataListCheck.tsx b/packages/react-core/src/components/DataList/DataListCheck.tsx
index ee611e23b86..8ed5d92ef46 100644
--- a/packages/react-core/src/components/DataList/DataListCheck.tsx
+++ b/packages/react-core/src/components/DataList/DataListCheck.tsx
@@ -9,14 +9,20 @@ export interface DataListCheckProps extends Omit) => void;
   /** Aria-labelledby of the DataList checkbox */
@@ -33,6 +39,7 @@ export const DataListCheck: React.FunctionComponent = ({
   isDisabled = false,
   isChecked = null,
   checked = null,
+  defaultChecked,
   otherControls = false,
   ...props
 }: DataListCheckProps) => {
@@ -44,8 +51,8 @@ export const DataListCheck: React.FunctionComponent = ({
         onChange={event => onChange(event.currentTarget.checked, event)}
         aria-invalid={!isValid}
         disabled={isDisabled}
-        {...(checked !== null && { defaultChecked: checked })}
-        {...(isChecked !== null && { checked: isChecked })}
+        {...([true, false].includes(defaultChecked) && { defaultChecked })}
+        {...(![true, false].includes(defaultChecked) && { checked: isChecked || checked })}
       />
     
   );
diff --git a/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx
index b7221f18f0b..b01a9b068d6 100644
--- a/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx
+++ b/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx
@@ -15,41 +15,45 @@ import { DropdownItem, Dropdown, KebabToggle, DropdownPosition } from '../../Dro
 
 describe('DataList', () => {
   test('List default', () => {
-    const view = render();
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('List compact', () => {
-    const view = render();
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   describe('DataList variants', () => {
     ['none', 'always', 'sm', 'md', 'lg', 'xl', '2xl'].forEach(oneBreakpoint => {
       test(`Breakpoint - ${oneBreakpoint}`, () => {
-        const view = render();
-        expect(view.container).toMatchSnapshot();
+        const { asFragment } = render(
+          
+        );
+        expect(asFragment()).toMatchSnapshot();
       });
     });
   });
 
   test('List draggable', () => {
-    const view = render();
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('List', () => {
-    const view = render();
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(
+      
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Item default', () => {
-    render(
+    const { asFragment } = render(
       
         test
       
     );
-    expect(screen.getByRole('listitem').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Item expanded', () => {
@@ -58,30 +62,30 @@ describe('DataList', () => {
         test
       
     );
-    expect(screen.getByRole('listitem').className).toBe('pf-c-data-list__item pf-m-expanded');
+    expect(screen.getByRole('listitem')).toHaveClass('pf-c-data-list__item pf-m-expanded');
   });
 
   test('Item', () => {
-    const view = render(
+    const { asFragment } = render(
       
         test
       
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('item row default', () => {
-    const view = render(test);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(test);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Cell default', () => {
-    const view = render(Secondary);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(Secondary);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Cells', () => {
-    const view = render(
+    const { asFragment } = render(
       
@@ -93,7 +97,7 @@ describe('DataList', () => {
         ]}
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Cell with width modifier', () => {
@@ -115,8 +119,8 @@ describe('DataList', () => {
       const dataListCell = screen.getByTestId(testId);
 
       testCase.class === ''
-        ? expect(dataListCell.className).toBe('pf-c-data-list__cell')
-        : expect(dataListCell.className).toBe(`pf-c-data-list__cell ${testCase.class}`);
+        ? expect(dataListCell).toHaveClass('pf-c-data-list__cell')
+        : expect(dataListCell).toHaveClass(`pf-c-data-list__cell ${testCase.class}`);
     });
   });
 
@@ -138,26 +142,26 @@ describe('DataList', () => {
       const dataListCell = screen.getByTestId(testId);
 
       testCase.class === ''
-        ? expect(dataListCell.className).toBe('pf-c-data-list__cell')
-        : expect(dataListCell.className).toBe(`pf-c-data-list__cell ${testCase.class}`);
+        ? expect(dataListCell).toHaveClass('pf-c-data-list__cell')
+        : expect(dataListCell).toHaveClass(`pf-c-data-list__cell ${testCase.class}`);
     });
   });
 
   test('Toggle default with aria label', () => {
     render();
 
-    expect(screen.getByRole('button').getAttribute('aria-labelledby')).toEqual(null);
-    expect(screen.getByRole('button').getAttribute('aria-label')).toEqual('Toggle details for');
-    expect(screen.getByRole('button').getAttribute('aria-expanded')).toEqual('false');
+    expect(screen.getByRole('button')).not.toHaveAttribute('aria-labelledby');
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Toggle details for');
+    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
   });
 
   test('Toggle expanded', () => {
     render();
-    expect(screen.getByRole('button').getAttribute('aria-expanded')).toEqual('true');
+    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
   });
 
   test('DataListAction dropdown', () => {
-    const view = render(
+    const { asFragment } = render(
       
          {
         />
       
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('DataListAction button', () => {
-    const view = render(
+    const { asFragment } = render(
       
         
       
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('DataListAction visibility - show button when lg', () => {
@@ -198,8 +202,8 @@ describe('DataList', () => {
       
     );
 
-    expect(screen.getByRole('button').parentElement.className).toContain('pf-m-hidden');
-    expect(screen.getByRole('button').parentElement.className).toContain('pf-m-visible-on-lg');
+    expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-hidden');
+    expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-visible-on-lg');
   });
 
   test('DataListAction visibility - hide button on 2xl', () => {
@@ -214,20 +218,20 @@ describe('DataList', () => {
       
     );
 
-    expect(screen.getByRole('button').parentElement.className).toContain('pf-m-hidden-on-2xl');
+    expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-hidden-on-2xl');
   });
 
   test('DataListContent', () => {
-    const view = render( test);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render( test);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('DataListContent hasNoPadding', () => {
-    const view = render(
+    const { asFragment } = render(
       
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/DataListAction.test.tsx b/packages/react-core/src/components/DataList/__tests__/Generated/DataListAction.test.tsx
index 10abf544d5a..2f07cb48c8d 100644
--- a/packages/react-core/src/components/DataList/__tests__/Generated/DataListAction.test.tsx
+++ b/packages/react-core/src/components/DataList/__tests__/Generated/DataListAction.test.tsx
@@ -8,7 +8,7 @@ import { DataListAction } from '../../DataListAction';
 import {} from '../..';
 
 it('DataListAction should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
     ReactNode}
       className={"''"}
@@ -17,5 +17,5 @@ it('DataListAction should match snapshot (auto-generated)', () => {
       aria-label={'string'}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/DataListCell.test.tsx b/packages/react-core/src/components/DataList/__tests__/Generated/DataListCell.test.tsx
index 3e9c7cb758e..8ef64961e43 100644
--- a/packages/react-core/src/components/DataList/__tests__/Generated/DataListCell.test.tsx
+++ b/packages/react-core/src/components/DataList/__tests__/Generated/DataListCell.test.tsx
@@ -8,7 +8,7 @@ import { DataListCell } from '../../DataListCell';
 import {} from '../..';
 
 it('DataListCell should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
     ReactNode}
       className={"''"}
@@ -18,5 +18,5 @@ it('DataListCell should match snapshot (auto-generated)', () => {
       isIcon={false}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/DataListCheck.test.tsx b/packages/react-core/src/components/DataList/__tests__/Generated/DataListCheck.test.tsx
index 997b1544206..c6586789be9 100644
--- a/packages/react-core/src/components/DataList/__tests__/Generated/DataListCheck.test.tsx
+++ b/packages/react-core/src/components/DataList/__tests__/Generated/DataListCheck.test.tsx
@@ -8,7 +8,7 @@ import { DataListCheck } from '../../DataListCheck';
 import {} from '../..';
 
 it('DataListCheck should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
      {
       aria-labelledby={'string'}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/DataListContent.test.tsx b/packages/react-core/src/components/DataList/__tests__/Generated/DataListContent.test.tsx
index 804af5fbad6..96d79ef0645 100644
--- a/packages/react-core/src/components/DataList/__tests__/Generated/DataListContent.test.tsx
+++ b/packages/react-core/src/components/DataList/__tests__/Generated/DataListContent.test.tsx
@@ -8,7 +8,7 @@ import { DataListContent } from '../../DataListContent';
 import {} from '../..';
 
 it('DataListContent should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
     ReactNode}
       className={"''"}
@@ -19,5 +19,5 @@ it('DataListContent should match snapshot (auto-generated)', () => {
       aria-label={'string'}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/DataListItem.test.tsx b/packages/react-core/src/components/DataList/__tests__/Generated/DataListItem.test.tsx
index 342cb404f68..1e18e943867 100644
--- a/packages/react-core/src/components/DataList/__tests__/Generated/DataListItem.test.tsx
+++ b/packages/react-core/src/components/DataList/__tests__/Generated/DataListItem.test.tsx
@@ -8,7 +8,7 @@ import { DataListItem } from '../../DataListItem';
 import {} from '../..';
 
 it('DataListItem should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
     ReactNode}
@@ -17,5 +17,5 @@ it('DataListItem should match snapshot (auto-generated)', () => {
       id={"''"}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/DataListItemCells.test.tsx b/packages/react-core/src/components/DataList/__tests__/Generated/DataListItemCells.test.tsx
index a2ce7c39040..1f71eed7cc1 100644
--- a/packages/react-core/src/components/DataList/__tests__/Generated/DataListItemCells.test.tsx
+++ b/packages/react-core/src/components/DataList/__tests__/Generated/DataListItemCells.test.tsx
@@ -8,6 +8,8 @@ import { DataListItemCells } from '../../DataListItemCells';
 import {} from '../..';
 
 it('DataListItemCells should match snapshot (auto-generated)', () => {
-  const view = render(ReactNode} rowid={"''"} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(
+    ReactNode} rowid={"''"} />
+  );
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/DataListItemRow.test.tsx b/packages/react-core/src/components/DataList/__tests__/Generated/DataListItemRow.test.tsx
index 462938f7a42..acd0768a0bb 100644
--- a/packages/react-core/src/components/DataList/__tests__/Generated/DataListItemRow.test.tsx
+++ b/packages/react-core/src/components/DataList/__tests__/Generated/DataListItemRow.test.tsx
@@ -8,6 +8,6 @@ import { DataListItemRow } from '../../DataListItemRow';
 import {} from '../..';
 
 it('DataListItemRow should match snapshot (auto-generated)', () => {
-  const view = render(ReactNode} className={"''"} rowid={"''"} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(ReactNode} className={"''"} rowid={"''"} />);
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/DataListToggle.test.tsx b/packages/react-core/src/components/DataList/__tests__/Generated/DataListToggle.test.tsx
index 97fcec73b4a..9e1b0e3407a 100644
--- a/packages/react-core/src/components/DataList/__tests__/Generated/DataListToggle.test.tsx
+++ b/packages/react-core/src/components/DataList/__tests__/Generated/DataListToggle.test.tsx
@@ -8,7 +8,7 @@ import { DataListToggle } from '../../DataListToggle';
 import {} from '../..';
 
 it('DataListToggle should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
      {
       aria-controls={"''"}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListAction.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListAction.test.tsx.snap
index dc1d679fa6e..7c9327e4d96 100644
--- a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListAction.test.tsx.snap
+++ b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListAction.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataListAction should match snapshot (auto-generated) 1`] = `
-
    
+
   
    
@@ -9,5 +9,5 @@ exports[`DataListAction should match snapshot (auto-generated) 1`] = `
       ReactNode
     
    
   
    
-
+
 `;
diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListCell.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListCell.test.tsx.snap
index fa0883a0e27..07146af9f77 100644
--- a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListCell.test.tsx.snap
+++ b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListCell.test.tsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataListCell should match snapshot (auto-generated) 1`] = `
-
    
+
   
    
     ReactNode
   
    
-
    
+
 `;
diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListCheck.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListCheck.test.tsx.snap
index cf32e8d990a..ae633a4f7ce 100644
--- a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListCheck.test.tsx.snap
+++ b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListCheck.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataListCheck should match snapshot (auto-generated) 1`] = `
-
    
+
   
    
@@ -15,5 +15,5 @@ exports[`DataListCheck should match snapshot (auto-generated) 1`] = `
       />
     
    
   
    
-
+
 `;
diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListContent.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListContent.test.tsx.snap
index f95fa84ff2c..d7da9aef1ad 100644
--- a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListContent.test.tsx.snap
+++ b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListContent.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataListContent should match snapshot (auto-generated) 1`] = `
-
    
+
   
    
   
    
-
    
+
 `;
diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListItem.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListItem.test.tsx.snap
index 6867381a9cc..16822117c87 100644
--- a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListItem.test.tsx.snap
+++ b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListItem.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataListItem should match snapshot (auto-generated) 1`] = `
-
    
+
   
  • 
   
    • 
-
    
+
 `;
diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListItemCells.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListItemCells.test.tsx.snap
index 59a895e1644..85bfa84591b 100644
--- a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListItemCells.test.tsx.snap
+++ b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListItemCells.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataListItemCells should match snapshot (auto-generated) 1`] = `
-
    
+
   
    
@@ -9,5 +9,5 @@ exports[`DataListItemCells should match snapshot (auto-generated) 1`] = `
       ReactNode
     
    
   
    
-
+
 `;
diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListItemRow.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListItemRow.test.tsx.snap
index cbde96e2ed0..7c8915a312c 100644
--- a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListItemRow.test.tsx.snap
+++ b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListItemRow.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataListItemRow should match snapshot (auto-generated) 1`] = `
-
    
+
   
    
@@ -11,5 +11,5 @@ exports[`DataListItemRow should match snapshot (auto-generated) 1`] = `
       ReactNode
     
    
   
    
-
+
 `;
diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap
index 0c8df40cb06..6641e1239d3 100644
--- a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap
+++ b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataListToggle should match snapshot (auto-generated) 1`] = `
-
    
+
   
    
     
    
   
    
-
+
 `;
diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap
index 277a1e6254e..81b49758b09 100644
--- a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap
+++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap
@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataList Cell default 1`] = `
-
    
+
   
    
     Secondary
   
    
-
    
+
 `;
 
 exports[`DataList Cells 1`] = `
-
    
+
   
    
@@ -28,74 +28,74 @@ exports[`DataList Cells 1`] = `
       Primary Id 2
     
    
   
    
-
+
 `;
 
 exports[`DataList DataList variants Breakpoint - 2xl 1`] = `
-
    
+
   
      
-
    
+
 `;
 
 exports[`DataList DataList variants Breakpoint - always 1`] = `
-
    
+
   
      
-
    
+
 `;
 
 exports[`DataList DataList variants Breakpoint - lg 1`] = `
-
    
+
   
      
-
    
+
 `;
 
 exports[`DataList DataList variants Breakpoint - md 1`] = `
-
    
+
   
      
-
    
+
 `;
 
 exports[`DataList DataList variants Breakpoint - none 1`] = `
-
    
+
   
      
-
    
+
 `;
 
 exports[`DataList DataList variants Breakpoint - sm 1`] = `
-
    
+
   
      
-
    
+
 `;
 
 exports[`DataList DataList variants Breakpoint - xl 1`] = `
-
    
+
   
      
-
    
+
 `;
 
 exports[`DataList DataListAction button 1`] = `
-
    
+
   
    
@@ -111,11 +111,11 @@ exports[`DataList DataListAction button 1`] = `
       Delete
     
   
    
-
    
+
 `;
 
 exports[`DataList DataListAction dropdown 1`] = `
-
    
+
   
    
@@ -153,11 +153,11 @@ exports[`DataList DataListAction dropdown 1`] = `
       
    
     
    
   
-
+
 `;
 
 exports[`DataList DataListContent 1`] = `
-
    
+
   
    
   
    
-
    
+
 `;
 
 exports[`DataList DataListContent hasNoPadding 1`] = `
-
    
+
   
    
   
    
-
    
+
 `;
 
 exports[`DataList Item 1`] = `
-
    
+
   
  • 
-
    • 
+
 `;
 
-exports[`DataList Item default 1`] = `"
  • "`;
+exports[`DataList Item default 1`] = `
+
+  
  • 
+
+`;
 
 exports[`DataList List 1`] = `
-
    
+
   
      
-
    
+
 `;
 
 exports[`DataList List compact 1`] = `
-
    
+
   
      
-
    
+
 `;
 
 exports[`DataList List default 1`] = `
-
    
+
   
      
-
    
+
 `;
 
 exports[`DataList List draggable 1`] = `
-
    
+
   
      
-
    
+
 `;
 
 exports[`DataList item row default 1`] = `
-
    
+
   
    
-
    
+    
 `;
diff --git a/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx b/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx
index 2502db5730c..632f74f5c29 100644
--- a/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  Button,
   DataList,
   DataListItem,
   DataListItemRow,
@@ -15,28 +14,13 @@ import {
   KebabToggle
 } from '@patternfly/react-core';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
-import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 
 export const DataListExpandable: React.FunctionComponent = () => {
   const [isOpen1, setIsOpen1] = React.useState(false);
   const [isOpen2, setIsOpen2] = React.useState(false);
   const [isOpen3, setIsOpen3] = React.useState(false);
-  const [allExpanded, setAllExpanded] = React.useState(false);
   const [expanded, setExpanded] = React.useState(['ex-toggle1', 'ex-toggle3']);
 
-  const onToggleAll = () => {
-    setAllExpanded(!allExpanded);
-  };
-
-  React.useEffect(() => {
-    if (allExpanded) {
-      setExpanded(['ex-toggle1', 'ex-toggle2', 'ex-toggle3']);
-    } else {
-      setExpanded([]);
-    }
-  }, [allExpanded]);
-
   const onToggle1 = isOpen1 => {
     setIsOpen1(isOpen1);
   };
@@ -68,13 +52,6 @@ export const DataListExpandable: React.FunctionComponent = () => {
   };
   return (
     
-      
-      
    
-      
    
       
         
           
diff --git a/packages/react-core/src/components/DatePicker/__tests__/DatePicker.test.tsx b/packages/react-core/src/components/DatePicker/__tests__/DatePicker.test.tsx
index ff629e506f9..64049d36ba0 100644
--- a/packages/react-core/src/components/DatePicker/__tests__/DatePicker.test.tsx
+++ b/packages/react-core/src/components/DatePicker/__tests__/DatePicker.test.tsx
@@ -3,6 +3,6 @@ import { DatePicker } from '../DatePicker';
 import React from 'react';
 
 test('disabled date picker', () => {
-  const view = render();
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
index f2d63a54eae..9a4bb7ed87c 100644
--- a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
+++ b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`disabled date picker 1`] = `
-
    
+
   
    
       
    
     
    
-    
   
    
-
+
 `;
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx
index 883683b4e43..22431afd832 100644
--- a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx
+++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx
@@ -9,53 +9,53 @@ import { DescriptionListTermHelpTextButton } from '../DescriptionListTermHelpTex
 
 describe('Description List', () => {
   test('default', () => {
-    const view = render();
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('1 col on all breakpoints', () => {
-    const view = render(
+    const { asFragment } = render(
       
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('2 col on all breakpoints', () => {
-    const view = render(
+    const { asFragment } = render(
       
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('3 col on all breakpoints', () => {
-    const view = render(
+    const { asFragment } = render(
       
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Horizontal Description List', () => {
-    const view = render();
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Compact Description List', () => {
-    const view = render();
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Compact Horizontal Description List', () => {
-    const view = render();
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Fluid Horizontal Description List', () => {
-    const view = render();
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('alignment breakpoints', () => {
-    const view = render(
+    const { asFragment } = render(
        {
         }}
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Auto Column Widths Description List', () => {
-    const view = render();
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Inline Grid Description List', () => {
-    const view = render();
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Auto fit Description List', () => {
-    const view = render();
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Auto fit with responsive grid Description List', () => {
-    const view = render(
+    const { asFragment } = render(
       
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Term default', () => {
-    const view = render(
+    const { asFragment } = render(
       
         test
       
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Term helper text', () => {
-    const view = render(
+    const { asFragment } = render(
       
         test
       
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Group', () => {
-    const view = render(
+    const { asFragment } = render(
       
         test
       
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Description', () => {
-    const view = render(
+    const { asFragment } = render(
       
         test
       
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap
index 7e36ff91942..ee89ec507f7 100644
--- a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap
+++ b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap
@@ -1,72 +1,72 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Description List 1 col on all breakpoints 1`] = `
-
    
+
   
    
-
    
+
 `;
 
 exports[`Description List 2 col on all breakpoints 1`] = `
-
    
+
   
    
-
    
+
 `;
 
 exports[`Description List 3 col on all breakpoints 1`] = `
-
    
+
   
    
-
    
+
 `;
 
 exports[`Description List Auto Column Widths Description List 1`] = `
-
    
+
   
    
-
    
+
 `;
 
 exports[`Description List Auto fit Description List 1`] = `
-
    
+
   
    
-
    
+
 `;
 
 exports[`Description List Auto fit with responsive grid Description List 1`] = `
-
    
+
   
    
-
    
+
 `;
 
 exports[`Description List Compact Description List 1`] = `
-
    
+
   
    
-
    
+
 `;
 
 exports[`Description List Compact Horizontal Description List 1`] = `
-
    
+
   
    
-
    
+
 `;
 
 exports[`Description List Description 1`] = `
-
    
+
   
    
   
    
-
    
+
 `;
 
 exports[`Description List Fluid Horizontal Description List 1`] = `
-
    
+
   
    
-
    
+
 `;
 
 exports[`Description List Group 1`] = `
-
    
+
   
    
     test
   
    
-
    
+
 `;
 
 exports[`Description List Horizontal Description List 1`] = `
-
    
+
   
    
-
    
+
 `;
 
 exports[`Description List Inline Grid Description List 1`] = `
-
    
+
   
    
-
    
+
 `;
 
 exports[`Description List Term default 1`] = `
-
    
+
   
    
   
    
-
    
+
 `;
 
 exports[`Description List Term helper text 1`] = `
-
    
+
   
    
   
    
-
    
+
 `;
 
 exports[`Description List alignment breakpoints 1`] = `
-
    
+
   
    
-
    
+
 `;
 
 exports[`Description List default 1`] = `
-
    
+
   
    
-
    
+
 `;
diff --git a/packages/react-core/src/components/Divider/__tests__/Divider.test.tsx b/packages/react-core/src/components/Divider/__tests__/Divider.test.tsx
index 376df15f842..6b940d6841c 100644
--- a/packages/react-core/src/components/Divider/__tests__/Divider.test.tsx
+++ b/packages/react-core/src/components/Divider/__tests__/Divider.test.tsx
@@ -4,22 +4,22 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 
 test('divider using hr', () => {
-  const view = render();
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('divider using li', () => {
-  const view = render();
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('divider using div', () => {
-  const view = render();
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('vertical divider', () => {
-  const view = render(
+  const { asFragment } = render(
     
       first item
        {
       second item
     
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap b/packages/react-core/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap
index b5414c85511..e4788ffcf61 100644
--- a/packages/react-core/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap
+++ b/packages/react-core/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap
@@ -1,33 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`divider using div 1`] = `
-
    
+
   
+
 `;
 
 exports[`divider using hr 1`] = `
-
    
+
   
    
-
    
+
 `;
 
 exports[`divider using li 1`] = `
-
    
+
   
  • 
@@ -10,5 +10,5 @@ exports[`DropdownSeparator should match snapshot 1`] = `
       role="separator"
     />
   
    • 
-
+    
 `;
diff --git a/packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/KebabToggle.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/KebabToggle.test.tsx.snap
index 4ffb203446e..71b58ffb536 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/KebabToggle.test.tsx.snap
+++ b/packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/KebabToggle.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KebabToggle should match snapshot (auto-generated) 1`] = `
-
    
+
   
-
    
+
 `;
diff --git a/packages/react-core/src/components/Dropdown/__tests__/InternalDropdownItem.test.tsx b/packages/react-core/src/components/Dropdown/__tests__/InternalDropdownItem.test.tsx
index 7a6f7c876e8..4d515f53155 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/InternalDropdownItem.test.tsx
+++ b/packages/react-core/src/components/Dropdown/__tests__/InternalDropdownItem.test.tsx
@@ -1,80 +1,82 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { InternalDropdownItem } from '../InternalDropdownItem';
 
 describe('InternalDropdownItem', () => {
   describe('dropdown items', () => {
     test('a', () => {
-      render(Something);
-      expect(screen.getByText('Something').outerHTML).toMatchSnapshot();
+      const { asFragment } = render(Something);
+      expect(asFragment()).toMatchSnapshot();
     });
 
     test('button', () => {
-      render(Something);
-      expect(screen.getByText('Something').outerHTML).toMatchSnapshot();
+      const { asFragment } = render(Something);
+      expect(asFragment()).toMatchSnapshot();
     });
 
     describe('hover', () => {
       test('a', () => {
-        render(Something);
-        expect(screen.getByText('Something').outerHTML).toMatchSnapshot();
+        const { asFragment } = render(Something);
+        expect(asFragment()).toMatchSnapshot();
       });
 
       test('button', () => {
-        render(
+        const { asFragment } = render(
           
             Something
           
         );
-        expect(screen.getByText('Something').outerHTML).toMatchSnapshot();
+        expect(asFragment()).toMatchSnapshot();
       });
     });
 
     describe('disabled', () => {
       test('a', () => {
-        render(Something);
-        expect(screen.getByText('Something').outerHTML).toMatchSnapshot();
+        const { asFragment } = render(Something);
+        expect(asFragment()).toMatchSnapshot();
       });
 
       test('button', () => {
-        render(
+        const { asFragment } = render(
           
             Something
           
         );
-        expect(screen.getByText('Something').outerHTML).toMatchSnapshot();
+        expect(asFragment()).toMatchSnapshot();
       });
     });
 
     describe('aria-disabled', () => {
       test('a', () => {
-        render(Something);
-        expect(screen.getByText('Something').outerHTML).toMatchSnapshot();
+        const { asFragment } = render(Something);
+        expect(asFragment()).toMatchSnapshot();
       });
 
       test('button', () => {
-        render(
+        const { asFragment } = render(
           
             Something
           
         );
-        expect(screen.getByText('Something').outerHTML).toMatchSnapshot();
+        expect(asFragment()).toMatchSnapshot();
       });
     });
 
     describe('description', () => {
       test('a', () => {
-        render(Something);
-        expect(screen.getByText("Something's link description").outerHTML).toMatchSnapshot();
+        const { asFragment } = render(
+          Something
+        );
+        expect(asFragment()).toMatchSnapshot();
       });
 
       test('button', () => {
-        render(
+        const { asFragment } = render(
           
             Something
           
         );
-        expect(screen.getByText("Something's button description").outerHTML).toMatchSnapshot();
+        expect(asFragment()).toMatchSnapshot();
       });
     });
   });
diff --git a/packages/react-core/src/components/Dropdown/__tests__/Toggle.test.tsx b/packages/react-core/src/components/Dropdown/__tests__/Toggle.test.tsx
index a2d19d90849..7147c341976 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/Toggle.test.tsx
+++ b/packages/react-core/src/components/Dropdown/__tests__/Toggle.test.tsx
@@ -4,10 +4,10 @@ import { DropdownToggle } from '../DropdownToggle';
 import { KebabToggle } from '../KebabToggle';
 
 test('Dropdown toggle', () => {
-  const view = render(Dropdown);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(Dropdown);
+  expect(asFragment()).toMatchSnapshot();
 });
 test('Kebab toggle', () => {
-  const view = render();
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
index 117989051d7..fa8a4aa2e06 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -1,31 +1,836 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Dropdown alignment breakpoints 1`] = `"
    "`;
+exports[`Dropdown alignment breakpoints 1`] = `
+
+  
    
+    
+    
+  
    
+    
+`;
 
-exports[`Dropdown basic 1`] = `""`;
+exports[`Dropdown basic 1`] = `
+
+  
    
+    
+    
    
+      
    
+        BASIC
+      
    
+    
    
+  
    
+    
+`;
 
-exports[`Dropdown dropup + right aligned 1`] = `""`;
+exports[`Dropdown dropup + right aligned 1`] = `
+
+  
    
+    
+  
    
+    
+`;
 
-exports[`Dropdown dropup 1`] = `""`;
+exports[`Dropdown dropup 1`] = `
+
+  
    
+    
+  
    
+    
+`;
 
-exports[`Dropdown expanded 1`] = `"
    "`;
+exports[`Dropdown expanded 1`] = `
+
+  
    
+    
+    
+  
    
+    
+`;
 
-exports[`Dropdown primary 1`] = `""`;
+exports[`Dropdown primary 1`] = `
+
+  
    
+    
+  
    
+    
+`;
 
-exports[`Dropdown regular 1`] = `""`;
+exports[`Dropdown regular 1`] = `
+
+  
    
+    
+  
    
+    
+`;
 
-exports[`Dropdown right aligned 1`] = `""`;
+exports[`Dropdown right aligned 1`] = `
+
+  
    
+    
+  
    
+    
+`;
 
-exports[`KebabToggle basic 1`] = `""`;
+exports[`KebabToggle basic 1`] = `
+
+  
    
+    
+    
    
+      
    
+        BASIC
+      
    
+    
    
+  
    
+    
+`;
 
-exports[`KebabToggle dropup + right aligned 1`] = `""`;
+exports[`KebabToggle dropup + right aligned 1`] = `
+
+  
    
+    
+  
    
+    
+`;
 
-exports[`KebabToggle dropup 1`] = `""`;
+exports[`KebabToggle dropup 1`] = `
+
+  
    
+    
+  
    
+    
+`;
 
-exports[`KebabToggle expanded 1`] = `"
    "`;
+exports[`KebabToggle expanded 1`] = `
+
+  
    
+    
+    
+  
    
+    
+`;
 
-exports[`KebabToggle plain 1`] = `""`;
+exports[`KebabToggle plain 1`] = `
+
+  
    
+    
+  
    
+    
+`;
 
-exports[`KebabToggle regular 1`] = `"
    "`;
+exports[`KebabToggle regular 1`] = `
+
+  
    
+    
+  
    
+    
+`;
 
-exports[`KebabToggle right aligned 1`] = `""`;
+exports[`KebabToggle right aligned 1`] = `
+
+  
    
+    
+  
    
+    
+`;
diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap
index c5cf11fa6c0..f165c5963bc 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap
+++ b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`dropdown groups basic render 1`] = `
-
    
+
   
    
@@ -17,5 +17,5 @@ exports[`dropdown groups basic render 1`] = `
       Something
     
   
    
-
    
+
 `;
diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownToggle.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownToggle.test.tsx.snap
index 22efef60581..bd16bca457a 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownToggle.test.tsx.snap
+++ b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownToggle.test.tsx.snap
@@ -1,9 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DropdownToggleCheckbox state action split button - renders primary variant 1`] = `"
    test
    "`;
+exports[`DropdownToggle state action split button - renders primary variant 1`] = `
+
+  
    
+    
    
+      test
+    
    
+    
+  
    
+    
+`;
 
-exports[`DropdownToggleCheckbox state active 1`] = `
-
    
+exports[`DropdownToggle state active 1`] = `
+
   
-
    
+
 `;
 
-exports[`DropdownToggleCheckbox state button variant - plain with text 1`] = `""`;
+exports[`DropdownToggle state button variant - plain with text 1`] = `
+
+  
+
+`;
 
-exports[`DropdownToggleCheckbox state button variant - primary 1`] = `""`;
+exports[`DropdownToggle state button variant - primary 1`] = `
+
+  
+
+`;
 
-exports[`DropdownToggleCheckbox state button variant - secondary 1`] = `""`;
+exports[`DropdownToggle state button variant - secondary 1`] = `
+
+  
+
+`;
 
-exports[`DropdownToggleCheckbox state class changes 1`] = `
-
    
+exports[`DropdownToggle state class changes 1`] = `
+
   
-
    
+
 `;
 
-exports[`DropdownToggleCheckbox state focus 1`] = `
-
    
+exports[`DropdownToggle state focus 1`] = `
+
   
-
    
+
 `;
 
-exports[`DropdownToggleCheckbox state hover 1`] = `
-
    
+exports[`DropdownToggle state hover 1`] = `
+
   
-
    
+
 `;
 
-exports[`DropdownToggleCheckbox state split button - does not render primary variant 1`] = `"
    test
    "`;
+exports[`DropdownToggle state split button - does not render primary variant 1`] = `
+
+  
    
+    
    
+      test
+    
    
+    
+  
    
+    
+`;
diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownToggleAction.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownToggleAction.test.tsx.snap
index 6cdc0b496e2..caa44f589a1 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownToggleAction.test.tsx.snap
+++ b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownToggleAction.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`isDisabled 1`] = `
-
    
+
   
    
+
 `;
 
 exports[`passing class 1`] = `
-
    
+
   
    
+
 `;
 
 exports[`renders with text 1`] = `
-
    
+
   
    
+
 `;
diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownToggleCheckbox.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownToggleCheckbox.test.tsx.snap
index 8c163ceb913..35c0ce46446 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownToggleCheckbox.test.tsx.snap
+++ b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/DropdownToggleCheckbox.test.tsx.snap
@@ -1,15 +1,149 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DropdownToggleCheckbox 3rd state 1`] = `""`;
+exports[`DropdownToggleCheckbox 3rd state 1`] = `
+
+  
+
+`;
 
-exports[`DropdownToggleCheckbox controlled 1`] = `""`;
+exports[`DropdownToggleCheckbox controlled 1`] = `
+
+  
+
+`;
 
-exports[`DropdownToggleCheckbox isDisabled 1`] = `""`;
+exports[`DropdownToggleCheckbox isDisabled 1`] = `
+
+  
+
+`;
 
-exports[`DropdownToggleCheckbox passing HTML attribute 1`] = `""`;
+exports[`DropdownToggleCheckbox passing HTML attribute 1`] = `
+
+  
+
+`;
 
-exports[`DropdownToggleCheckbox passing class 1`] = `""`;
+exports[`DropdownToggleCheckbox passing class 1`] = `
+
+  
+
+`;
 
-exports[`DropdownToggleCheckbox uncontrolled 1`] = `""`;
+exports[`DropdownToggleCheckbox uncontrolled 1`] = `
+
+  
+
+`;
 
-exports[`DropdownToggleCheckbox with text 1`] = `""`;
+exports[`DropdownToggleCheckbox with text 1`] = `
+
+  
+
+`;
diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/InternalDropdownItem.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/InternalDropdownItem.test.tsx.snap
index 79cdef8e102..72629380fa2 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/InternalDropdownItem.test.tsx.snap
+++ b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/InternalDropdownItem.test.tsx.snap
@@ -1,21 +1,168 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InternalDropdownItem dropdown items a 1`] = `"Something"`;
+exports[`InternalDropdownItem dropdown items a 1`] = `
+
+  
  • 
+    
+      Something
+    
+  
    • 
+    
+`;
 
-exports[`InternalDropdownItem dropdown items aria-disabled a 1`] = `"Something"`;
+exports[`InternalDropdownItem dropdown items aria-disabled a 1`] = `
+
+  
  • 
+    
+      Something
+    
+  
    • 
+    
+`;
 
-exports[`InternalDropdownItem dropdown items aria-disabled button 1`] = `""`;
+exports[`InternalDropdownItem dropdown items aria-disabled button 1`] = `
+
+  
  • 
+    
+  
    • 
+    
+`;
 
-exports[`InternalDropdownItem dropdown items button 1`] = `""`;
+exports[`InternalDropdownItem dropdown items button 1`] = `
+
+  
  • 
+    
+  
    • 
+    
+`;
 
-exports[`InternalDropdownItem dropdown items description a 1`] = `"
    Something's link description
    "`;
+exports[`InternalDropdownItem dropdown items description a 1`] = `
+
+  
  • 
+    
+      
    
+        Something
+      
    
+      
    
+        Something's link description
+      
    
+        
+  
    • 
+    
+`;
 
-exports[`InternalDropdownItem dropdown items description button 1`] = `"
    Something's button description
    "`;
+exports[`InternalDropdownItem dropdown items description button 1`] = `
+
+  
  • 
+    
+  
    • 
+    
+`;
 
-exports[`InternalDropdownItem dropdown items disabled a 1`] = `"Something"`;
+exports[`InternalDropdownItem dropdown items disabled a 1`] = `
+
+  
  • 
+    
+      Something
+    
+  
    • 
+    
+`;
 
-exports[`InternalDropdownItem dropdown items disabled button 1`] = `""`;
+exports[`InternalDropdownItem dropdown items disabled button 1`] = `
+
+  
  • 
+    
+  
    • 
+    
+`;
 
-exports[`InternalDropdownItem dropdown items hover a 1`] = `"Something"`;
+exports[`InternalDropdownItem dropdown items hover a 1`] = `
+
+  
  • 
+    
+      Something
+    
+  
    • 
+    
+`;
 
-exports[`InternalDropdownItem dropdown items hover button 1`] = `""`;
+exports[`InternalDropdownItem dropdown items hover button 1`] = `
+
+  
  • 
+    
+  
    • 
+    
+`;
diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Toggle.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Toggle.test.tsx.snap
index f6486f4adcd..6485202e397 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Toggle.test.tsx.snap
+++ b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Toggle.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Dropdown toggle 1`] = `
-
    
+
   
-
    
+
 `;
 
 exports[`Kebab toggle 1`] = `
-
    
+
   
-
    
+
 `;
diff --git a/packages/react-core/src/components/DualListSelector/__tests__/DualListSelector.test.tsx b/packages/react-core/src/components/DualListSelector/__tests__/DualListSelector.test.tsx
index c2a5438d613..b5baebcb692 100644
--- a/packages/react-core/src/components/DualListSelector/__tests__/DualListSelector.test.tsx
+++ b/packages/react-core/src/components/DualListSelector/__tests__/DualListSelector.test.tsx
@@ -4,17 +4,19 @@ import React from 'react';
 
 describe('DualListSelector', () => {
   test('basic', () => {
-    const view = render();
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('with search inputs', () => {
-    const view = render();
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(
+      
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('with custom status', () => {
-    const view = render(
+    const { asFragment } = render(
        {
         id="thirdTest"
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('basic with disabled controls', () => {
-    const view = render();
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(
+      
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('with tree', () => {
-    const view = render(
+    const { asFragment } = render(
        {
         isTree
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('with actions', () => {
-    const view = render(
+    const { asFragment } = render(
        {
         id="fourthTest"
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap b/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
index 248a41deb33..bd4fd46de08 100644
--- a/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
+++ b/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DualListSelector basic 1`] = `
-
    
+
   
    
     
    
   
    
-
+
 `;
 
 exports[`DualListSelector basic with disabled controls 1`] = `
-
    
+
   
    
     
    
   
    
-
+
 `;
 
 exports[`DualListSelector with actions 1`] = `
-
    
+
   
    
     
    
   
    
-
+
 `;
 
 exports[`DualListSelector with custom status 1`] = `
-
    
+
   
    
     
    
   
    
-
+
 `;
 
 exports[`DualListSelector with search inputs 1`] = `
-
    
+
   
    
     
    
   
    
-
+
 `;
 
 exports[`DualListSelector with tree 1`] = `
-
    
+
   
    
     
    
   
    
-
+
 `;
diff --git a/packages/react-core/src/components/EmptyState/__tests__/EmptyState.test.tsx b/packages/react-core/src/components/EmptyState/__tests__/EmptyState.test.tsx
index da0e6a508f1..77fe5d03fa5 100644
--- a/packages/react-core/src/components/EmptyState/__tests__/EmptyState.test.tsx
+++ b/packages/react-core/src/components/EmptyState/__tests__/EmptyState.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
-import "@testing-library/jest-dom";
 
 import AddressBookIcon from '@patternfly/react-icons/dist/esm/icons/address-book-icon';
 import { EmptyState, EmptyStateVariant } from '../EmptyState';
@@ -14,8 +13,8 @@ import { Title, TitleSizes } from '../../Title';
 
 describe('EmptyState', () => {
   test('Main', () => {
-    render(
-      
+    const { asFragment } = render(
+      
         
           HTTP Proxies
         
@@ -30,40 +29,40 @@ describe('EmptyState', () => {
         
       
     );
-    expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Main variant large', () => {
-    render(
-      
+    const { asFragment } = render(
+      
         
           EmptyState large
         
       
     );
-    expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Main variant small', () => {
-    render(
-      
+    const { asFragment } = render(
+      
         
           EmptyState small
         
       
     );
-    expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Main variant xs', () => {
-    render(
-      
+    const { asFragment } = render(
+      
         
           EmptyState small
         
       
     );
-    expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Body', () => {
@@ -73,27 +72,29 @@ describe('EmptyState', () => {
 
   test('Secondary Action', () => {
     render();
-    expect(screen.getByTestId('actions-test-id')).toHaveClass('custom-empty-state-secondary pf-c-empty-state__secondary');
+    expect(screen.getByTestId('actions-test-id')).toHaveClass(
+      'custom-empty-state-secondary pf-c-empty-state__secondary'
+    );
   });
 
   test('Icon', () => {
     render();
-    expect(screen.getByTestId('icon-test-id').outerHTML).toContain('pf-c-empty-state__icon');
+    expect(screen.getByTestId('icon-test-id')).toHaveClass('pf-c-empty-state__icon');
   });
 
   test('Wrap icon in a div', () => {
-    const view = render(
+    const { container } = render(
       
     );
 
-    expect(view.container.querySelector('div')).toHaveClass('pf-c-empty-state__icon custom-empty-state-icon');
-    expect(view.container.querySelector('svg')).toBeInTheDocument();
-  })
+    expect(container.querySelector('div')).toHaveClass('pf-c-empty-state__icon custom-empty-state-icon');
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
 
   test('Primary div', () => {
     render(
@@ -101,17 +102,17 @@ describe('EmptyState', () => {
         
       
     );
-    expect(screen.getByTestId('primary-test-id').className).toContain('pf-c-empty-state__primary');
+    expect(screen.getByTestId('primary-test-id')).toHaveClass('pf-c-empty-state__primary');
   });
 
   test('Full height', () => {
-    render(
-      
+    const { asFragment } = render(
+      
         
           EmptyState large
         
       
     );
-    expect(screen.getByTestId('empty-state-test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateBody.test.tsx b/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateBody.test.tsx
index 1306791c39c..f0a3fee5e27 100644
--- a/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateBody.test.tsx
+++ b/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateBody.test.tsx
@@ -8,6 +8,6 @@ import { EmptyStateBody } from '../../EmptyStateBody';
 import {} from '../..';
 
 it('EmptyStateBody should match snapshot (auto-generated)', () => {
-  const view = render(ReactNode} className={"''"} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(ReactNode} className={"''"} />);
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx b/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx
index b14f22d443c..b14aaea0499 100644
--- a/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx
+++ b/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx
@@ -3,12 +3,12 @@
  */
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { UserIcon } from '@patternfly/react-icons'
+import { UserIcon } from '@patternfly/react-icons';
 import { EmptyStateIcon } from '../../EmptyStateIcon';
 // any missing imports can usually be resolved by adding them here
 import {} from '../..';
 it('EmptyStateIcon should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
      {
       variant={'icon'}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 it('EmptyStateIcon should match snapshot for variant container', () => {
-  const view = render(
+  const { asFragment } = render(
      {
       variant={'container'}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStatePrimary.test.tsx b/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStatePrimary.test.tsx
index 52e82110b1e..2701f7084ec 100644
--- a/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStatePrimary.test.tsx
+++ b/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStatePrimary.test.tsx
@@ -8,6 +8,6 @@ import { EmptyStatePrimary } from '../../EmptyStatePrimary';
 import {} from '../..';
 
 it('EmptyStatePrimary should match snapshot (auto-generated)', () => {
-  const view = render(ReactNode} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(ReactNode} />);
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateSecondaryActions.test.tsx b/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateSecondaryActions.test.tsx
index fddda626965..b2f103ab48c 100644
--- a/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateSecondaryActions.test.tsx
+++ b/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateSecondaryActions.test.tsx
@@ -8,6 +8,6 @@ import { EmptyStateSecondaryActions } from '../../EmptyStateSecondaryActions';
 import {} from '../..';
 
 it('EmptyStateSecondaryActions should match snapshot (auto-generated)', () => {
-  const view = render(ReactNode} className={"''"} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(ReactNode} className={"''"} />);
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateBody.test.tsx.snap b/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateBody.test.tsx.snap
index 17b32337a6e..0763552472c 100644
--- a/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateBody.test.tsx.snap
+++ b/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateBody.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EmptyStateBody should match snapshot (auto-generated) 1`] = `
-
    
+
   
    
@@ -9,5 +9,5 @@ exports[`EmptyStateBody should match snapshot (auto-generated) 1`] = `
       ReactNode
     
    
   
    
-
+
 `;
diff --git a/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap b/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap
index 1f194583944..5ac49feafd4 100644
--- a/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap
+++ b/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EmptyStateIcon should match snapshot (auto-generated) 1`] = `
-
    
+
   
   
-
    
+
 `;
 
 exports[`EmptyStateIcon should match snapshot for variant container 1`] = `
-
    
+
   
    
@@ -34,5 +34,5 @@ exports[`EmptyStateIcon should match snapshot for variant container 1`] = `
       Component
     
    
   
    
-
+
 `;
diff --git a/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStatePrimary.test.tsx.snap b/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStatePrimary.test.tsx.snap
index fffc307afde..6c2647a1a3e 100644
--- a/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStatePrimary.test.tsx.snap
+++ b/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStatePrimary.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EmptyStatePrimary should match snapshot (auto-generated) 1`] = `
-
    
+
   
    
@@ -9,5 +9,5 @@ exports[`EmptyStatePrimary should match snapshot (auto-generated) 1`] = `
       ReactNode
     
    
   
    
-
+
 `;
diff --git a/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateSecondaryActions.test.tsx.snap b/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateSecondaryActions.test.tsx.snap
index 42b6209ad84..3181d7dbc3f 100644
--- a/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateSecondaryActions.test.tsx.snap
+++ b/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateSecondaryActions.test.tsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EmptyStateSecondaryActions should match snapshot (auto-generated) 1`] = `
-
    
+
   
    
     ReactNode
   
    
-
    
+
 `;
diff --git a/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap b/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap
index 15091741a23..8d2b2997962 100644
--- a/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap
+++ b/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap
@@ -1,11 +1,136 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EmptyState Full height 1`] = `"
    EmptyState large
    "`;
+exports[`EmptyState Full height 1`] = `
+
+  
    
+    
    
+      
    
+        EmptyState large
+      
    
+    
    
+  
    
+    
+`;
 
-exports[`EmptyState Main 1`] = `"
    HTTP Proxies
    Defining HTTP Proxies that exist on your network allows you to perform various actions through those proxies.
    "`;
+exports[`EmptyState Main 1`] = `
+
+  
    
+    
    
+      
    
+        HTTP Proxies
+      
    
+      
    
+        Defining HTTP Proxies that exist on your network allows you to perform various actions through those proxies.
+      
    
+      
+      
    
+        
+      
    
+    
    
+  
    
+    
+`;
 
-exports[`EmptyState Main variant large 1`] = `"
    EmptyState large
    "`;
+exports[`EmptyState Main variant large 1`] = `
+
+  
    
+    
    
+      
    
+        EmptyState large
+      
    
+    
    
+  
    
+    
+`;
 
-exports[`EmptyState Main variant small 1`] = `"
    EmptyState small
    "`;
+exports[`EmptyState Main variant small 1`] = `
+
+  
    
+    
    
+      
    
+        EmptyState small
+      
    
+    
    
+  
    
+    
+`;
 
-exports[`EmptyState Main variant xs 1`] = `"
    EmptyState small
    "`;
+exports[`EmptyState Main variant xs 1`] = `
+
+  
    
+    
    
+      
    
+        EmptyState small
+      
    
+    
    
+  
    
+    
+`;
diff --git a/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx b/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx
index 3a06d61fc4b..0ca1a8c9b30 100644
--- a/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx
+++ b/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx
@@ -1,19 +1,21 @@
 import * as React from 'react';
+
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+
 import { ExpandableSection } from '../ExpandableSection';
 import { ExpandableSectionToggle } from '../ExpandableSectionToggle';
 
 const props = {};
 
 test('ExpandableSection', () => {
-  const view = render(test );
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(test );
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Renders ExpandableSection expanded', () => {
-  const view = render( test );
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render( test );
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('ExpandableSection onToggle called', () => {
@@ -26,12 +28,12 @@ test('ExpandableSection onToggle called', () => {
 });
 
 test('Renders Uncontrolled ExpandableSection', () => {
-  const view = render( test );
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render( test );
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Detached ExpandableSection renders successfully', () => {
-  const view = render(
+  const { asFragment } = render(
     
       
         test
@@ -41,15 +43,24 @@ test('Detached ExpandableSection renders successfully', () => {
       
     
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Disclosure ExpandableSection', () => {
-  const view = render(test );
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(
+    
+      test{' '}
+    
+  );
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Renders ExpandableSection indented', () => {
-  const view = render( test );
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(
+    
+      {' '}
+      test{' '}
+    
+  );
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap b/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap
index bd36a038316..3fe415121b2 100644
--- a/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap
+++ b/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Detached ExpandableSection renders successfully 1`] = `
-
    
+
   
    
@@ -45,11 +45,11 @@ exports[`Detached ExpandableSection renders successfully 1`] = `
       
     
   
    
-
    
+
 `;
 
 exports[`Disclosure ExpandableSection 1`] = `
-
    
+
   
    
@@ -86,11 +86,11 @@ exports[`Disclosure ExpandableSection 1`] = `
       test 
     
    
   
    
-
+
 `;
 
 exports[`ExpandableSection 1`] = `
-
    
+
   
    
@@ -127,11 +127,11 @@ exports[`ExpandableSection 1`] = `
       test 
     
    
   
    
-
+
 `;
 
 exports[`Renders ExpandableSection expanded 1`] = `
-
    
+
   
    
@@ -168,11 +168,11 @@ exports[`Renders ExpandableSection expanded 1`] = `
        test 
     
    
   
    
-
+
 `;
 
 exports[`Renders ExpandableSection indented 1`] = `
-
    
+
   
    
@@ -209,11 +209,11 @@ exports[`Renders ExpandableSection indented 1`] = `
        test 
     
    
   
    
-
+
 `;
 
 exports[`Renders Uncontrolled ExpandableSection 1`] = `
-
    
+
   
    
@@ -252,5 +252,5 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
        test 
     
    
   
    
-
+
 `;
diff --git a/packages/react-core/src/components/FileUpload/__tests__/FileUpload.test.tsx b/packages/react-core/src/components/FileUpload/__tests__/FileUpload.test.tsx
index 4d8b151bb6e..077e001ef15 100644
--- a/packages/react-core/src/components/FileUpload/__tests__/FileUpload.test.tsx
+++ b/packages/react-core/src/components/FileUpload/__tests__/FileUpload.test.tsx
@@ -7,7 +7,7 @@ test('simple fileupload', () => {
   const readStartedHandler = jest.fn();
   const readFinishedHandler = jest.fn();
 
-  const view = render(
+  const { asFragment } = render(
      {
       isLoading={false}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/FileUpload/__tests__/FileUploadField.test.tsx b/packages/react-core/src/components/FileUpload/__tests__/FileUploadField.test.tsx
index ddd7ea313dc..650da01bd8e 100644
--- a/packages/react-core/src/components/FileUpload/__tests__/FileUploadField.test.tsx
+++ b/packages/react-core/src/components/FileUpload/__tests__/FileUploadField.test.tsx
@@ -7,7 +7,7 @@ test('simple fileuploadfield', () => {
   const browserBtnClickHandler = jest.fn();
   const clearBtnClickHandler = jest.fn();
 
-  const view = render(
+  const { asFragment } = render(
      {
       {
    A custom preview of the uploaded file can be passed as children
    }
         
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap
index e768076b246..bb2cf9c2ef7 100644
--- a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap
+++ b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`simple fileupload 1`] = `
-
    
+
   
    
@@ -68,5 +68,5 @@ exports[`simple fileupload 1`] = `
       type="file"
     />
   
    
-
    
+
 `;
diff --git a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap
index 7817ed6a985..becea7546b1 100644
--- a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap
+++ b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`simple fileuploadfield 1`] = `
-
    
+
   
    
@@ -64,5 +64,5 @@ exports[`simple fileuploadfield 1`] = `
       A custom preview of the uploaded file can be passed as children
     
    
   
    
-
    
+
 `;
diff --git a/packages/react-core/src/components/Form/__tests__/ActionGroup.test.tsx b/packages/react-core/src/components/Form/__tests__/ActionGroup.test.tsx
index 8d22a94479e..fa24a2fb0b8 100644
--- a/packages/react-core/src/components/Form/__tests__/ActionGroup.test.tsx
+++ b/packages/react-core/src/components/Form/__tests__/ActionGroup.test.tsx
@@ -5,20 +5,20 @@ import { Form } from '../Form';
 
 describe('ActionGroup component', () => {
   test('should render default action group variant', () => {
-    const view = render(
+    const { asFragment } = render(
       
         
    Hello
    
           
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render horizontal form ActionGroup variant', () => {
-    const view = render(
+    const { asFragment } = render(
       
    
         
       
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/packages/react-core/src/components/Form/__tests__/Form.test.tsx b/packages/react-core/src/components/Form/__tests__/Form.test.tsx
index e75b71c59d1..34188e8eb98 100644
--- a/packages/react-core/src/components/Form/__tests__/Form.test.tsx
+++ b/packages/react-core/src/components/Form/__tests__/Form.test.tsx
@@ -4,17 +4,17 @@ import { Form } from '../Form';
 
 describe('Form component', () => {
   test('should render default form variant', () => {
-    const view = render(
    );
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render horizontal form variant', () => {
-    const view = render();
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render form with limited width', () => {
-    const view = render();
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/packages/react-core/src/components/Form/__tests__/FormAlert.test.tsx b/packages/react-core/src/components/Form/__tests__/FormAlert.test.tsx
index 190d1f8f777..df0e75d2b57 100644
--- a/packages/react-core/src/components/Form/__tests__/FormAlert.test.tsx
+++ b/packages/react-core/src/components/Form/__tests__/FormAlert.test.tsx
@@ -4,9 +4,7 @@ import React from 'react';
 
 describe('Form Alert component', () => {
   test('should render form group required variant', () => {
-    const view = render(
-      
-    );
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/packages/react-core/src/components/Form/__tests__/FormFieldGroup.test.tsx b/packages/react-core/src/components/Form/__tests__/FormFieldGroup.test.tsx
index a0c28a7a6dd..c9cfa8706f7 100644
--- a/packages/react-core/src/components/Form/__tests__/FormFieldGroup.test.tsx
+++ b/packages/react-core/src/components/Form/__tests__/FormFieldGroup.test.tsx
@@ -1,24 +1,26 @@
 import * as React from 'react';
+
+import { render } from '@testing-library/react';
+
 import { FormFieldGroup } from '../FormFieldGroup';
 import { FormFieldGroupExpandable } from '../FormFieldGroupExpandable';
 import { FormFieldGroupHeader } from '../FormFieldGroupHeader';
 import { Button } from '../../Button';
-import { render } from '@testing-library/react';
 
 test('Check form field group example against snapshot', () => {
   const FieldGroup = (
     }
         />
       }
     />
   );
-  const view = render(FieldGroup);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(FieldGroup);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Check expandable form field group example against snapshot', () => {
@@ -28,15 +30,15 @@ test('Check expandable form field group example against snapshot', () => {
       toggleAriaLabel="toggle"
       header={
         }
         />
       }
     />
   );
-  const view = render(FieldGroup);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(FieldGroup);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Verify console error logged when there is no aria-label or title', () => {
@@ -45,14 +47,9 @@ test('Verify console error logged when there is no aria-label or title', () => {
   const FieldGroup = (
     }
-        />
-      }
+      header={} />}
     />
   );
-  const view = render(FieldGroup);
-  expect(consoleErrorMock).toBeCalled();
+  const { asFragment } = render(FieldGroup);
+  expect(consoleErrorMock).toHaveBeenCalled();
 });
diff --git a/packages/react-core/src/components/Form/__tests__/FormGroup.test.tsx b/packages/react-core/src/components/Form/__tests__/FormGroup.test.tsx
index 051c79f1cc9..05a2001bce0 100644
--- a/packages/react-core/src/components/Form/__tests__/FormGroup.test.tsx
+++ b/packages/react-core/src/components/Form/__tests__/FormGroup.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
 
 import { ValidatedOptions } from '../../../helpers/constants';
 import { FormGroup } from '../FormGroup';
@@ -144,12 +143,7 @@ describe('FormGroup', () => {
 
   test('should render form group invalid variant', () => {
     const { asFragment } = render(
-      
+      
         
       
     );
@@ -175,12 +169,7 @@ describe('FormGroup', () => {
 
   test('should render form group validated error variant', () => {
     const { asFragment } = render(
-      
+      
         
       
     );
diff --git a/packages/react-core/src/components/Form/__tests__/FormHelperText.test.tsx b/packages/react-core/src/components/Form/__tests__/FormHelperText.test.tsx
index fe06f8e3764..fe3277253f1 100644
--- a/packages/react-core/src/components/Form/__tests__/FormHelperText.test.tsx
+++ b/packages/react-core/src/components/Form/__tests__/FormHelperText.test.tsx
@@ -1,33 +1,32 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
 
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { FormHelperText } from '../FormHelperText';
 
 describe('FormHelperText', () => {
   test('renders with PatternFly Core styles', () => {
-    render(
+    const { asFragment } = render(
       
         test
       
     );
-    expect(screen.getByText('test').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with icon', () => {
-    render(
+    const { asFragment } = render(
       }>
         test
       
     );
-    expect(screen.getByText('test').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('className is added to the root element', () => {
-    render(test);
-    expect(screen.getByText('test').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(test);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('extra props are spread to the root element', () => {
@@ -39,12 +38,12 @@ describe('FormHelperText', () => {
   test('LoginFooterItem  with custom node', () => {
     const CustomNode = () => 
    My custom node
    ;
 
-    render(
+    const { asFragment } = render(
       
         
       
     );
 
-    expect(screen.getByText('My custom node').parentElement.outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/packages/react-core/src/components/Form/__tests__/FormSection.test.tsx b/packages/react-core/src/components/Form/__tests__/FormSection.test.tsx
index 2c4bfd077de..d8844b5c665 100644
--- a/packages/react-core/src/components/Form/__tests__/FormSection.test.tsx
+++ b/packages/react-core/src/components/Form/__tests__/FormSection.test.tsx
@@ -4,12 +4,12 @@ import { render } from '@testing-library/react';
 
 test('Check form section example against snapshot', () => {
   const Section = ;
-  const view = render(Section);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(Section);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Check form section example with title', () => {
-  const Section = ;
-  const view = render(Section);
-  expect(view.container).toMatchSnapshot();
+  const Section = ;
+  const { asFragment } = render(Section);
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/ActionGroup.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/ActionGroup.test.tsx.snap
index 73a090c548f..f94fb22b19e 100644
--- a/packages/react-core/src/components/Form/__tests__/__snapshots__/ActionGroup.test.tsx.snap
+++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/ActionGroup.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ActionGroup component should render default action group variant 1`] = `
-
    
+
   
    
@@ -17,11 +17,11 @@ exports[`ActionGroup component should render default action group variant 1`] =
       
    
     
    
   
-
+
 `;
 
 exports[`ActionGroup component should render horizontal form ActionGroup variant 1`] = `
-
    
+
   
     
    
   
-
+
 `;
diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/Form.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/Form.test.tsx.snap
index bcc322d7000..cb24d357765 100644
--- a/packages/react-core/src/components/Form/__tests__/__snapshots__/Form.test.tsx.snap
+++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/Form.test.tsx.snap
@@ -1,28 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form component should render default form variant 1`] = `
-
    
+
   
    
-
    
+
 `;
 
 exports[`Form component should render form with limited width 1`] = `
-
    
+
   
-
    
+
 `;
 
 exports[`Form component should render horizontal form variant 1`] = `
-
    
+
   
-
    
+
 `;
diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormAlert.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormAlert.test.tsx.snap
index 9f37c77b341..9f39d0e6c53 100644
--- a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormAlert.test.tsx.snap
+++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormAlert.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form Alert component should render form group required variant 1`] = `
-
    
+
   
    
-
    
+    
 `;
diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap
index c1806a213a0..0a01a963490 100644
--- a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap
+++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Check expandable form field group example against snapshot 1`] = `
-
    
+
   
    
@@ -82,11 +82,11 @@ exports[`Check expandable form field group example against snapshot 1`] = `
       class="pf-c-form__field-group-body"
     />
   
    
-
    
+
 `;
 
 exports[`Check form field group example against snapshot 1`] = `
-
    
+
   
    
@@ -129,5 +129,5 @@ exports[`Check form field group example against snapshot 1`] = `
       class="pf-c-form__field-group-body"
     />
   
    
-
    
+
 `;
diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormHelperText.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormHelperText.test.tsx.snap
index 82d21073646..d2b7e7d9b5e 100644
--- a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormHelperText.test.tsx.snap
+++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormHelperText.test.tsx.snap
@@ -1,9 +1,60 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FormHelperText LoginFooterItem  with custom node 1`] = `"
    My custom node
    "`;
+exports[`FormHelperText LoginFooterItem  with custom node 1`] = `
+
+  
    
+  
    
+    My custom node
+  
    
+  
    
+
+`;
 
-exports[`FormHelperText className is added to the root element 1`] = `"
    test
    "`;
+exports[`FormHelperText className is added to the root element 1`] = `
+
+  
    
+    test
+  
    
+    
+`;
 
-exports[`FormHelperText renders with PatternFly Core styles 1`] = `"
    test
    "`;
+exports[`FormHelperText renders with PatternFly Core styles 1`] = `
+
+  
    
+    test
+  
    
+    
+`;
 
-exports[`FormHelperText renders with icon 1`] = `"
    test
    "`;
+exports[`FormHelperText renders with icon 1`] = `
+
+  
    
+    
+      
+    
+    test
+  
    
+    
+`;
diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormSection.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormSection.test.tsx.snap
index 08724d3e83e..ca8bb447a09 100644
--- a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormSection.test.tsx.snap
+++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormSection.test.tsx.snap
@@ -1,17 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Check form section example against snapshot 1`] = `
-
    
+
   
    
-    
-  
    
-
    
+  />
+    
 `;
 
 exports[`Check form section example with title 1`] = `
-
    
+
   
    
@@ -21,5 +19,5 @@ exports[`Check form section example with title 1`] = `
       Title
     
   
    
-
    
+
 `;
diff --git a/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx b/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx
index b3f650e5688..a8aad0a2f65 100644
--- a/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx
+++ b/packages/react-core/src/components/FormSelect/__tests__/FormSelect.test.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
 
 import { FormSelect } from '../FormSelect';
 import { FormSelectOption } from '../FormSelectOption';
@@ -54,18 +53,18 @@ const groupedProps = {
 
 describe('FormSelect', () => {
   test('Simple FormSelect input', () => {
-    render(
+    const { asFragment } = render(
       
         {props.options.map((option, index) => (
           
         ))}
       
     );
-    expect(screen.getByLabelText('simple FormSelect').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Grouped FormSelect input', () => {
-    render(
+    const { asFragment } = render(
       
         {groupedProps.groups.map((group, index) => (
           
@@ -76,71 +75,71 @@ describe('FormSelect', () => {
         ))}
       
     );
-    expect(screen.getByLabelText('grouped FormSelect').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Disabled FormSelect input ', () => {
-    render(
+    const { asFragment } = render(
       
         
       
     );
-    expect(screen.getByLabelText('disabled FormSelect').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('FormSelect input with aria-label does not generate console error', () => {
     const myMock = jest.fn() as any;
     global.console = { error: myMock } as any;
 
-    render(
+    const { asFragment } = render(
       
         
       
     );
 
-    expect(screen.getByLabelText('label').outerHTML).toMatchSnapshot();
-    expect(myMock).not.toBeCalled();
+    expect(asFragment()).toMatchSnapshot();
+    expect(myMock).not.toHaveBeenCalled();
   });
 
   test('FormSelect input with id does not generate console error', () => {
     const myMock = jest.fn() as any;
     global.console = { error: myMock } as any;
 
-    render(
+    const { asFragment } = render(
       
         
       
     );
 
-    expect(screen.getByLabelText('label').outerHTML).toMatchSnapshot();
-    expect(myMock).not.toBeCalled();
+    expect(asFragment()).toMatchSnapshot();
+    expect(myMock).not.toHaveBeenCalled();
   });
 
   test('FormSelect input with no aria-label or id generates console error', () => {
     const myMock = jest.fn() as any;
     global.console = { error: myMock } as any;
 
-    render(
-      
+    const { asFragment } = render(
+      
         
       
     );
 
-    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
-    expect(myMock).toBeCalled();
+    expect(asFragment()).toMatchSnapshot();
+    expect(myMock).toHaveBeenCalled();
   });
 
   test('invalid FormSelect input', () => {
-    render(
+    const { asFragment } = render(
       
         
       
     );
-    expect(screen.getByLabelText('invalid FormSelect').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('validated success FormSelect input', () => {
-    render(
+    const { asFragment } = render(
       
         
       
@@ -148,12 +147,12 @@ describe('FormSelect', () => {
 
     const formSelect = screen.getByLabelText('validated FormSelect');
 
-    expect(formSelect.className).toContain('pf-m-success');
-    expect(formSelect.outerHTML).toMatchSnapshot();
+    expect(formSelect).toHaveClass('pf-m-success');
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('validated warning FormSelect input', () => {
-    render(
+    const { asFragment } = render(
       
         
       
@@ -161,8 +160,8 @@ describe('FormSelect', () => {
 
     const formSelect = screen.getByLabelText('validated FormSelect');
 
-    expect(formSelect.className).toContain('pf-m-warning');
-    expect(formSelect.outerHTML).toMatchSnapshot();
+    expect(formSelect).toHaveClass('pf-m-warning');
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('required FormSelect input', () => {
@@ -186,7 +185,7 @@ describe('FormSelect', () => {
 
     userEvent.selectOptions(screen.getByLabelText('Some label'), 'Mr');
 
-    expect(myMock).toBeCalled();
+    expect(myMock).toHaveBeenCalled();
     expect(myMock.mock.calls[0][0]).toEqual('mr');
   });
 });
diff --git a/packages/react-core/src/components/FormSelect/__tests__/Generated/FormSelectOption.test.tsx b/packages/react-core/src/components/FormSelect/__tests__/Generated/FormSelectOption.test.tsx
index 52d4f8d32ef..8592d0a9dfc 100644
--- a/packages/react-core/src/components/FormSelect/__tests__/Generated/FormSelectOption.test.tsx
+++ b/packages/react-core/src/components/FormSelect/__tests__/Generated/FormSelectOption.test.tsx
@@ -8,6 +8,6 @@ import { FormSelectOption } from '../../FormSelectOption';
 import {} from '../..';
 
 it('FormSelectOption should match snapshot (auto-generated)', () => {
-  const view = render();
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/FormSelect/__tests__/Generated/FormSelectOptionGroup.test.tsx b/packages/react-core/src/components/FormSelect/__tests__/Generated/FormSelectOptionGroup.test.tsx
index f1336e3bb06..fcb1a57b6f7 100644
--- a/packages/react-core/src/components/FormSelect/__tests__/Generated/FormSelectOptionGroup.test.tsx
+++ b/packages/react-core/src/components/FormSelect/__tests__/Generated/FormSelectOptionGroup.test.tsx
@@ -8,8 +8,8 @@ import { FormSelectOptionGroup } from '../../FormSelectOptionGroup';
 import {} from '../..';
 
 it('FormSelectOptionGroup should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
     ReactNode} className={"''"} label={'string'} isDisabled={false} />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/FormSelect/__tests__/Generated/__snapshots__/FormSelectOption.test.tsx.snap b/packages/react-core/src/components/FormSelect/__tests__/Generated/__snapshots__/FormSelectOption.test.tsx.snap
index 9b44beabe4e..333bd0012a8 100644
--- a/packages/react-core/src/components/FormSelect/__tests__/Generated/__snapshots__/FormSelectOption.test.tsx.snap
+++ b/packages/react-core/src/components/FormSelect/__tests__/Generated/__snapshots__/FormSelectOption.test.tsx.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FormSelectOption should match snapshot (auto-generated) 1`] = `
-
    
+
   
-
    
+
 `;
diff --git a/packages/react-core/src/components/FormSelect/__tests__/Generated/__snapshots__/FormSelectOptionGroup.test.tsx.snap b/packages/react-core/src/components/FormSelect/__tests__/Generated/__snapshots__/FormSelectOptionGroup.test.tsx.snap
index edd43ce9483..2aa0cf1ec40 100644
--- a/packages/react-core/src/components/FormSelect/__tests__/Generated/__snapshots__/FormSelectOptionGroup.test.tsx.snap
+++ b/packages/react-core/src/components/FormSelect/__tests__/Generated/__snapshots__/FormSelectOptionGroup.test.tsx.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FormSelectOptionGroup should match snapshot (auto-generated) 1`] = `
-
    
+
   
     ReactNode
   
-
    
+
 `;
diff --git a/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap b/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap
index 2cf1a416d87..3a97adeaca3 100644
--- a/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap
+++ b/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap
@@ -1,19 +1,266 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FormSelect Disabled FormSelect input  1`] = `""`;
+exports[`FormSelect Disabled FormSelect input  1`] = `
+
+  
+
+`;
 
-exports[`FormSelect FormSelect input with aria-label does not generate console error 1`] = `""`;
+exports[`FormSelect FormSelect input with aria-label does not generate console error 1`] = `
+
+  
+
+`;
 
-exports[`FormSelect FormSelect input with id does not generate console error 1`] = `""`;
+exports[`FormSelect FormSelect input with id does not generate console error 1`] = `
+
+  
+
+`;
 
-exports[`FormSelect FormSelect input with no aria-label or id generates console error 1`] = `""`;
+exports[`FormSelect FormSelect input with no aria-label or id generates console error 1`] = `
+
+  
+
+`;
 
-exports[`FormSelect Grouped FormSelect input 1`] = `""`;
+exports[`FormSelect Grouped FormSelect input 1`] = `
+
+  
+
+`;
 
-exports[`FormSelect Simple FormSelect input 1`] = `""`;
+exports[`FormSelect Simple FormSelect input 1`] = `
+
+  
+
+`;
 
-exports[`FormSelect invalid FormSelect input 1`] = `""`;
+exports[`FormSelect invalid FormSelect input 1`] = `
+
+  
+
+`;
 
-exports[`FormSelect validated success FormSelect input 1`] = `""`;
+exports[`FormSelect validated success FormSelect input 1`] = `
+
+  
+
+`;
 
-exports[`FormSelect validated warning FormSelect input 1`] = `""`;
+exports[`FormSelect validated warning FormSelect input 1`] = `
+
+  
+
+`;
diff --git a/packages/react-core/src/components/HelperText/__tests__/HelperText.test.tsx b/packages/react-core/src/components/HelperText/__tests__/HelperText.test.tsx
index de882946619..e552b46f90c 100644
--- a/packages/react-core/src/components/HelperText/__tests__/HelperText.test.tsx
+++ b/packages/react-core/src/components/HelperText/__tests__/HelperText.test.tsx
@@ -6,61 +6,61 @@ import { CheckIcon } from '@patternfly/react-icons';
 
 describe('HelperText', () => {
   test('simple helper text renders successfully', () => {
-    const view = render(
+    const { asFragment } = render(
       
         help test text
       
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   Object.values(['default', 'indeterminate', 'warning', 'success', 'invalid']).forEach(variant => {
     test(`${variant} helper text variant applies successfully`, () => {
-      const view = render(
-        
+      const { asFragment } = render(
+        
           {variant} help test text
         
       );
-      expect(view.container).toMatchSnapshot();
+      expect(asFragment()).toMatchSnapshot();
     });
   });
 
   test('variant comonent helper text renders properly', () => {
-    const view = render(
+    const { asFragment } = render(
       
         help test text 1
         help test text 2
       
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('icon helper text renders properly', () => {
-    const view = render(
+    const { asFragment } = render(
       
         }>help test text
       
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('dynamic helper text renders successfully', () => {
-    const view = render(
+    const { asFragment } = render(
       
         help test text
       
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('helper text block renders successfully', () => {
-    const view = render(
+    const { asFragment } = render(
       
         help test text 1
         help test text 2
         help test text 3
       
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/packages/react-core/src/components/HelperText/__tests__/__snapshots__/HelperText.test.tsx.snap b/packages/react-core/src/components/HelperText/__tests__/__snapshots__/HelperText.test.tsx.snap
index 4f8c4d9d25e..c7f1dec8744 100644
--- a/packages/react-core/src/components/HelperText/__tests__/__snapshots__/HelperText.test.tsx.snap
+++ b/packages/react-core/src/components/HelperText/__tests__/__snapshots__/HelperText.test.tsx.snap
@@ -1,22 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HelperText default helper text variant applies successfully 1`] = `
-
    
+
   
    
     
-      default
-       help test text
+      default help test text
     
   
    
-
    
+
 `;
 
 exports[`HelperText dynamic helper text renders successfully 1`] = `
-
    
+
   
    
@@ -48,11 +47,11 @@ exports[`HelperText dynamic helper text renders successfully 1`] = `
       
     
    
   
    
-
    
+
 `;
 
 exports[`HelperText helper text block renders successfully 1`] = `
-
    
+
   
    
@@ -84,11 +83,11 @@ exports[`HelperText helper text block renders successfully 1`] = `
       
     
    
   
    
-
+
 `;
 
 exports[`HelperText icon helper text renders properly 1`] = `
-
    
+
   
    
@@ -120,41 +119,39 @@ exports[`HelperText icon helper text renders properly 1`] = `
       
     
    
   
    
-
+
 `;
 
 exports[`HelperText indeterminate helper text variant applies successfully 1`] = `
-
    
+
   
    
     
-      indeterminate
-       help test text
+      indeterminate help test text
     
   
    
-
    
+
 `;
 
 exports[`HelperText invalid helper text variant applies successfully 1`] = `
-
    
+
   
    
     
-      invalid
-       help test text
+      invalid help test text
     
   
    
-
    
+
 `;
 
 exports[`HelperText simple helper text renders successfully 1`] = `
-
    
+
   
    
@@ -168,26 +165,25 @@ exports[`HelperText simple helper text renders successfully 1`] = `
       
     
    
   
    
-
+
 `;
 
 exports[`HelperText success helper text variant applies successfully 1`] = `
-
    
+
   
    
     
-      success
-       help test text
+      success help test text
     
   
    
-
    
+
 `;
 
 exports[`HelperText variant comonent helper text renders properly 1`] = `
-
    
+
   
      
@@ -210,20 +206,19 @@ exports[`HelperText variant comonent helper text renders properly 1`] = `
       
     
   
    
-
    
+
 `;
 
 exports[`HelperText warning helper text variant applies successfully 1`] = `
-
    
+
   
    
     
-      warning
-       help test text
+      warning help test text
     
   
    
-
    
+
 `;
diff --git a/packages/react-core/src/components/Hint/__tests__/Hint.test.tsx b/packages/react-core/src/components/Hint/__tests__/Hint.test.tsx
index 81d0f2f4b2a..c59ce9a96fa 100644
--- a/packages/react-core/src/components/Hint/__tests__/Hint.test.tsx
+++ b/packages/react-core/src/components/Hint/__tests__/Hint.test.tsx
@@ -6,12 +6,12 @@ import { HintTitle } from '../HintTitle';
 import { HintFooter } from '../HintFooter';
 
 test('simple hint', () => {
-  const view = render(
+  const { asFragment } = render(
     
       Title
       Body
       Footer
     
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/Hint/__tests__/__snapshots__/Hint.test.tsx.snap b/packages/react-core/src/components/Hint/__tests__/__snapshots__/Hint.test.tsx.snap
index 13d39c9092e..e70e2dc0a55 100644
--- a/packages/react-core/src/components/Hint/__tests__/__snapshots__/Hint.test.tsx.snap
+++ b/packages/react-core/src/components/Hint/__tests__/__snapshots__/Hint.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`simple hint 1`] = `
-
    
+
   
    
@@ -24,5 +24,5 @@ exports[`simple hint 1`] = `
       Footer
     
    
   
    
-
+
 `;
diff --git a/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx b/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx
index b040974b2eb..7580d6d0070 100644
--- a/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx
+++ b/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx
@@ -11,13 +11,13 @@ describe('InputGroup', () => {
     // In this test, TextInput is a form-control component and Button is not.
     // If Button has an id props, this should be used in aria-describedby.
     render(
-      
+      
         
         
       
     );
-    expect(screen.getByLabelText('some text').getAttribute('aria-describedby')).toEqual('button-id');
+    expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'button-id');
   });
 });
diff --git a/packages/react-core/src/components/InputGroup/__tests__/InputGroupText.test.tsx b/packages/react-core/src/components/InputGroup/__tests__/InputGroupText.test.tsx
index de445aa93cf..a4ad334dc0e 100644
--- a/packages/react-core/src/components/InputGroup/__tests__/InputGroupText.test.tsx
+++ b/packages/react-core/src/components/InputGroup/__tests__/InputGroupText.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
 
 import { InputGroupText, InputGroupTextVariant } from '../InputGroupText';
 
diff --git a/packages/react-core/src/components/JumpLinks/__tests__/JumpLinks.test.tsx b/packages/react-core/src/components/JumpLinks/__tests__/JumpLinks.test.tsx
index 1f41ba70aec..705d27a572b 100644
--- a/packages/react-core/src/components/JumpLinks/__tests__/JumpLinks.test.tsx
+++ b/packages/react-core/src/components/JumpLinks/__tests__/JumpLinks.test.tsx
@@ -5,51 +5,51 @@ import { JumpLinksItem } from '../JumpLinksItem';
 import { JumpLinksList } from '../JumpLinksList';
 
 test('simple jumplinks', () => {
-  const view = render(
+  const { asFragment } = render(
     
       Inactive section
       Active section
       Inactive section
     
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('jumplinks centered', () => {
-  const view = render(
+  const { asFragment } = render(
     
       Inactive section
       Active section
       Inactive section
     
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('jumplinks with label', () => {
-  const view = render(
+  const { asFragment } = render(
     
       Inactive section
       Active section
       Inactive section
     
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('vertical with label', () => {
-  const view = render(
+  const { asFragment } = render(
     
       Inactive section
       Active section
       Inactive section
     
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('expandable vertical with subsection', () => {
-  const view = render(
+  const { asFragment } = render(
     
       Inactive section
       
@@ -64,5 +64,5 @@ test('expandable vertical with subsection', () => {
       Inactive section
     
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap b/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap
index 66186fe296d..a31adaba723 100644
--- a/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap
+++ b/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`expandable vertical with subsection 1`] = `
-
    
+
   
    
@@ -159,11 +157,11 @@ exports[`expandable vertical with subsection 1`] = `
       
     
   
-
+
 `;
 
 exports[`jumplinks centered 1`] = `
-
    
+
   
    
   
-
+
 `;
 
 exports[`jumplinks with label 1`] = `
-
    
+
   
    
   
-
+
 `;
 
 exports[`simple jumplinks 1`] = `
-
    
+
   
    
   
-
+
 `;
 
 exports[`vertical with label 1`] = `
-
    
+
   
    
   
-
+
 `;
diff --git a/packages/react-core/src/components/Label/__tests__/Label.test.tsx b/packages/react-core/src/components/Label/__tests__/Label.test.tsx
index 5f34065ce53..9e62765bbc1 100644
--- a/packages/react-core/src/components/Label/__tests__/Label.test.tsx
+++ b/packages/react-core/src/components/Label/__tests__/Label.test.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
 
 import { Label } from '../Label';
 
@@ -10,123 +9,91 @@ const labelColors = ['blue', 'cyan', 'green', 'orange', 'purple', 'red', 'grey']
 
 describe('Label', () => {
   test('renders', () => {
-    render();
-    expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with outline variant', () => {
-    render(
-      
-    );
-    expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with isCompact', () => {
-    render(
-      
-    );
-    expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('label with href', () => {
-    render(
-      
-    );
-    expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('label with href with outline variant', () => {
-    render(
-