{
- beforeEach(() => {
- container = document.createElement('div');
- document.body.appendChild(container);
- });
-
- afterEach(() => {
- document.body.removeChild(container);
- container = null;
- });
-
it('matches snapshot', () => {
const wrapper = create(
@@ -40,14 +23,12 @@ describe('DevToolsToggle', () => {
});
it('renders a loading spinner when a user data is fetched', () => {
- act(() => {
- render(
-
-
- ,
- container
- );
- });
+ const { container } = render(
+
+
+
+ );
+
expect(
container.querySelector('.amp-spinner-container')
).not.toBeNull();
@@ -63,29 +44,19 @@ describe('DevToolsToggle', () => {
});
it('can be toggled', () => {
- act(() => {
- render(
-
-
- ,
- container
- );
- });
+ const { container } = render(
+
+
+
+ );
+
expect(container.querySelector('input:checked')).toBeNull();
- act(() => {
- container
- .querySelector('input')
- .dispatchEvent(new global.MouseEvent('click'));
- });
+ fireEvent(container.querySelector('input'), new MouseEvent('click'));
expect(container.querySelector('input:checked')).not.toBeNull();
- act(() => {
- container
- .querySelector('input')
- .dispatchEvent(new global.MouseEvent('click'));
- });
+ fireEvent(container.querySelector('input'), new MouseEvent('click'));
expect(container.querySelector('input:checked')).toBeNull();
});
diff --git a/assets/src/components/loading/test/loading.js b/assets/src/components/loading/test/loading.js
index 7329e395130..dc70e28dcca 100644
--- a/assets/src/components/loading/test/loading.js
+++ b/assets/src/components/loading/test/loading.js
@@ -1,32 +1,15 @@
/**
* External dependencies
*/
-import { act } from 'react-dom/test-utils';
+import { render } from '@testing-library/react';
import { create } from 'react-test-renderer';
-/**
- * WordPress dependencies
- */
-import { render } from '@wordpress/element';
-
/**
* Internal dependencies
*/
import { Loading } from '..';
-let container;
-
describe('the Loading component', () => {
- beforeEach(() => {
- container = document.createElement('div');
- document.body.appendChild(container);
- });
-
- afterEach(() => {
- document.body.removeChild(container);
- container = null;
- });
-
it('matches the snapshots', () => {
const wrapperBlock = create();
const wrapperInline = create();
@@ -36,9 +19,7 @@ describe('the Loading component', () => {
});
it('renders a loading spinner', () => {
- act(() => {
- render(, container);
- });
+ const { container } = render();
expect(
container.querySelector('.amp-spinner-container')
@@ -50,9 +31,7 @@ describe('the Loading component', () => {
});
it('renders an inline loading spinner', () => {
- act(() => {
- render(, container);
- });
+ const { container } = render();
expect(
container.querySelector('.amp-spinner-container--inline')
diff --git a/assets/src/components/nav-menu/test/nav-menu.js b/assets/src/components/nav-menu/test/nav-menu.js
index 74e6c6087d4..2467013f236 100644
--- a/assets/src/components/nav-menu/test/nav-menu.js
+++ b/assets/src/components/nav-menu/test/nav-menu.js
@@ -1,21 +1,14 @@
/**
* External dependencies
*/
-import { act } from 'react-dom/test-utils';
+import { render, fireEvent } from '@testing-library/react';
import { create } from 'react-test-renderer';
-/**
- * WordPress dependencies
- */
-import { render } from '@wordpress/element';
-
/**
* Internal dependencies
*/
import { NavMenu } from '../index';
-let container;
-
const links = [
{
url: 'https://example.com/foo',
@@ -30,16 +23,6 @@ const links = [
];
describe('NavMenu', () => {
- beforeEach(() => {
- container = document.createElement('div');
- document.body.appendChild(container);
- });
-
- afterEach(() => {
- document.body.removeChild(container);
- container = null;
- });
-
it('matches the snapshot', () => {
const wrapper = create();
@@ -47,9 +30,7 @@ describe('NavMenu', () => {
});
it('renders a nav menu with a list of links', () => {
- act(() => {
- render(, container);
- });
+ const { container } = render();
expect(container.querySelector('nav')).not.toBeNull();
expect(container.querySelector('ul')).not.toBeNull();
@@ -57,9 +38,7 @@ describe('NavMenu', () => {
});
it('contains correct links', () => {
- act(() => {
- render(, container);
- });
+ const { container } = render();
expect(container.querySelector('nav').textContent).toBe('FooBar');
expect(container.querySelectorAll('a')).toHaveLength(2);
@@ -80,13 +59,11 @@ describe('NavMenu', () => {
it('calls the handler function on click', () => {
const handler = jest.fn();
- act(() => {
- render(, container);
- });
+ const { container } = render(
+
+ );
- act(() => {
- container.querySelector('a').click();
- });
+ fireEvent.click(container.querySelector('a'));
expect(handler).toHaveBeenCalledTimes(1);
diff --git a/assets/src/components/plugins-context-provider/test/use-normalized-plugins-data.js b/assets/src/components/plugins-context-provider/test/use-normalized-plugins-data.js
index 2d3e28a9f50..6899c6b3349 100644
--- a/assets/src/components/plugins-context-provider/test/use-normalized-plugins-data.js
+++ b/assets/src/components/plugins-context-provider/test/use-normalized-plugins-data.js
@@ -1,12 +1,7 @@
/**
* External dependencies
*/
-import { act } from 'react-dom/test-utils';
-
-/**
- * WordPress dependencies
- */
-import { render, unmountComponentAtNode } from '@wordpress/element';
+import { render } from '@testing-library/react';
/**
* Internal dependencies
@@ -18,8 +13,6 @@ import { useNormalizedPluginsData } from '../use-normalized-plugins-data';
jest.mock('../index');
describe('useNormalizedPluginsData', () => {
- let container = null;
-
function setup({ fetchingPlugins, plugins }) {
let returnValue;
@@ -28,34 +21,20 @@ describe('useNormalizedPluginsData', () => {
return null;
}
- act(() => {
- render(
-
-
-
-
- ,
- container
- );
- });
+ render(
+
+
+
+
+
+ );
return returnValue;
}
- beforeEach(() => {
- container = document.createElement('div');
- document.body.appendChild(container);
- });
-
- afterEach(() => {
- unmountComponentAtNode(container);
- container.remove();
- container = null;
- });
-
it('returns an empty object if plugins are being fetched', () => {
const normalizedPluginsData = setup({
fetchingPlugins: true,
diff --git a/assets/src/components/progress-bar/test/progress-bar.js b/assets/src/components/progress-bar/test/progress-bar.js
index 82764459a51..56f10f93c21 100644
--- a/assets/src/components/progress-bar/test/progress-bar.js
+++ b/assets/src/components/progress-bar/test/progress-bar.js
@@ -1,32 +1,15 @@
/**
* External dependencies
*/
-import { act } from 'react-dom/test-utils';
+import { render } from '@testing-library/react';
import { create } from 'react-test-renderer';
-/**
- * WordPress dependencies
- */
-import { render } from '@wordpress/element';
-
/**
* Internal dependencies
*/
import { ProgressBar } from '../index';
-let container;
-
describe('ProgressBar', () => {
- beforeEach(() => {
- container = document.createElement('div');
- document.body.appendChild(container);
- });
-
- afterEach(() => {
- document.body.removeChild(container);
- container = null;
- });
-
it('matches the snapshot', () => {
const wrapper = create();
@@ -34,9 +17,7 @@ describe('ProgressBar', () => {
});
it('renders a progress bar', () => {
- act(() => {
- render(, container);
- });
+ const { container } = render();
expect(
container.querySelector('.progress-bar[role="progressbar"]')
@@ -53,9 +34,7 @@ describe('ProgressBar', () => {
});
it('the bar is shifted correctly', () => {
- act(() => {
- render(, container);
- });
+ const { container } = render();
expect(
container.querySelector('.progress-bar[aria-valuenow="75"]')
@@ -69,9 +48,7 @@ describe('ProgressBar', () => {
});
it('does not allow the bar to be completely out of view for low values', () => {
- act(() => {
- render(, container);
- });
+ const { container } = render();
expect(
container.querySelector('.progress-bar[aria-valuenow="1"]')
diff --git a/assets/src/components/redirect-toggle/test/__snapshots__/redirect-toggle.js.snap b/assets/src/components/redirect-toggle/test/__snapshots__/redirect-toggle.js.snap
index 046cb15de9d..a3f2ac19f2d 100644
--- a/assets/src/components/redirect-toggle/test/__snapshots__/redirect-toggle.js.snap
+++ b/assets/src/components/redirect-toggle/test/__snapshots__/redirect-toggle.js.snap
@@ -33,7 +33,9 @@ exports[`RedirectToggle matches snapshot 1`] = `
/>