Merge branch '619/Create-test-utils-for-react-testing-library' into 'main'

619 Create test utils for react testing library

See merge request bloodyhealth/drip!556

i18n/i18n.js

@@ -17,7 +17,6 @@ i18n
     compatibilityJSON: 'v3', // TODO: migrate json to v4 and afterwards remove it
     resources,
     fallbackLng: 'en',
-    debug: true,
 
     interpolation: {
       escapeValue: false, // not needed for react as it escapes by default

jest.config.js

@@ -5,4 +5,8 @@ module.exports = {
   transformIgnorePatterns: [
     'node_modules/(?!((jest-)?react-native(-.*)?|@react-native(-community)?)/)',
   ],
+  watchPlugins: [
+    'jest-watch-typeahead/filename',
+    'jest-watch-typeahead/testname',
+  ],
 }

package.json

@@ -68,7 +68,8 @@
     "eslint": "7.14.0",
     "eslint-plugin-react": "^7.8.2",
     "husky": "^8.0.0",
-    "jest": "^28.1.3",
+    "jest": "^29.1.2",
+    "jest-watch-typeahead": "^2.2.0",
     "jetifier": "^1.6.6",
     "metro-react-native-babel-preset": "^0.66.2",
     "prettier": "2.4.0",

test/AcceptLicense.spec.js

@@ -1,27 +1,19 @@
 import React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react-native'
 import AcceptLicense from '../components/AcceptLicense'
 
 import { saveLicenseFlag } from '../local-storage'
+import { render, screen, fireEvent } from './test-utils'
 
 jest.mock('../local-storage', () => ({
   saveLicenseFlag: jest.fn(() => Promise.resolve()),
 }))
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (str, options) => {
-      return str + (options ? JSON.stringify(options) : '')
-    },
-  }),
-}))
-
 describe('AcceptLicense', () => {
-  test('On clicking OK button, the license is accepted', async () => {
+  test('should accept license when clicking ok button', async () => {
     const mockedSetLicense = jest.fn()
     render(<AcceptLicense setLicense={mockedSetLicense} />)
 
-    const okButton = screen.getByText('ok', { exact: false })
+    const okButton = screen.getByText('OK')
 
     fireEvent(okButton, 'click')
 
@@ -29,9 +21,9 @@ describe('AcceptLicense', () => {
     expect(mockedSetLicense).toHaveBeenCalled()
   })
 
-  test('There is a Cancel button', async () => {
+  test('should render cancel button', async () => {
     render(<AcceptLicense setLicense={jest.fn()} />)
 
-    screen.getByText('cancel', { exact: false })
+    screen.getByText('Cancel')
   })
 })

test/License.spec.js

@@ -1,24 +1,16 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react-native'
 import License from '../components/settings/License'
-
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (str, options) => {
-      return str + (options ? JSON.stringify(options) : '')
-    },
-  }),
-}))
+import { render, screen } from './test-utils'
 
 describe('License screen', () => {
-  test('It should have a correct year', async () => {
+  test('should display license text with correct year', async () => {
     render(<License />)
     const year = new Date().getFullYear().toString()
 
     screen.getByText(year, { exact: false })
   })
 
-  test('It should match the snapshot', async () => {
+  test('should match the snapshot', async () => {
     const licenseScreen = render(<License />)
 
     expect(licenseScreen).toMatchSnapshot()

test/__snapshots__/License.spec.js.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`License screen It should match the snapshot 1`] = `
+exports[`License screen should match the snapshot 1`] = `
 <View
   style={
-    Object {
+    {
       "backgroundColor": "#E9F2ED",
       "flex": 1,
     }
@@ -11,8 +11,8 @@ exports[`License screen It should match the snapshot 1`] = `
 >
   <RCTScrollView
     contentContainerStyle={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "#E9F2ED",
           "flexGrow": 1,
         },
@@ -23,13 +23,13 @@ exports[`License screen It should match the snapshot 1`] = `
     <View>
       <Text
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "#555",
               "fontFamily": "Jost-Book",
               "fontSize": 34.285714285714285,
             },
-            Object {
+            {
               "alignSelf": "center",
               "color": "#3A2671",
               "fontFamily": "Jost-Bold",
@@ -41,11 +41,11 @@ exports[`License screen It should match the snapshot 1`] = `
           ]
         }
       >
-        title
+        drip. an open-source cycle tracking app
       </Text>
       <View
         style={
-          Object {
+          {
             "marginBottom": 34.285714285714285,
             "marginHorizontal": 34.285714285714285,
           }
@@ -53,8 +53,8 @@ exports[`License screen It should match the snapshot 1`] = `
       >
         <Text
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "#555",
                 "fontFamily": "Jost-Book",
                 "fontSize": 34.285714285714285,
@@ -63,12 +63,14 @@ exports[`License screen It should match the snapshot 1`] = `
             ]
           }
         >
-          text{"currentYear":2022}
+          Copyright (C) 2022 Heart of Code e.V.
+
+This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details:
         </Text>
         <Text
           onPress={[Function]}
           style={
-            Object {
+            {
               "color": "#3A2671",
               "fontFamily": "Jost-Book",
               "fontSize": 34.285714285714285,

test/components/common/__snapshots__/Footnote.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Footnote component when children are present, renders them 1`] = `
 <View
   style={
-    Object {
+    {
       "alignContent": "flex-start",
       "flexDirection": "row",
       "marginBottom": 8.571428571428571,
@@ -13,13 +13,13 @@ exports[`Footnote component when children are present, renders them 1`] = `
 >
   <Text
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "#555",
           "fontFamily": "Jost-Book",
           "fontSize": 34.285714285714285,
         },
-        Object {
+        {
           "color": "#F38337",
         },
       ]
@@ -29,18 +29,18 @@ exports[`Footnote component when children are present, renders them 1`] = `
   </Text>
   <Text
     linkStyle={
-      Object {
+      {
         "color": "white",
       }
     }
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "#555",
           "fontFamily": "Jost-Book",
           "fontSize": 34.285714285714285,
         },
-        Object {
+        {
           "color": "#555",
           "paddingLeft": 21.428571428571427,
         },

test/test-utils.js

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react-native'
+import '../i18n/i18n'
+
+const customRender = (ui, options) => render(ui, { ...options })
+
+// re-export everything
+export * from '@testing-library/react-native'
+
+// override render method
+export { customRender as render }