Skip to content

Commit

Permalink
fix fake timers
Browse files Browse the repository at this point in the history
  • Loading branch information
@AnCichocka
AnCichocka committed Oct 17, 2024
1 parent c582029 commit 5c5ec89
Showing 1 changed file with 17 additions and 36 deletions.
53 changes: 17 additions & 36 deletions versioned_docs/version-7.x/testing.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -302,12 +302,11 @@ test('navigates to settings by tab bar button press', () => {
const TabNavigation = createStaticNavigation(TabNavigator);
render(<TabNavigation />);

act(() => jest.runAllTimers());

const button = screen.getByRole('button', { name: 'Settings, tab, 2 of 2' });

const event = {};
fireEvent.press(button, event);
act(() => jest.runAllTimers());

expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
});
Expand All @@ -332,12 +331,11 @@ test('navigates to settings by tab bar button press', () => {
</NavigationContainer>
);

act(() => jest.runAllTimers());

const button = screen.getByRole('button', { name: 'Settings, tab, 2 of 2' });

const event = {};
fireEvent.press(button, event);
act(() => jest.runAllTimers());

expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
});
Expand All @@ -363,10 +361,7 @@ const event = {};
fireEvent.press(button, event);
```

Sometimes navigation animations need some time to finish and render screen's content. You need to wait until animations finish before querying components. Therefore, you have to use `fake timers`. [`Fake Timers`](https://jestjs.io/docs/timer-mocks) replace real implementation of times function to use fake clock ticks. They allow you to instantly skip animation time and avoid getting state change error.

<Tabs>
<TabItem value="static" label="Static">
Sometimes navigation animations need some time to finish. You need to wait until animations finish before querying components. Therefore, you have to use `fake timers`. [`Fake Timers`](https://jestjs.io/docs/timer-mocks) replace real implementation of times function to use fake clock ticks. They allow you to instantly skip animations time and avoid getting state change error.

```js
// Enable fake timers
Expand All @@ -378,16 +373,6 @@ jest.useFakeTimers();
act(() => jest.runAllTimers());
```

</TabItem>
<TabItem value="dynamic" label="Dynamic">

```js

```

</TabItem>
</Tabs>

### Example 3

Always displays settings screen after tab bar settings button press.
Expand Down Expand Up @@ -533,22 +518,18 @@ export function TabNavigator() {
<TabItem value="static" label="Static" default>

```js
import '@testing-library/react-native/extend-expect';

import { expect, jest, test } from '@jest/globals';
import { createStaticNavigation } from '@react-navigation/native';
import { act, fireEvent, render, screen } from '@testing-library/react-native';

import { TabNavigator } from './TabNavigator';

test('always displays settings screen after tab bar settings button press', async () => {
test('always displays settings screen after tab bar settings button press', () => {
jest.useFakeTimers();

const TabNavigation = createStaticNavigation(TabNavigator);
render(<TabNavigation />);

act(() => jest.runAllTimers());

const homeTabButton = screen.getByRole('button', {
name: 'Home, tab, 1 of 2',
});
Expand All @@ -561,14 +542,18 @@ test('always displays settings screen after tab bar settings button press', asyn

fireEvent.press(settingsTabButton, event);
expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
act(() => jest.runAllTimers());

fireEvent.press(screen.queryByText('Go to Details'), event);
act(() => jest.runAllTimers());
expect(screen.queryByText('Details screen')).toBeOnTheScreen();

fireEvent.press(homeTabButton, event);
act(() => jest.runAllTimers());
expect(screen.queryByText('Home screen')).toBeOnTheScreen();

fireEvent.press(settingsTabButton, event);
act(() => jest.runAllTimers());
expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
});
```
Expand All @@ -577,15 +562,13 @@ test('always displays settings screen after tab bar settings button press', asyn
<TabItem value="dynamic" label="Dynamic">

```js
import '@testing-library/react-native/extend-expect';

import { expect, jest, test } from '@jest/globals';
import { NavigationContainer } from '@react-navigation/native';
import { act, fireEvent, render, screen } from '@testing-library/react-native';

import { TabNavigator } from './TabNavigator';

test('always displays settings screen after tab bar settings button press', async () => {
test('always displays settings screen after tab bar settings button press', () => {
jest.useFakeTimers();

render(
Expand All @@ -594,8 +577,6 @@ test('always displays settings screen after tab bar settings button press', asyn
</NavigationContainer>
);

act(() => jest.runAllTimers());

const homeTabButton = screen.getByRole('button', {
name: 'Home, tab, 1 of 2',
});
Expand All @@ -606,15 +587,19 @@ test('always displays settings screen after tab bar settings button press', asyn
const event = {};

fireEvent.press(settingsTabButton, event);
act(() => jest.runAllTimers());
expect(screen.queryByText('Settings screen')).toBeOnTheScreen();

fireEvent.press(screen.queryByText('Go to Details'), event);
act(() => jest.runAllTimers());
expect(screen.queryByText('Details screen')).toBeOnTheScreen();

fireEvent.press(homeTabButton, event);
act(() => jest.runAllTimers());
expect(screen.queryByText('Home screen')).toBeOnTheScreen();

fireEvent.press(settingsTabButton, event);
act(() => jest.runAllTimers());
expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
});
```
Expand Down Expand Up @@ -754,8 +739,6 @@ export function TabNavigator() {
<TabItem value="static" label="Static" default>

```js
import '@testing-library/react-native/extend-expect';

import { expect, jest, test } from '@jest/globals';
import { createStaticNavigation } from '@react-navigation/native';
import { act, fireEvent, render, screen } from '@testing-library/react-native';
Expand Down Expand Up @@ -783,8 +766,6 @@ test('Display loading state while waiting for data and then fetched profile nick
const TabNavigation = createStaticNavigation(TabNavigator);
render(<TabNavigation />);

act(() => jest.runAllTimers());

const spy = jest.spyOn(window, 'fetch').mockImplementation(mockedFetch);

const homeTabButton = screen.getByRole('button', {
Expand All @@ -797,13 +778,15 @@ test('Display loading state while waiting for data and then fetched profile nick

const event = {};
fireEvent.press(profileTabButton, event);
act(() => jest.runAllTimers());

expect(screen.queryByText('Loading')).toBeOnTheScreen();
expect(spy).toHaveBeenCalled();
expect(await screen.findByText('CookieDough')).toBeOnTheScreen();

fireEvent.press(homeTabButton, event);
fireEvent.press(profileTabButton, event);
act(() => jest.runAllTimers());

expect(screen.queryByText('Loading')).toBeOnTheScreen();
expect(spy).toHaveBeenCalled();
Expand All @@ -815,8 +798,6 @@ test('Display loading state while waiting for data and then fetched profile nick
<TabItem value="dynamic" label="Dynamic">

```js
import '@testing-library/react-native/extend-expect';

import { expect, jest, test } from '@jest/globals';
import { NavigationContainer } from '@react-navigation/native';
import { act, fireEvent, render, screen } from '@testing-library/react-native';
Expand Down Expand Up @@ -847,8 +828,6 @@ test('Display loading state while waiting for data and then fetched profile nick
</NavigationContainer>
);

act(() => jest.runAllTimers());

const spy = jest.spyOn(window, 'fetch').mockImplementation(mockedFetch);

const homeTabButton = screen.getByRole('button', {
Expand All @@ -860,13 +839,15 @@ test('Display loading state while waiting for data and then fetched profile nick

const event = {};
fireEvent.press(profileTabButton, event);
act(() => jest.runAllTimers());

expect(screen.queryByText('Loading')).toBeOnTheScreen();
expect(spy).toHaveBeenCalled();
expect(await screen.findByText('CookieDough')).toBeOnTheScreen();

fireEvent.press(homeTabButton, event);
fireEvent.press(profileTabButton, event);
act(() => jest.runAllTimers());

expect(screen.queryByText('Loading')).toBeOnTheScreen();
expect(spy).toHaveBeenCalled();
Expand Down

0 comments on commit 5c5ec89

Please sign in to comment.