Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix async timing in tests using user-event #40790

Merged
merged 9 commits into from
May 3, 2022
Merged

Fix async timing in tests using user-event #40790

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1671e34
Add `await` in front of user typing events in Unit Control tests, rem…
ciampo May 3, 2022
3710490
Use fake timers
ciampo May 3, 2022
73a2aff
Click document.body to trigger blur event
ciampo May 3, 2022
9bd009e
Move local state to each test to reduce coupling
ciampo May 3, 2022
44d9511
Use util to get select options
ciampo May 3, 2022
d29a22f
Refactor user-event setup as per guidelines
ciampo May 3, 2022
79bdd56
Apply same changes to `FormFileUpload`
ciampo May 3, 2022
2e6c89a
Typo
ciampo May 3, 2022
f5b73fb
CHANGELOG
ciampo May 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 15 additions & 12 deletions packages/components/src/form-file-upload/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { render as RTLrender, screen } from '@testing-library/react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

/**
Expand All @@ -14,15 +14,9 @@ import FormFileUpload from '../';
*/
const { File } = window;

function render( jsx ) {
return {
user: userEvent.setup( {
// Avoids timeout errors (https://github.com/testing-library/user-event/issues/565#issuecomment-1064579531).
delay: null,
} ),
...RTLrender( jsx ),
};
}
const user = userEvent.setup( {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@testing-library recommends that setup() is called inline once per test.

https://testing-library.com/docs/user-event/intro#writing-tests-with-userevent

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I must have missed that part when looking at the new v14 docs, thank you for flagging it! Opened #40839 as a follow-up with those changes

advanceTimers: jest.advanceTimersByTime,
} );

// @testing-library/user-event considers changing <input type="file"> to a string as a change, but it do not occur on real browsers, so the comparisons will be against this result
const fakePath = expect.objectContaining( {
Expand All @@ -32,6 +26,15 @@ const fakePath = expect.objectContaining( {
} );

describe( 'FormFileUpload', () => {
beforeEach( () => {
jest.useFakeTimers();
} );

afterEach( () => {
jest.runOnlyPendingTimers();
jest.useRealTimers();
} );

it( 'should show an Icon Button and a hidden input', () => {
render( <FormFileUpload>My Upload Button</FormFileUpload> );

Expand All @@ -44,7 +47,7 @@ describe( 'FormFileUpload', () => {
it( 'should not fire a change event after selecting the same file', async () => {
const onChange = jest.fn();

const { user } = render(
render(
<FormFileUpload onChange={ onChange }>
My Upload Button
</FormFileUpload>
Expand All @@ -67,7 +70,7 @@ describe( 'FormFileUpload', () => {
it( 'should fire a change event after selecting the same file if the value was reset in between', async () => {
const onChange = jest.fn();

const { user } = render(
render(
<FormFileUpload
onClick={ jest.fn( ( e ) => ( e.target.value = '' ) ) }
onChange={ onChange }
Expand Down
Loading