From 5c5ec89e310bc88af959dbdd5c97c745fa824d0b Mon Sep 17 00:00:00 2001 From: AnCichocka Date: Thu, 17 Oct 2024 15:52:43 +0200 Subject: [PATCH] fix fake timers --- versioned_docs/version-7.x/testing.md | 53 +++++++++------------------ 1 file changed, 17 insertions(+), 36 deletions(-) diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md index 5b9d2291ef..546cbe755f 100644 --- a/versioned_docs/version-7.x/testing.md +++ b/versioned_docs/version-7.x/testing.md @@ -302,12 +302,11 @@ test('navigates to settings by tab bar button press', () => { const TabNavigation = createStaticNavigation(TabNavigator); render(); - 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(); }); @@ -332,12 +331,11 @@ test('navigates to settings by tab bar button press', () => { ); - 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(); }); @@ -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. - - - +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 @@ -378,16 +373,6 @@ jest.useFakeTimers(); act(() => jest.runAllTimers()); ``` - - - -```js - -``` - - - - ### Example 3 Always displays settings screen after tab bar settings button press. @@ -533,22 +518,18 @@ export function TabNavigator() { ```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(); - act(() => jest.runAllTimers()); - const homeTabButton = screen.getByRole('button', { name: 'Home, tab, 1 of 2', }); @@ -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(); }); ``` @@ -577,15 +562,13 @@ test('always displays settings screen after tab bar settings button press', asyn ```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( @@ -594,8 +577,6 @@ test('always displays settings screen after tab bar settings button press', asyn ); - act(() => jest.runAllTimers()); - const homeTabButton = screen.getByRole('button', { name: 'Home, tab, 1 of 2', }); @@ -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(); }); ``` @@ -754,8 +739,6 @@ export function TabNavigator() { ```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'; @@ -783,8 +766,6 @@ test('Display loading state while waiting for data and then fetched profile nick const TabNavigation = createStaticNavigation(TabNavigator); render(); - act(() => jest.runAllTimers()); - const spy = jest.spyOn(window, 'fetch').mockImplementation(mockedFetch); const homeTabButton = screen.getByRole('button', { @@ -797,6 +778,7 @@ 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(); @@ -804,6 +786,7 @@ test('Display loading state while waiting for data and then fetched profile nick fireEvent.press(homeTabButton, event); fireEvent.press(profileTabButton, event); + act(() => jest.runAllTimers()); expect(screen.queryByText('Loading')).toBeOnTheScreen(); expect(spy).toHaveBeenCalled(); @@ -815,8 +798,6 @@ test('Display loading state while waiting for data and then fetched profile nick ```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'; @@ -847,8 +828,6 @@ test('Display loading state while waiting for data and then fetched profile nick ); - act(() => jest.runAllTimers()); - const spy = jest.spyOn(window, 'fetch').mockImplementation(mockedFetch); const homeTabButton = screen.getByRole('button', { @@ -860,6 +839,7 @@ 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(); @@ -867,6 +847,7 @@ test('Display loading state while waiting for data and then fetched profile nick fireEvent.press(homeTabButton, event); fireEvent.press(profileTabButton, event); + act(() => jest.runAllTimers()); expect(screen.queryByText('Loading')).toBeOnTheScreen(); expect(spy).toHaveBeenCalled();