Chore: maintenance and upgrading to v11

.eslintrc.js

@@ -2,5 +2,12 @@ module.exports = {
   root: true,
   extends: '@react-native-community',
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
-};
+  plugins: ['@typescript-eslint', 'jest'],
+  rules: {
+    semi: [2, 'never'],
+    'react-native/no-inline-styles': 0,
+  },
+  env: {
+    'jest/globals': true,
+  },
+}

__tests__/Counter.test.tsx

@@ -1,11 +1,12 @@
-import 'react-native'
 import React from 'react'
-import {fireEvent, render} from '@testing-library/react-native'
+import {cleanup, fireEvent, render, screen} from '@testing-library/react-native'
 import Counter from '../src/components/Counter'
-import {expect, it} from '@jest/globals'
 
-it('renders correctly', () => {
-  const {getByText} = render(<Counter />)
+afterEach(cleanup)
+
+it('renders correctly after in/decrement action', () => {
+  render(<Counter />)
+  const {getByText} = screen
 
   const decrement = getByText(/decrement/i)
   const increment = getByText(/increment/i)

__tests__/CounterUsesCustomHook.test.tsx

@@ -1,14 +1,20 @@
-import 'react-native'
 import React from 'react'
-import {act, fireEvent, render} from '@testing-library/react-native'
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from '@testing-library/react-native'
 import CounterUsesCustomHook from '../src/components/CounterUsesCustomHook'
 import useCounter from '../src/hooks/useCounter'
 import {renderHook} from '@testing-library/react-hooks'
-import {expect, it, test} from '@jest/globals'
 
-//testing with the component
+afterEach(cleanup)
+
 it('exposes the count and increment/decrement functions', () => {
-  const {getByText} = render(<CounterUsesCustomHook />)
+  render(<CounterUsesCustomHook />)
+  const {getByText} = screen
 
   const decrement = getByText(/decrement/i)
   const increment = getByText(/increment/i)
@@ -22,18 +28,17 @@ it('exposes the count and increment/decrement functions', () => {
 })
 
 // @ts-ignore
-function setup({initialProps} = {}) {
+const setup = ({initialProps} = {}) => {
   const result: any = {current: null}
-  function TestComponent(props: any) {
+  const TestComponent = (props: any) => {
     result.current = useCounter(props)
     return null
   }
   render(<TestComponent {...initialProps} />)
   return result
 }
 
-//testing without component
-test('exposes the count and increment/decrement functions', () => {
+it('exposes the count and increment/decrement functions-  without component', () => {
   const result = setup()
   expect(result.current.count).toBe(0)
   act(() => result.current.increment())
@@ -42,12 +47,12 @@ test('exposes the count and increment/decrement functions', () => {
   expect(result.current.count).toBe(0)
 })
 
-test('allows customization of the initial count', () => {
+it('allows customization of the initial count', () => {
   const result = setup({initialProps: {initialCount: 3}})
   expect(result.current.count).toBe(3)
 })
 
-test('allows customization of the step', () => {
+it('allows customization of the step', () => {
   const result = setup({initialProps: {step: 2}})
   expect(result.current.count).toBe(0)
   act(() => result.current.increment())
@@ -56,7 +61,7 @@ test('allows customization of the step', () => {
   expect(result.current.count).toBe(0)
 })
 
-test('exposes the count and increment/decrement functions', () => {
+it('exposes the count and increment/decrement functions- hook only', () => {
   const {result} = renderHook(useCounter)
   expect(result.current.count).toBe(0)
   act(() => result.current.increment())

__tests__/EasyButton.test.tsx

@@ -2,11 +2,15 @@ import 'react-native'
 import React from 'react'
 import EasyButton from '../src/components/EasyButton'
 import {render} from '../src/test/test-utils'
-import {expect, it} from '@jest/globals'
 import {ReactTestInstance} from 'react-test-renderer'
+import {cleanup, screen} from '@testing-library/react-native'
+
+afterEach(cleanup)
 
 it('renders with the light styles for the light theme', () => {
-  const {getByText} = render(<EasyButton>Click me!</EasyButton>)
+  render(<EasyButton>Click me!</EasyButton>)
+  const {getByText} = screen
+
   const innerText = getByText(/click/i)
   const button = innerText.parent as ReactTestInstance
 
@@ -15,9 +19,11 @@ it('renders with the light styles for the light theme', () => {
 })
 
 it('renders with the dark styles for the dark theme', () => {
-  const {getByText} = render(<EasyButton>Click me!</EasyButton>, {
+  render(<EasyButton>Click me!</EasyButton>, {
     theme: 'dark',
   })
+  const {getByText} = screen
+
   const innerText = getByText(/click/i)
   const button = innerText.parent as ReactTestInstance
 

__tests__/FlatList.test.tsx

@@ -1,42 +1,48 @@
-import 'react-native'
-// @ts-ignore
 import React from 'react'
 import {
+  cleanup,
   fireEvent,
   render,
+  screen,
   waitFor,
   waitForElementToBeRemoved,
 } from '@testing-library/react-native'
-import {expect, it} from '@jest/globals'
 import SectionList from '../src/components/FlatList'
 
 const eventData = {
   nativeEvent: {
     contentOffset: {
-      x: 0,
-      y: 425,
+      y: 500,
     },
     contentSize: {
       // Dimensions of the scrollable content
-      height: 885,
-      width: 328,
+      height: 500,
+      width: 100,
     },
     layoutMeasurement: {
       // Dimensions of the device
-      height: 469,
-      width: 328,
+      height: 100,
+      width: 100,
     },
   },
 }
 
+afterEach(cleanup)
+
 it('scrolls to top and refreshes all items', async () => {
-  const {getByText, getByTestId} = render(<SectionList />)
+  render(<SectionList />)
+  const {getByText, getByTestId} = screen
 
   getByText(/pizza/i)
   expect(() => getByText(/the impossible burger/i)).toThrow(
     'Unable to find an element with text: /the impossible burger/i',
   ) //intially not shown
   fireEvent.scroll(getByTestId('flat-list'), eventData)
-  await waitForElementToBeRemoved(() => getByText(/loading more dishes/i))
-  await waitFor(() => expect(getByText(/the impossible burger/i)))
+  await waitForElementToBeRemoved(() => getByText(/loading more dishes/i), {
+    timeout: 1500,
+  })
+
+  await waitFor(() => {
+    expect(getByText(/the impossible burger/i)).toBeTruthy()
+  })
 })

__tests__/Home.test.tsx

@@ -1,7 +1,14 @@
 import React from 'react'
-import {fireEvent, render, waitFor} from '@testing-library/react-native'
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react-native'
 import App from '../src/components/App'
-import {expect, it, jest} from '@jest/globals'
+
+afterEach(cleanup)
 
 //mocking async storage module
 const mockedSetItem = jest.fn()
@@ -10,7 +17,8 @@ jest.mock('@react-native-community/async-storage', () => ({
 }))
 
 it('renders/navigates throughout app screens', async () => {
-  const {getByText} = render(<App />)
+  render(<App />)
+  const {getByText} = screen
   const homeText = getByText(/home/i)
   expect(homeText).not.toBeNull()
   fireEvent.press(getByText(/counter/i))

__tests__/ListWithFetch.test.tsx

@@ -1,22 +1,22 @@
-import 'react-native'
 import React from 'react'
-import {render} from '@testing-library/react-native'
+import {cleanup, render, screen} from '@testing-library/react-native'
 import ListWithFetch from '../src/components/ListWithFetch'
 import {server} from '../src/test/mocks/server'
 import {rest} from 'msw'
 
+afterEach(cleanup)
+
 test('displays images from the server', async () => {
-  const {getByLabelText, findAllByLabelText, queryByLabelText} = render(
-    <ListWithFetch />,
-  )
+  render(<ListWithFetch />)
+  const {getByLabelText, findAllByLabelText, queryByLabelText} = screen
 
   // show loading spinner
   const loadingSpinner = getByLabelText(/loader/i)
   expect(loadingSpinner).not.toBeUndefined()
 
   //load images from server
-  const images = await findAllByLabelText(/flavor/i)
-  expect(images).toHaveLength(2)
+  const userContainers = await findAllByLabelText(/user-container/i)
+  expect(userContainers).toHaveLength(10)
 
   //loading spinner no longer shows
   expect(queryByLabelText(/loader/i)).toBeNull()
@@ -25,19 +25,15 @@ test('displays images from the server', async () => {
   expect(queryByLabelText(/alert/i)).toBeNull()
 })
 
-test('displays error upon error esponse from server', async () => {
+test('displays error upon error response from server', async () => {
   server.resetHandlers(
-    rest.get(
-      'https://4ec38857-2800-4f07-838e-535a78cf7d51.mock.pstmn.io/flavors',
-      (res, req, ctx) => {
-        // @ts-ignore
-        res(ctx.status(500))
-      },
-    ),
-  )
-  const {getByLabelText, getByText, findByLabelText, queryByLabelText} = render(
-    <ListWithFetch />,
+    rest.get('https://random-data-api.com/api/v2/users', (res, req, ctx) => {
+      // @ts-ignore
+      res(ctx.status(500))
+    }),
   )
+  render(<ListWithFetch />)
+  const {findByLabelText, getByLabelText, getByText, queryByLabelText} = screen
 
   // show loading spinner
   const loadingSpinner = getByLabelText(/loader/i)

__tests__/Login.test.tsx

@@ -1,18 +1,16 @@
-import 'react-native'
 import React from 'react'
-import {fireEvent, render} from '@testing-library/react-native'
+import {cleanup, fireEvent, render, screen} from '@testing-library/react-native'
 import Login from '../src/components/Login'
-import {expect, it, jest} from '@jest/globals'
+
+afterEach(cleanup)
 
 it('renders correctly', async () => {
   const username = 'hi'
   const password = 'qwerty1234'
   let submittedData = {}
-  // @ts-ignore
   const handleSubmit = jest.fn(data => (submittedData = data))
-  const {getByText, getByPlaceholderText} = render(
-    <Login onSubmit={handleSubmit} />,
-  )
+  render(<Login onSubmit={handleSubmit} />)
+  const {getByText, getByPlaceholderText} = screen
   const button = getByText(/submit/i)
 
   await fireEvent.changeText(getByPlaceholderText(/username/i), username)

__tests__/LoginSubmission.test.tsx

@@ -1,12 +1,17 @@
 import 'react-native'
 import React from 'react'
-import {fireEvent, render, waitFor} from '@testing-library/react-native'
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react-native'
 import LoginSubmission from '../src/components/LoginSubmission'
-import {useNavigation} from '@react-navigation/native'
 import AsyncStorage from '@react-native-community/async-storage'
+import {useNavigationMock} from '../src/test/test-utils'
 
 jest.mock('@react-native-community/async-storage', () => ({setItem: jest.fn()}))
-
 jest.mock('@react-navigation/native', () => {
   return {
     createNavigatorFactory: jest.fn(),
@@ -18,48 +23,44 @@ jest.mock('@react-navigation/stack', () => ({
 }))
 jest.mock('@react-native-community/masked-view', () => ({}))
 
+afterEach(cleanup)
 beforeEach(() => {
-  // @ts-ignore
-  useNavigation.mockReset()
+  useNavigationMock.mockReset()
 })
-
 it('renders correctly', async () => {
+  const fetchMock = global.fetch as jest.MockedFunction<typeof global.fetch>
   const mockNavigate = jest.fn()
-  // @ts-ignore
-  useNavigation.mockImplementation(() => ({navigate: mockNavigate}))
-  const fakeResponse = Promise.resolve({token: 'fake-token'})
-  // @ts-ignore
-  global.fetch.mockResolvedValueOnce({
+  useNavigationMock.mockImplementation(() => ({navigate: mockNavigate}))
+  fetchMock.mockResolvedValueOnce({
     json: () => Promise.resolve({token: 'fake-token'}),
-  })
-
+  } as Response | Awaited<Response>)
   const username = 'chucknorris'
   const password = 'i need no password'
-  const {getByText, getByPlaceholderText} = render(<LoginSubmission />)
+
+  render(<LoginSubmission />)
+  const {getByText, getByPlaceholderText} = screen
   const button = getByText(/submit/i)
 
   fireEvent.changeText(getByPlaceholderText(/username/i), username)
   fireEvent.changeText(getByPlaceholderText(/password/i), password)
   fireEvent.press(button)
 
   getByText(/loading/i)
-  // @ts-ignore
-  expect(global.fetch).toHaveBeenCalledWith(
+  expect(fetchMock).toHaveBeenCalledWith(
     'https://e2c168f9-97f3-42e1-8b31-57f4ab52a3bc.mock.pstmn.io/api/login',
     {
       method: 'POST',
       body: JSON.stringify({username, password}),
       headers: {'content-type': 'application/json'},
     },
   )
-  // @ts-ignore
-  expect(global.fetch.mock.calls).toMatchInlineSnapshot(`
-    Array [
-      Array [
+  expect(fetchMock.mock.calls).toMatchInlineSnapshot(`
+    [
+      [
         "https://e2c168f9-97f3-42e1-8b31-57f4ab52a3bc.mock.pstmn.io/api/login",
-        Object {
-          "body": "{\\"username\\":\\"chucknorris\\",\\"password\\":\\"i need no password\\"}",
-          "headers": Object {
+        {
+          "body": "{"username":"chucknorris","password":"i need no password"}",
+          "headers": {
             "content-type": "application/json",
           },
           "method": "POST",