feat: update jest config

Author: hmarques98

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmarques98/react-native-template-typescript",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "A minimal template with good architecture and common packages to let you focus on writing features right away.",
   "scripts": {},
   "files": [

template/.env.example

@@ -32,4 +32,7 @@ module.exports = {
       version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
     },
   },
+  env: {
+    jest: true,
+  },
 };

template/.eslintrc.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Button, Text, TextInput, View } from 'react-native';
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
+
+function Example() {
+  const [name, setUser] = React.useState('');
+  const [show, setShow] = React.useState(false);
+
+  return (
+    <View>
+      <TextInput value={name} onChangeText={setUser} testID="input" />
+      <Button
+        title="Print Username"
+        onPress={() => {
+          // let's pretend this is making a server request, so it's async
+          // (you'd want to mock this imaginary request in your unit tests)...
+          setTimeout(() => {
+            setShow(!show);
+          }, Math.floor(Math.random() * 200));
+        }}
+      />
+      {show && <Text testID="printed-username">{name}</Text>}
+    </View>
+  );
+}
+
+test('examples of some things', async () => {
+  const { getByTestId, getByText, queryByTestId, toJSON } = render(<Example />);
+  const famousProgrammerInHistory = 'Ada Lovelace';
+
+  const input = getByTestId('input');
+  fireEvent.changeText(input, famousProgrammerInHistory);
+
+  const button = getByText('Print Username');
+  fireEvent.press(button);
+
+  await waitFor(() => expect(queryByTestId('printed-username')).toBeTruthy());
+
+  expect(getByTestId('printed-username').props.children).toBe(famousProgrammerInHistory);
+  expect(toJSON()).toMatchSnapshot();
+});

template/__tests__/App-test.tsx

@@ -0,0 +1,3 @@
+ENV=dev
+SENTRY_DSN=
+BASE_URL=https://fakerapi.it/api/v1/

template/__tests__/App.test.tsx

@@ -1,22 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const jestPreset = require('@testing-library/react-native/jest-preset');
-
 module.exports = {
-  testEnvironment: 'node',
   preset: 'react-native',
-  setupFiles: [
-    './jest.setup.js',
-    './node_modules/react-native-gesture-handler/jestSetup.js',
-    './node_modules/react-native/jest/setup.js',
-    './node_modules/react-native/Libraries/Utilities/__mocks__/BackHandler.js',
-  ],
-  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
-  clearMocks: true,
-  moduleNameMapper: {
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-      '<rootDir>/assetsTransformer.js',
-    '\\.(css|less)$': '<rootDir>/assetsTransformer.js',
-    '\\.svg': '<rootDir>/__mocks__/svgMocks.js',
-  },
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  testEnvironment: 'node',
 };

template/_env

@@ -1,7 +1,7 @@
+import '@testing-library/jest-native/extend-expect';
 import mockRNCNetInfo from '@react-native-community/netinfo/jest/netinfo-mock.js';
 import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
-import React from 'react';
-import '@testing-library/jest-native/extend-expect';
+
 import { jest } from '@jest/globals';
 import { server } from './src/test/mocks/server';
 

template/jest.config.js

@@ -1,5 +1,5 @@
 {
-  "name": "StarWarsApp",
+  "name": "HelloWorld",
   "version": "0.0.1",
   "private": true,
   "scripts": {
@@ -82,6 +82,7 @@
     "husky": "^5.1.3",
     "jest": "^26.6.3",
     "jest-circus": "^26.6.3",
+    "jest-extended": "^0.11.5",
     "lint-staged": "^10.5.3",
     "metro-react-native-babel-preset": "^0.64.0",
     "patch-package": "^6.4.4",
@@ -101,5 +102,8 @@
       "prettier --write .",
       "jest --bail --findRelatedTests"
     ]
+  },
+  "jest": {
+    "transform": {}
   }
 }

template/jest.setup.js

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { Text, TextProps } from 'react-native';
-import styled, { css } from 'styled-components/native';
+import styled, { css, withTheme } from 'styled-components/native';
 import { space, SpaceProps, layout, LayoutProps, compose, typography, TypographyProps } from 'styled-system';
 
 interface StyleProps extends SpaceProps, TypographyProps, LayoutProps, TextProps {
@@ -21,9 +21,8 @@ const Container = styled(Text)<StyleProps>`
           border: 1px solid red;
         `
       : css``};
-  text-align-vertical: center;
   text-decoration-line: ${({ underline }) => (underline ? 'underline' : 'none')};
-  color: ${({ theme }) => theme.colors.primary};
+  color: ${(props) => props.theme.colors.primary};
   ${({ capitalize }) =>
     capitalize
       ? css`
@@ -41,7 +40,7 @@ Container.defaultProps = {
   opacity: 1,
 };
 
-const CustomText = ({ children, color, ...props }: PropsWithChildren<StyleProps>) => {
+const CustomText = ({ children, ...props }: PropsWithChildren<StyleProps>) => {
   return <Container {...props}>{children}</Container>;
 };