StudyTDD

[TDD] 06 - ToDoList Component

TDD

App 컴포넌트의 두번째 구성인 ToDoList 컴포넌트의 테스트 및 개발을 시작한다.

Rendering test

앱이 의도한대로 잘 그려지고 있는가?

테스트 코드 작성

1
2
3
4
5
6
7
8
// __tests__/ToDoList-test.js
// Rendering Test
describe("Rendering", () => {
    const wrapper = shallow(<ToDoList />)
    it("Should render a flat list", () => {
        expect(wrapper.find('FlatList')).toHaveLength(1);
    })
})

테스트 결과

1
2
3
4
5
6
7
8
9
10
Rendering
    ✕ Should render a flat list (6ms)

  ● Rendering › Should render a flat list

    expect(received).toHaveLength(expected)

    Expected length: 1
    Received length: 0
    Received object: {}

Make it green

1
2
3
4
5
6
7
8
// src/components/ToDoList/index.js
...
import { FlatList } from 'react-native';

const ToDoList = () => {
  return <FlatList></FlatList>;
};
...

테스트 결과

1
2
Rendering
    ✓ Should render a flat list (6ms)

Interaction test

컴포넌트 내에서의 interaction 이 의도한대로 진행되는가?

테스트 코드 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// __tests__/ToDoList-test.js
// Interaction test
describe("Interaction", () => {
    let wrapper;
    let props;

    beforeEach(() => {
        props = {
            items: [
                {
                    text: "some todo item 1",
                    complete: false
                },
                {
                    text: "some todo item 2",
                    complete: true
                }
            ]
        }
        wrapper = shallow(<ToDoList {...props} />);
    })
    it('should pass props to FlatList', () => {
        expect(wrapper.find('FlatList').prop('data')).toBe(props.items);
    })
})

테스트 결과

1
2
3
4
5
6
7
8
9
Interaction
    ✕ should pass props to FlatList (4ms)

  ● Interaction › should pass props to FlatList

    expect(received).toBe(expected) // Object.is equality

    Expected: [{"complete": false, "text": "some todo item 1"}, {"complete": true, "text": "some todo item 2"}]
    Received: undefined

Make it green

1
2
3
4
5
6
7
8
// src/components/ToDoList/index.js
...
import { FlatList } from 'react-native';

const ToDoList = ({items}) => {
  return <FlatList data={items}></FlatList>;
};
...

테스트 결과

1
2
Interaction
    ✓ should pass props to FlatList (1ms)

Component 의 Rendering & Interaction 에 대한 구상 > 테스트 코드 작성 > Make it fail > Make it green > Refactoring

공유하기