diff --git a/packages/a11y/src/test/add-container.test.js b/packages/a11y/src/test/add-container.test.js
index c7e351dd38ef28..20af3cbb82ef0a 100644
--- a/packages/a11y/src/test/add-container.test.js
+++ b/packages/a11y/src/test/add-container.test.js
@@ -11,12 +11,13 @@ describe( 'addContainer', () => {
expect( container ).not.toBeNull();
expect( container.className ).toBe( 'a11y-speak-region' );
expect( container.id ).toBe( 'a11y-speak-polite' );
- expect( container.getAttribute( 'style' ) ).not.toBeNull();
- expect( container.getAttribute( 'aria-live' ) ).toBe( 'polite' );
- expect( container.getAttribute( 'aria-relevant' ) ).toBe(
+ expect( container ).toHaveAttribute( 'style' );
+ expect( container ).toHaveAttribute( 'aria-live', 'polite' );
+ expect( container ).toHaveAttribute(
+ 'aria-relevant',
'additions text'
);
- expect( container.getAttribute( 'aria-atomic' ) ).toBe( 'true' );
+ expect( container ).toHaveAttribute( 'aria-atomic', 'true' );
} );
} );
@@ -27,12 +28,13 @@ describe( 'addContainer', () => {
expect( container ).not.toBeNull();
expect( container.className ).toBe( 'a11y-speak-region' );
expect( container.id ).toBe( 'a11y-speak-assertive' );
- expect( container.getAttribute( 'style' ) ).not.toBeNull();
- expect( container.getAttribute( 'aria-live' ) ).toBe( 'assertive' );
- expect( container.getAttribute( 'aria-relevant' ) ).toBe(
+ expect( container ).toHaveAttribute( 'style' );
+ expect( container ).toHaveAttribute( 'aria-live', 'assertive' );
+ expect( container ).toHaveAttribute(
+ 'aria-relevant',
'additions text'
);
- expect( container.getAttribute( 'aria-atomic' ) ).toBe( 'true' );
+ expect( container ).toHaveAttribute( 'aria-atomic', 'true' );
} );
} );
@@ -43,12 +45,13 @@ describe( 'addContainer', () => {
expect( container ).not.toBeNull();
expect( container.className ).toBe( 'a11y-speak-region' );
expect( container.id ).toBe( 'a11y-speak-polite' );
- expect( container.getAttribute( 'style' ) ).not.toBeNull();
- expect( container.getAttribute( 'aria-live' ) ).toBe( 'polite' );
- expect( container.getAttribute( 'aria-relevant' ) ).toBe(
+ expect( container ).toHaveAttribute( 'style' );
+ expect( container ).toHaveAttribute( 'aria-live', 'polite' );
+ expect( container ).toHaveAttribute(
+ 'aria-relevant',
'additions text'
);
- expect( container.getAttribute( 'aria-atomic' ) ).toBe( 'true' );
+ expect( container ).toHaveAttribute( 'aria-atomic', 'true' );
} );
} );
} );
diff --git a/packages/block-directory/src/components/downloadable-block-list-item/test/index.js b/packages/block-directory/src/components/downloadable-block-list-item/test/index.js
index e8b9ea59921d84..dca64e4920a8c8 100644
--- a/packages/block-directory/src/components/downloadable-block-list-item/test/index.js
+++ b/packages/block-directory/src/components/downloadable-block-list-item/test/index.js
@@ -62,7 +62,7 @@ describe( 'DownloadableBlockListItem', () => {
const button = screen.getByRole( 'option' );
// Keeping it false to avoid focus loss and disable it using aria-disabled.
expect( button.disabled ).toBe( false );
- expect( button.getAttribute( 'aria-disabled' ) ).toBe( 'true' );
+ expect( button ).toHaveAttribute( 'aria-disabled', 'true' );
} );
it( 'should try to install the block plugin', async () => {
diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
index aa5630d4c77b5c..c8651cb207ec1e 100644
--- a/packages/block-editor/src/components/link-control/test/index.js
+++ b/packages/block-editor/src/components/link-control/test/index.js
@@ -392,7 +392,7 @@ describe( 'Searching for a link', () => {
fauxEntitySuggestions.length
);
- expect( searchInput.getAttribute( 'aria-expanded' ) ).toBe( 'true' );
+ expect( searchInput ).toHaveAttribute( 'aria-expanded', 'true' );
// Sanity check that a search suggestion shows up corresponding to the data.
expect( searchResultElements[ 0 ] ).toHaveTextContent(
diff --git a/packages/components/src/disabled/test/index.tsx b/packages/components/src/disabled/test/index.tsx
index 4d11bcd77d0e9d..98ad10e202737a 100644
--- a/packages/components/src/disabled/test/index.tsx
+++ b/packages/components/src/disabled/test/index.tsx
@@ -25,7 +25,7 @@ describe( 'Disabled', () => {
);
// @ts-ignore
- expect( container.firstChild.hasAttribute( 'inert' ) ).toBe( true );
+ expect( container.firstChild ).toHaveAttribute( 'inert' );
} );
it( 'should cleanly un-disable via reconciliation', () => {
@@ -41,12 +41,12 @@ describe( 'Disabled', () => {
const { container, rerender } = render( );
// @ts-ignore
- expect( container.firstChild.hasAttribute( 'inert' ) ).toBe( true );
+ expect( container.firstChild ).toHaveAttribute( 'inert' );
rerender( );
// @ts-ignore
- expect( container.firstChild.hasAttribute( 'inert' ) ).toBe( false );
+ expect( container.firstChild ).not.toHaveAttribute( 'inert' );
} );
it( 'will disable or enable descendant fields based on the isDisabled prop value', () => {
@@ -59,12 +59,12 @@ describe( 'Disabled', () => {
const { rerender, container } = render( );
// @ts-ignore
- expect( container.firstChild.hasAttribute( 'inert' ) ).toBe( true );
+ expect( container.firstChild ).toHaveAttribute( 'inert' );
rerender( );
// @ts-ignore
- expect( container.firstChild.hasAttribute( 'inert' ) ).toBe( false );
+ expect( container.firstChild ).not.toHaveAttribute( 'inert' );
} );
it( 'should preserve input values when toggling the isDisabled prop', async () => {
diff --git a/packages/components/src/dropdown/test/index.js b/packages/components/src/dropdown/test/index.js
index a18e2479d37e8f..96947aca5b1282 100644
--- a/packages/components/src/dropdown/test/index.js
+++ b/packages/components/src/dropdown/test/index.js
@@ -28,9 +28,10 @@ describe( 'Dropdown', () => {
it( 'should toggle the dropdown properly', () => {
const expectButtonExpanded = ( container, expanded ) => {
expect( container.querySelectorAll( 'button' ) ).toHaveLength( 1 );
- expect(
- getButtonElement( container ).getAttribute( 'aria-expanded' )
- ).toBe( expanded.toString() );
+ expect( getButtonElement( container ) ).toHaveAttribute(
+ 'aria-expanded',
+ expanded.toString()
+ );
};
const {
diff --git a/packages/components/src/input-control/test/index.js b/packages/components/src/input-control/test/index.js
index 301d5759c0664d..699facdbbc27c7 100644
--- a/packages/components/src/input-control/test/index.js
+++ b/packages/components/src/input-control/test/index.js
@@ -40,7 +40,7 @@ describe( 'InputControl', () => {
const input = getInput();
- expect( input.getAttribute( 'type' ) ).toBe( 'number' );
+ expect( input ).toHaveAttribute( 'type', 'number' );
} );
it( 'should render label', () => {
diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.js
index 596714274ff74a..3b8bb3e553a62a 100644
--- a/packages/components/src/panel/test/body.js
+++ b/packages/components/src/panel/test/body.js
@@ -67,7 +67,7 @@ describe( 'PanelBody', () => {
let panelContent = getPanelBodyContent( container );
expect( panelContent ).toBeTruthy();
- expect( panelContent.getAttribute( 'hidden' ) ).toBe( '' );
+ expect( panelContent ).toHaveAttribute( 'hidden', '' );
rerender(
@@ -77,7 +77,7 @@ describe( 'PanelBody', () => {
panelContent = getPanelBodyContent( container );
expect( panelContent ).toBeTruthy();
- expect( panelContent.getAttribute( 'hidden' ) ).toBeNull();
+ expect( panelContent ).not.toHaveAttribute( 'hidden' );
} );
} );
diff --git a/packages/components/src/sandbox/test/index.js b/packages/components/src/sandbox/test/index.js
index 26865007b434a8..c1c096e0df5262 100644
--- a/packages/components/src/sandbox/test/index.js
+++ b/packages/components/src/sandbox/test/index.js
@@ -49,7 +49,8 @@ describe( 'Sandbox', () => {
let sandboxedIframe =
iframe.contentWindow.document.body.querySelector( '.mock-iframe' );
- expect( sandboxedIframe.getAttribute( 'src' ) ).toBe(
+ expect( sandboxedIframe ).toHaveAttribute(
+ 'src',
'https://super.embed'
);
@@ -60,7 +61,8 @@ describe( 'Sandbox', () => {
sandboxedIframe =
iframe.contentWindow.document.body.querySelector( '.mock-iframe' );
- expect( sandboxedIframe.getAttribute( 'src' ) ).toBe(
+ expect( sandboxedIframe ).toHaveAttribute(
+ 'src',
'https://another.super.embed'
);
} );
diff --git a/packages/components/src/toolbar-group/test/index.js b/packages/components/src/toolbar-group/test/index.js
index 77c4aefa759dac..e3fd756665905d 100644
--- a/packages/components/src/toolbar-group/test/index.js
+++ b/packages/components/src/toolbar-group/test/index.js
@@ -36,10 +36,8 @@ describe( 'ToolbarGroup', () => {
render( );
const toolbarButton = screen.getByLabelText( 'WordPress' );
- expect( toolbarButton.getAttribute( 'aria-pressed' ) ).toBe(
- 'false'
- );
- expect( toolbarButton.getAttribute( 'type' ) ).toBe( 'button' );
+ expect( toolbarButton ).toHaveAttribute( 'aria-pressed', 'false' );
+ expect( toolbarButton ).toHaveAttribute( 'type', 'button' );
} );
it( 'should render a list of controls with buttons and active control', () => {
@@ -56,10 +54,8 @@ describe( 'ToolbarGroup', () => {
render( );
const toolbarButton = screen.getByLabelText( 'WordPress' );
- expect( toolbarButton.getAttribute( 'aria-pressed' ) ).toBe(
- 'true'
- );
- expect( toolbarButton.getAttribute( 'type' ) ).toBe( 'button' );
+ expect( toolbarButton ).toHaveAttribute( 'aria-pressed', 'true' );
+ expect( toolbarButton ).toHaveAttribute( 'type', 'button' );
} );
it( 'should render a nested list of controls with separator between', () => {
diff --git a/packages/components/src/ui/shortcut/test/index.js b/packages/components/src/ui/shortcut/test/index.js
index 56f6ac73e4907b..09329cfdf34cf9 100644
--- a/packages/components/src/ui/shortcut/test/index.js
+++ b/packages/components/src/ui/shortcut/test/index.js
@@ -28,7 +28,8 @@ describe( 'Shortcut', () => {
};
render( );
const shortcut = screen.getByText( shortcutObject.display );
- expect( shortcut.getAttribute( 'aria-label' ) ).toBe(
+ expect( shortcut ).toHaveAttribute(
+ 'aria-label',
shortcutObject.ariaLabel
);
} );
diff --git a/packages/compose/src/hooks/use-disabled/test/index.js b/packages/compose/src/hooks/use-disabled/test/index.js
index edf01c3ee602cc..12e976a2439012 100644
--- a/packages/compose/src/hooks/use-disabled/test/index.js
+++ b/packages/compose/src/hooks/use-disabled/test/index.js
@@ -39,9 +39,9 @@ describe( 'useDisabled', () => {
const link = screen.getByRole( 'link' );
const p = container.querySelector( 'p' );
- expect( input.hasAttribute( 'inert' ) ).toBe( true );
- expect( link.hasAttribute( 'inert' ) ).toBe( true );
- expect( p.hasAttribute( 'inert' ) ).toBe( true );
+ expect( input ).toHaveAttribute( 'inert', 'true' );
+ expect( link ).toHaveAttribute( 'inert', 'true' );
+ expect( p ).toHaveAttribute( 'inert', 'true' );
} );
it( 'will disable an element rendered in an update to the component', async () => {
@@ -54,7 +54,7 @@ describe( 'useDisabled', () => {
const button = screen.getByText( 'Button' );
await waitFor( () => {
- expect( button.hasAttribute( 'inert' ) ).toBe( true );
+ expect( button ).toHaveAttribute( 'inert', 'true' );
} );
} );
} );