RN(ReactNative) TDD TODO 앱 만들기 #2

 

2022.08.09 - [IT/React] - RN(ReactNative) TDD 설정 및 TODO 앱 만들기

 

Home 스크린 추가

App.js 에 작성된 것들을 HomeScreen.js 로 화면을 빼줍니다

화면은 screens 로 컴포넌트는 components  아래 만들어 줍니다

src > screens > HomeScreen.js 추가

import React from 'react';
import {Text, TextInput} from 'react-native';

export default function App() {
  return (
    <>
      <Text>Todo TDD</Text>
      <TextInput placeholder="+ Add a Task" />
      <Text>Learn React Native</Text>
    </>
  );
}

기존 text 와 textInput 을 HomeScreen.js 로 옮기고

App.js 를 레이아웃만 남깁니다.

import React from 'react';
import {StyleSheet, StatusBar, SafeAreaView} from 'react-native';

import HomeScreen from './screens/HomeScreen';

export default function App() {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.container}>
        <HomeScreen />
      </SafeAreaView>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

틀만 남아있고 HomeScreen 화면만 불러옴

npm test -- -u 로 테스트 통과 확인

타이틀 컴포넌트 만들기

src > components > __tests__ > Title-test.js 생성

props 로 title : 'Todo TDD' 를 넘겼을 때 Text 확인

import 'react-native';
import React from 'react';
import {render, screen} from '@testing-library/react-native';

import Title from '../Title';

let props;

function getAppComponent(temprops) {
  return <Title {...temprops} />;
}

describe('Title Component', () => {
  props = {title: 'Todo TDD'};
  render(getAppComponent(props));

  it('should render title Todo TDD', () => {
    const title = screen.getByText('Todo TDD');
    expect(title).toBeTruthy();
  });
});

src > components > Title.jsx 생성

import React from 'react';
import {StyleSheet, Text} from 'react-native';

const Title = ({title}) => {
  return <Text style={styles.title}>{title}</Text>;
};

const styles = StyleSheet.create({
  title: {
    fontSize: 40,
    fontWeight: '600',
    color: 'black',
    margin: 30,
  },
});

export default Title;

타이틀 컴포넌트는 보여줄 타이틀만 props 로 받아서 Text 로 뿌려줌

 

테스트로 결과 확인

 

HomeScreen 에서 Title 컴포넌트 사용

// HomeScreen.js
import React from 'react';
import {Text, TextInput} from 'react-native';

import Title from '../components/Title';

export default function App() {
  return (
    <>
      <Title title="Todo TDD" />
      <TextInput placeholder="+ Add a Task" />
      <Text>Learn React Native</Text>
    </>
  );
}

결과 확인은 언제나 테스트 코드로 하자

TaskInput 컴포넌트 추가

src > components > __tests__ > TaskInput-test.js 생성

// TaskInput-test.js
import 'react-native';
import React from 'react';
import {render, screen} from '@testing-library/react-native';

import TaskInput from '../TaskInput';

let props;

function getAppComponent(temprops) {
  return <TaskInput {...temprops} />;
}

describe('TaskInput Component', () => {
  props = {};
  render(getAppComponent(props));

  it('should render placeholder', () => {
    const element = screen.getByPlaceholderText('+ Add a Task');
    expect(element).toBeTruthy();
  });
});

TaskInput.jsx 에 내용이 비어있으니 당연히 테스트 하면 실패

TaskInput.jsx 에 내용을 추가 합니다

import React from 'react';
import {Dimensions, StyleSheet, TextInput} from 'react-native';

const TaskInput = () => {
  return <TextInput style={styles.taskinput} placeholder="+ Add a Task" />;
};

const styles = StyleSheet.create({
  taskinput: {
    width: Dimensions.get('window').width - 15,
    fontSize: 20,
    margin: 5,
    padding: 8,
    borderWidth: 1,
    borderRadius: 5,
    borderColor: '#ccc',
    alignItems: 'center',
  },
});

export default TaskInput;

스타일과 placeholder 만 적용해놓은 TaskInput 을 추가하고

HomeScreen.jsx 에 TaskInput 을 추가 합니다

//HomeScreen.jsx 수정

import React from 'react';
import {Text} from 'react-native';

import Title from '../components/Title';
import TaskInput from '../components/TaskInput';

export default function App() {
  return (
    <>
      <Title title="Todo TDD" />
      <TaskInput />
      <Text>Learn React Native</Text>
    </>
  );
}

테스트 결과

 

TaskList 컴포넌트 만들기

TaskList-test.js 를 추가합니다

import 'react-native';
import React from 'react';
import {render, screen} from '@testing-library/react-native';

import TaskList from '../TaskList';

let props;

function getAppComponent(temprops) {
  return <TaskList {...temprops} />;
}

describe('TaskList render', () => {
  props = {
    data: [
      {subject: 'Learn React Native'},
      {subject: 'Create a React Native app'},
    ],
  };

  it('should render first Task', () => {
    render(getAppComponent(props));
    const element = screen.getByText('Learn React Native');
    expect(element).toBeTruthy();
  });
  //두번째 Task 도 있어야 한다
  it('should render second Task', () => {
    render(getAppComponent(props));
    const element = screen.getByText('Create a React Native app');
    expect(element).toBeTruthy();
  });
});

TaskList 를 만들고 TaskList 에 props 로 2개의 data 를 만들어서 주면 2개가 각각 표현되는지 확인한다

TaskList 컴포넌트 생성

//TaskList.jsx

import React from 'react';
import {ScrollView, Text} from 'react-native';

const TaskList = ({data}) => {
  return (
    <ScrollView>
      {data.map(item => (
        <Text>{item.subject}</Text>
      ))}
    </ScrollView>
  );
};

export default TaskList;

 

이제 HomeScreen.jsx 에 테스트가 통과된 TaskList 컴포넌트를 추가한다

//HomeScreen.jsx 수정

import React from 'react';

import Title from '../components/Title';
import TaskInput from '../components/TaskInput';
import TaskList from '../components/TaskList';

const initialData = [
  {subject: 'Learn React Native'},
  {subject: 'Create a React Native app'},
];

export default function App() {
  return (
    <>
      <Title title="Todo TDD" />
      <TaskInput />
      <TaskList data={initialData} />
    </>
  );
}

 

reactnative tdd todo app

 

현재까지의 테스트 결과