diff --git a/__tests__/FlatList.test.tsx b/__tests__/FlatList.test.tsx index 353ecdb..c1b9313 100644 --- a/__tests__/FlatList.test.tsx +++ b/__tests__/FlatList.test.tsx @@ -2,36 +2,27 @@ import React from 'react'; import { act, cleanup, - // fireEvent, render, screen, + userEvent, waitForElementToBeRemoved, } from '@testing-library/react-native'; import SectionList from '../src/components/FlatList'; -// const SCREEN_SIZE = { -// height: 500, -// width: 300, -// }; -// const eventData = { -// nativeEvent: { -// contentOffset: { -// y: SCREEN_SIZE.height, -// }, -// // Dimensions of the scrollable content -// contentSize: SCREEN_SIZE, -// // Dimensions of the device -// layoutMeasurement: SCREEN_SIZE, -// }, -// }; +const SCREEN_SIZE = {width: 240, height: 480}; +const scrollDownEventData = { + y: 300, + contentSize: SCREEN_SIZE, + layoutMeasurement: SCREEN_SIZE, +}; afterEach(cleanup); jest.useFakeTimers(); it('scrolls to bottom and loads more items', async () => { // Render the SectionList component render(); - // First dish is visible + expect(screen.getByText(/pizza/i)).toBeOnTheScreen(); // First dish from 2nd page is not visible yet expect(() => screen.getByText(/the impossible burger/i)).toThrow( @@ -41,20 +32,21 @@ it('scrolls to bottom and loads more items', async () => { expect(() => screen.getByText(/loading more dishes/i)).toThrow( 'Unable to find an element with text: /loading more dishes/i', ); - // Simulate scrolling to the bottom of the list - // TODO: fix this test case when this issue is resolved - // https://github.com/callstack/react-native-testing-library/issues/1549 - // fireEvent.scroll(screen.getByLabelText('dishes-list'), eventData); - // await waitForElementToBeRemoved( - // () => screen.getByText(/loading more dishes/i), - // { - // timeout: 1500, - // }, - // ); - // - // expect(await screen.findByText(/the impossible burger/i)).toBeOnTheScreen(); + const user = userEvent.setup(); + await user.scrollTo( + screen.getByLabelText('dishes-list'), + scrollDownEventData, + ); + await waitForElementToBeRemoved( + () => screen.getByText(/loading more dishes/i), + { + timeout: 1500, + }, + ); + + expect(await screen.findByText(/the impossible burger/i)).toBeOnTheScreen(); }); it('refreshes when scrolling to the top', async () => { diff --git a/__tests__/Home.test.tsx b/__tests__/Home.test.tsx index 1c1d492..46184a5 100644 --- a/__tests__/Home.test.tsx +++ b/__tests__/Home.test.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { cleanup, - fireEvent, render, screen, + userEvent, } from '@testing-library/react-native'; import App from '../App'; @@ -14,8 +14,9 @@ const mockedSetItem = jest.fn(); jest.mock('@react-native-community/async-storage', () => ({ setItem: mockedSetItem, })); +jest.useFakeTimers(); -it('renders/navigates throughout app screens', () => { +it('renders/navigates throughout app screens', async () => { // Render the app from teh root render(); @@ -23,7 +24,8 @@ it('renders/navigates throughout app screens', () => { expect(screen.getByText(/home/i)).toBeOnTheScreen(); // Navigate to counter screen by pressing on button - fireEvent.press(screen.getByText(/counter/i)); - // Check that navigation was succeeded by inspecting correspondeing text on the screen + const user = userEvent.setup(); + await user.press(screen.getByText(/counter/i)); + // Check that navigation was succeeded by inspecting corresponding text on the screen expect(screen.getByText(/current count: 0/i)).toBeOnTheScreen(); });