fix: react-hooks/exhaustive-deps warnings do not appear when running

Co-authored-by: Matteo Vivona <[email protected]>

.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
     'jest/globals': true,
   },
   extends: [
+    'react-app',
     'airbnb',
     'eslint:recommended',
     'plugin:@typescript-eslint/eslint-recommended',

src/__tests__/shared/components/network-status/NetworkStatusMessage.test.tsx

@@ -1,3 +1,4 @@
+import { renderHook } from '@testing-library/react-hooks'
 import { render, shallow } from 'enzyme'
 import React from 'react'
 
@@ -16,10 +17,9 @@ const englishTranslationsMock = {
   'networkStatus.online': 'you are back online',
 }
 
-const useTranslationReturnValue = useTranslation() as any
-useTranslationReturnValue.t = (key: keyof typeof englishTranslationsMock) =>
-  englishTranslationsMock[key]
-const { t } = useTranslationReturnValue
+const { result } = renderHook(() => useTranslation() as any)
+result.current.t = (key: keyof typeof englishTranslationsMock) => englishTranslationsMock[key]
+const { t } = result.current
 
 describe('NetworkStatusMessage', () => {
   it('returns null if the app has always been online', () => {