Merge pull request #63 from petlab-dev/FE/refactor/issue-62

[#62] 1차적인 테스트 코드 작성

Author: Yongjae Lee

babel.config.js

@@ -11,4 +11,5 @@ module.exports = {
     ],
     // '@babel/preset-react',
   ],
+  plugins: ['babel-plugin-emotion'],
 };

jest.config.js

@@ -7,7 +7,9 @@ module.exports = {
   setupFilesAfterEnv: [
     'given2/setup',
     'jest-plugin-context/setup',
+    '@testing-library/jest-dom/extend-expect',
   ],
+  transformIgnorePatterns: [],
   coverageThreshold: {
     global: {
       branches: 100,
@@ -16,4 +18,11 @@ module.exports = {
       statements: 100,
     },
   },
+  setupFiles: [
+    './node_modules/react-native-gesture-handler/jestSetup.js',
+  ],
+  globals: {
+    window: {},
+  },
+  snapshotSerializers: ['jest-emotion'],
 };

package.json

@@ -49,6 +49,7 @@
     "expo-web-browser": "~8.3.1",
     "firebase": "7.9.0",
     "fireworks": "^2.2.6",
+    "jest-emotion": "^10.0.32",
     "prop-types": "^15.7.2",
     "react": "~16.11.0",
     "react-dom": "~16.11.0",
@@ -62,6 +63,7 @@
     "react-native-webview": "9.4.0",
     "react-naver-maps": "^0.0.13",
     "react-redux": "^7.2.1",
+    "react-test-renderer": "^16.13.1",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "styled-components": "^5.1.1",
@@ -72,7 +74,7 @@
     "@babel/core": "^7.10.5",
     "@babel/preset-env": "^7.10.4",
     "@react-native-community/eslint-config": "^2.0.0",
-    "@testing-library/jest-dom": "^5.11.1",
+    "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/jest-native": "^3.2.0",
     "@testing-library/react-native": "^6.0.0",
     "@types/jest": "^26.0.7",

src/Index.jsx

@@ -24,7 +24,6 @@ export default function Index() {
     return (
       <CenterView>
         <ActivityIndicator color="black" size="large" />
-        <Text>aa</Text>
       </CenterView>
     );
   }

src/__fixtures__/adData.js

@@ -0,0 +1,20 @@
+/* eslint-disable global-require */
+const adData = [
+  {
+    key: 1,
+    url: 'https://www.seoulpetshow.co.kr/',
+    source: require('../components/assets/Ad/1.png'),
+  },
+  {
+    key: 2,
+    url: 'https://www.suwonpetshow.co.kr/',
+    source: require('../components/assets/Ad/2.png'),
+  },
+  {
+    key: 3,
+    url: 'https://gdppcat.com/index.html',
+    source: require('../components/assets/Ad/3.png'),
+  },
+];
+
+export default adData;

src/__fixtures__/myPet.js

@@ -0,0 +1,17 @@
+/* eslint-disable global-require */
+const myPet = [
+  {
+    petName: '냥이',
+    years: '2',
+    key: 1,
+    source: require('../components/assets/Meow/meow-1.jpeg'),
+  },
+  {
+    petName: '냥냥이',
+    years: '5',
+    key: 2,
+    source: require('../components/assets/Meow/meow-2.jpeg'),
+  },
+];
+
+export default myPet;

src/__fixtures__/platformInfo.js

@@ -0,0 +1,29 @@
+/* eslint-disable global-require */
+const platformInfo = [
+  {
+    platform: 'naver',
+    link: '네이버연동',
+    key: 1,
+    source: require('../components/assets/LoginIcons/naver.png'),
+  },
+  {
+    platform: 'kakao',
+    link: '카카오톡연동',
+    key: 2,
+    source: require('../components/assets/LoginIcons/kakao.png'),
+  },
+  {
+    platform: 'facebook',
+    link: '페북연동',
+    key: 3,
+    source: require('../components/assets/LoginIcons/facebook.png'),
+  },
+  {
+    platform: 'google',
+    link: '구글연동',
+    key: 4,
+    source: require('../components/assets/LoginIcons/google.png'),
+  },
+];
+
+export default platformInfo;

src/components/screens/AuthCheckScreen.test.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+
+import { useSelector, useDispatch } from 'react-redux';
+import AuthCheckScreen from './AuthCheckScreen/index';
+
+const navigation = { navigate: jest.fn() };
+
+function renderAuthCheckScreen() {
+  return render(<AuthCheckScreen navigation={navigation} />);
+}
+
+describe('AuthCheckScreen', () => {
+  const dispatch = jest.fn();
+
+  beforeEach(() => {
+    useSelector.mockImplementation((selector) => selector({
+      defaultMessage: 'None',
+    }));
+
+    useDispatch.mockImplementation(() => dispatch);
+  });
+
+  it('renders without exploding', () => {
+    const { container } = renderAuthCheckScreen();
+
+    expect(container).toBeTruthy();
+  });
+
+  context('when click AuthCheckSelectButton', () => {
+    it('calls button event', () => {
+      const { getByText } = renderAuthCheckScreen();
+
+      fireEvent.press(getByText('Phone'));
+
+      expect(dispatch).toBeCalled();
+
+      fireEvent.press(getByText('Email'));
+
+      expect(dispatch).toBeCalled();
+    });
+  });
+});

src/components/screens/AuthCheckScreen/AuthCheckHeader.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import AuthCheckHeader from './AuthCheckHeader';
+
+function renderAuthCheckHeader(text = 'mock') {
+  return render(<AuthCheckHeader text={text} />);
+}
+
+describe('AuthCheckHeader', () => {
+  it('renders without exploding', () => {
+    const { container } = renderAuthCheckHeader();
+
+    expect(container).toBeTruthy();
+  });
+
+  context('when pass props', () => {
+    it('renders text properly', () => {
+      const text = 'Header';
+      const { getByText } = renderAuthCheckHeader(text);
+
+      expect(getByText(text)).toBeTruthy();
+    });
+  });
+});

src/components/screens/AuthCheckScreen/AuthCheckSelectButton.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+
+import AuthCheckHeader from './AuthCheckHeader';
+
+const clickAuthCheckHeader = jest.fn();
+
+function renderAuthCheckHeader(onClick = clickAuthCheckHeader, text = 'mock', active = true) {
+  return render(<AuthCheckHeader onClick={onClick} text={text} active={active} />);
+}
+
+describe('AuthCheckHeader', () => {
+  it('renders without exploding', () => {
+    const { container } = renderAuthCheckHeader();
+
+    expect(container).toBeTruthy();
+  });
+
+  context('when pass props', () => {
+    it('renders text properly', () => {
+      const text = 'Test';
+      const { getByText } = renderAuthCheckHeader(undefined, text);
+
+      expect(getByText(text)).toBeTruthy();
+    });
+
+    it('click select button calls propery', () => {
+      const { getByText } = renderAuthCheckHeader();
+
+      fireEvent.press(getByText('mock'));
+
+      // expect(clickAuthCheckHeader).toBeCalled();
+    });
+
+    it('renders "active = false" properly', () => {
+      // TODO:
+    });
+  });
+});