Skip to content

refactor: remove real timers warning in User Event #1654

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.

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

Merged
merged 2 commits into from
Aug 28, 2024
Merged
Changes from all commits
Commits
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
17 changes: 0 additions & 17 deletions src/user-event/press/__tests__/longPress.real-timers.test.tsx
Original file line number Diff line number Diff line change
@@ -2,13 +2,11 @@ import React from 'react';
import { Pressable, Text } from 'react-native';
import { render, screen } from '../../../pure';
import { userEvent } from '../..';
import * as WarnAboutRealTimers from '../../utils/warn-about-real-timers';

describe('userEvent.longPress with real timers', () => {
beforeEach(() => {
jest.useRealTimers();
jest.restoreAllMocks();
jest.spyOn(WarnAboutRealTimers, 'warnAboutRealTimersIfNeeded').mockImplementation();
});

test('calls onLongPress if the delayLongPress is the default one', async () => {
@@ -90,18 +88,3 @@ describe('userEvent.longPress with real timers', () => {
expect(mockOnLongPress).toHaveBeenCalled();
});
});

test('warns about using real timers with userEvent', async () => {
jest.restoreAllMocks();
const mockConsoleWarn = jest.spyOn(console, 'warn').mockImplementation();

render(<Pressable testID="pressable" />);

await userEvent.longPress(screen.getByTestId('pressable'));

expect(mockConsoleWarn.mock.calls[0][0]).toMatchInlineSnapshot(`
"It is recommended to use userEvent with fake timers
Some events involve duration so your tests may take a long time to run.
For instance calling userEvent.longPress with real timers will take 500 ms."
`);
});
17 changes: 0 additions & 17 deletions src/user-event/press/__tests__/press.real-timers.test.tsx
Original file line number Diff line number Diff line change
@@ -10,13 +10,11 @@ import {
import { createEventLogger, getEventsNames } from '../../../test-utils';
import { render, screen } from '../../..';
import { userEvent } from '../..';
import * as WarnAboutRealTimers from '../../utils/warn-about-real-timers';

describe('userEvent.press with real timers', () => {
beforeEach(() => {
jest.useRealTimers();
jest.restoreAllMocks();
jest.spyOn(WarnAboutRealTimers, 'warnAboutRealTimersIfNeeded').mockImplementation();
});

test('calls onPressIn, onPress and onPressOut prop of touchable', async () => {
@@ -301,18 +299,3 @@ describe('userEvent.press with real timers', () => {
expect(mockOnPress).toHaveBeenCalled();
});
});

test('warns about using real timers with userEvent', async () => {
jest.restoreAllMocks();
const mockConsoleWarn = jest.spyOn(console, 'warn').mockImplementation();

render(<Pressable testID="pressable" />);

await userEvent.press(screen.getByTestId('pressable'));

expect(mockConsoleWarn.mock.calls[0][0]).toMatchInlineSnapshot(`
"It is recommended to use userEvent with fake timers
Some events involve duration so your tests may take a long time to run.
For instance calling userEvent.longPress with real timers will take 500 ms."
`);
});
4 changes: 1 addition & 3 deletions src/user-event/press/press.ts
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ import { isPointerEventEnabled } from '../../helpers/pointer-events';
import { isHostText, isHostTextInput } from '../../helpers/host-component-names';
import { EventBuilder } from '../event-builder';
import { UserEventConfig, UserEventInstance } from '../setup';
import { dispatchEvent, wait, warnAboutRealTimersIfNeeded } from '../utils';
import { dispatchEvent, wait } from '../utils';
import { DEFAULT_MIN_PRESS_DURATION } from './constants';

export interface PressOptions {
@@ -69,8 +69,6 @@ const emitPressablePressEvents = async (
element: ReactTestInstance,
options: BasePressOptions,
) => {
warnAboutRealTimersIfNeeded();

await wait(config);

dispatchEvent(element, 'responderGrant', EventBuilder.Common.responderGrant());
43 changes: 0 additions & 43 deletions src/user-event/utils/__tests__/warn-about-real-timers.test.ts

This file was deleted.

1 change: 0 additions & 1 deletion src/user-event/utils/index.ts
Original file line number Diff line number Diff line change
@@ -2,4 +2,3 @@ export * from './content-size';
export * from './dispatch-event';
export * from './text-range';
export * from './wait';
export * from './warn-about-real-timers';
17 changes: 0 additions & 17 deletions src/user-event/utils/warn-about-real-timers.ts

This file was deleted.

16 changes: 10 additions & 6 deletions website/docs/12.x/docs/api/events/user-event.mdx
Original file line number Diff line number Diff line change
@@ -53,7 +53,9 @@ await user.press(element);

This helper simulates a press on any pressable element, e.g. `Pressable`, `TouchableOpacity`, `Text`, `TextInput`, etc. Unlike `fireEvent.press()`, a more straightforward API that will only call the `onPress` prop, this function simulates the entire press interaction in a more realistic way by reproducing the event sequence emitted by React Native runtime. This helper will trigger additional events like `pressIn` and `pressOut`.

## `longPress()` \{#long-press}
This event will take a minimum of 130 ms to run due to the internal React Native logic. Consider using fake timers to speed up test execution for tests involving `press` and `longPress` interactions.

## `longPress()`

```ts
longPress(
@@ -69,7 +71,9 @@ const user = userEvent.setup();
await user.longPress(element);
```

Simulates a long press user interaction. In React Native, the `longPress` event is emitted when the press duration exceeds the long press threshold (by default, 500 ms). In other aspects, this action behaves similarly to regular `press` action, e.g., by emitting `pressIn` and `pressOut` events. The press duration is customizable through the options. This should be useful if you use the `delayLongPress` prop. When using real timers, this will take 500 ms, so it is highly recommended to use that API with fake timers to prevent the test from taking a long time to run.
Simulates a long press user interaction. In React Native, the `longPress` event is emitted when the press duration exceeds the long press threshold (by default, 500 ms). In other aspects, this action behaves similarly to regular `press` action, e.g., by emitting `pressIn` and `pressOut` events. The press duration is customizable through the options. This should be useful if you use the `delayLongPress` prop.

This event will, by default, take 500 ms to run. Due to internal React Native logic, it will take at least 130 ms regardless of the duration option passed. Consider using fake timers to speed up test execution for tests involving `press` and `longPress` interactions.

### Options {#longpress-options}

@@ -107,7 +111,7 @@ This function will add text to the text already present in the text input (as sp
- `skipPress` - if true, `pressIn` and `pressOut` events will not be triggered.
- `submitEditing` - if true, `submitEditing` event will be triggered after typing the text.

### Sequence of events
### Sequence of events {#type-sequence}

The sequence of events depends on the `multiline` prop and the passed options.

@@ -156,7 +160,7 @@ This helper simulates the user clearing the content of a `TextInput` element.

This function supports only host `TextInput` elements. Passing other element types will result in throwing an error.

### Sequence of events
### Sequence of events {#clear-sequence}

Events will not be emitted if the `editable` prop is set to `false`.

@@ -200,7 +204,7 @@ This helper simulates the user pasting given text to a `TextInput` element.

This function supports only host `TextInput` elements. Passing other element types will result in throwing an error.

### Sequence of events
### Sequence of events {#paste-sequence}

Events will not be emitted if the `editable` prop is set to `false`.

@@ -278,7 +282,7 @@ This function will remember where the last scroll ended, so subsequent scroll in

To simulate a `FlatList` (and other controls based on `VirtualizedList`) scrolling, you should pass the `contentSize` and `layoutMeasurement` options, which enable the underlying logic to update the currently visible window.

### Sequence of events
### Sequence of events {#scroll-sequence}

The sequence of events depends on whether the scroll includes an optional momentum scroll component.