This rule aims to avoid the usage of side effects actions (fireEvent or userEvent) inside waitFor.
Since waitFor is intended for things that have a non-deterministic amount of time between the action you performed and the assertion passing,
the callback can be called (or checked for errors) a non-deterministic number of times and frequency.
This will make your side-effect run multiple times.
Example of incorrect code for this rule:
const foo = async () => {
await waitFor(() => {
fireEvent.keyDown(input, { key: 'ArrowDown' });
expect(b).toEqual('b');
});
// or
await waitFor(function() {
fireEvent.keyDown(input, { key: 'ArrowDown' });
expect(b).toEqual('b');
});
// or
await waitFor(() => {
userEvent.keyDown(input, { key: 'ArrowDown' });
expect(b).toEqual('b');
});
// or
await waitFor(function() {
userEvent.keyDown(input, { key: 'ArrowDown' });
expect(b).toEqual('b');
});
};Examples of correct code for this rule:
const foo = async () => {
fireEvent.keyDown(input, { key: 'ArrowDown' });
await waitFor(() => {
expect(b).toEqual('b');
});
// or
fireEvent.keyDown(input, { key: 'ArrowDown' });
await waitFor(function() {
expect(b).toEqual('b');
});
// or
userEvent.keyDown(input, { key: 'ArrowDown' });
await waitFor(() => {
expect(b).toEqual('b');
});
// or
userEvent.keyDown(input, { key: 'ArrowDown' });
await waitFor(function() {
expect(b).toEqual('b');
});
};