To-do 테스트 작성하기 #99

timothypark33 · 2021-12-14T12:25:28Z

안녕하세요 이번에 처음으로 jest를 배워보고 테스트 코드를 작성해보았습니다.

질문은 fileChanged에 추가하겠습니다.

감사합니다.

진도

Input 컴포넌트 테스트 작성
Item 컴포넌트 테스트 작성
List 컴포넌트 테스트 작성
Page 컴포넌트 테스트 작성
App 컴포넌트 테스트 작성
index.jsx 테스트 작성
모든 컴포넌트에 테스트를 작성
커버리지 100% 달성하기

…signment-1

moonkii

테스트 코드 작성이 처음이시면 익숙하지 않을거에요.
하다보면 대략적인 패턴이 있기 때문에 강의에 나온 내용들을 반복해서 연습해보시면 좋아요!

src/Input.test.jsx

moonkii · 2021-12-14T16:32:21Z

src/Input.test.jsx

+  fireEvent.click(getByText('추가'));
+  expect(handleClick).toBeCalled();
+
+  expect(getByRole('textbox').value).toBe('test');


getByRole 을 사용하신 이유가 있나요?

src/Input.test.jsx

input 테스트에서 추가버튼 작동확인과 textbox 작동확인 구분

해당 Item 컴포넌트 출력확인

timothypark33 · 2021-12-15T12:42:43Z

올려주신 것에서 답글이 안달려서 여기에 적습니다!
1.Input으로 수정하고 it보다 test로 일관되게 적으려고 test로 수정했습니다
2. <input type="text" ... > 태그 안에있는 value 값을 가져오려고 getByRole을 사용했습니다. getByPlaceholder보다
3.큰 의도가 없습니다..toBeCalled로 수정했습니다.

moonkii · 2021-12-15T16:20:06Z

1.Input으로 수정하고 it보다 test로 일관되게 적으려고 test로 수정했습니다

테스트를 작성하실 때 test 를 사용할 수도 있지만
좀 더 구체적이고 서술적인 테스트 시나리오 작성을 위해 describe ~ context ~ it 구조를 사용해주면 좋아요.

describe 는 테스트 주체가 되는 서술 대상이에요.
context 는 따로 비교해줘야할 맥락(상황)이 있을 때만 선택적으로 사용해요.
it 은 실제로 테스트할 내용을 서술해요. 여기서 it 은 describe 에서 작성한 서술대상이에요. (주로 컴포넌트겠죠?)

<input type="text" ... > 태그 안에있는 value 값을 가져오려고 getByRole을 사용했습니다. getByPlaceholder보다

getByText 같은걸 사용해볼 수도 있을거에요 ;)

src/Input.test.jsx

src/List.test.jsx

src/Page.test.jsx

timothypark33 · 2021-12-16T12:19:43Z

<input type="text" ... > 태그 안에있는 value 값을 가져오려고 getByRole을 사용했습니다. getByPlaceholder보다

getByText 같은걸 사용해볼 수도 있을거에요 ;)

input태그를 선택하기위해서 getByText를 어떻게 정말 사용할지 모르겠습니다...
https://testing-playground.com/
에서 input태그를 선택할때에 아래 4가지 중에서 Text는 값이 비어있어서 불가능한걸로 알고있었습니다..

차선책으로 getByLabelText로 사용해보도록하겠습니다.ㅜㅜ...

테스크 코드 내용 수정

'1개 이상'이란 표현을 구체적으로 '2개'로 표현

…signment-1

eslint 적용

timothypark33 · 2021-12-18T13:16:58Z

리뷰

주어진 피드백 잘 반영했습니다 피드백으로 향상되어감이 느껴집니다. 감사합니다.
테스트 코드 이번에 처음 해보는데 솔직히 제대로 하고있나 의문은 정말 많았습니다.
뭘 질문해야할 지도 모르겠었고 잘못 짚었었는데 그래도 피드백 주셔서 여기까지 완성할 수 있었습니다.

그런데 저희가 1-2주차에서 사용한 테스트 코드는 codeceptjs를 사용하셨던데
다음 주차 과제에서 테스트 코드 작성시 codeceoptjs까지 사용하는게 좋을까요??

moonkii · 2021-12-18T16:10:52Z

src/App.test.jsx

+    expect(getByLabelText('할 일').value).toBe('');
+  });
+
+  it('할 일을 추가하고 모두 삭제하면 "할 일이 없어요!"가 뜬다. ', () => {


여기서 핵심으로 확인하고 싶은게 무엇일까요?
그걸 테스트 시나리오에 드러내주면 좋을 것 같아요.

moonkii · 2021-12-18T16:11:19Z

src/Input.test.jsx

+    const { getByLabelText } = InputComponent();
+    expect(getByLabelText('할 일')).toHaveAttribute('value', value);
+  });
+
+  it('추가 버튼이 작동한다.', () => {
+    const { getByText } = InputComponent();
+    expect(handleClick).not.toBeCalled();
+    fireEvent.click(getByText('추가'));
+    expect(handleClick).toBeCalled();
+  });
+
+  it('textbox에 값이 입력된다.', () => {
+    const { getByLabelText } = InputComponent();
+    expect(handleChange).not.toBeCalled();
+    fireEvent.change(getByLabelText('할 일'), {
+      target: {
+        value: 'test2',
+      },
+    });
+    expect(handleChange).toBeCalled();


의미상으로 구분되는 경우 빈 줄을 넣어서 구분해주면 코드 가독성이 더 좋을 것 같아요!

moonkii · 2021-12-18T16:11:44Z

src/Input.test.jsx

+
+  const value = 'test';
+
+  const InputComponent = () => render(


어떤 역할을 하는지 함수의 이름을 더 명확하게 해줄 수 있을까요?

moonkii · 2021-12-18T16:12:09Z

src/List.test.jsx

+const ListComponent = (task) => render(
+  <List
+    tasks={task}
+    onClickDelete={handleClick}
+  />,
+);


Suggested change

const ListComponent = (task) => render(

<List

tasks={task}

onClickDelete={handleClick}

/>,

);

const ListComponent = (task) => render((

<List

tasks={task}

onClickDelete={handleClick}

/>

));

괄호로 두 번 감싸주면 콤마를 없앨 수 있어요!

moonkii · 2021-12-18T16:12:41Z

src/List.test.jsx

+  { id: 101, title: '물 마시기' },
+];
+
+const ListComponent = (task) => render(


컴포넌트를 render 해주는 함수는 describe 내부에 있는게 좋아요.

moonkii · 2021-12-18T16:12:57Z

src/Page.test.jsx

+    { id: 100, title: '숨 쉬기' },
+  ]);
+
+  context('언제든지', () => {


이 부분은 제거해줘도 될 것 같아요.

moonkii · 2021-12-18T16:14:18Z

그런데 저희가 1-2주차에서 사용한 테스트 코드는 codeceptjs를 사용하셨던데
다음 주차 과제에서 테스트 코드 작성시 codeceoptjs까지 사용하는게 좋을까요??

인수테스트는 아마 미리 작성되어 있을거에요.
원래는 인수테스트 -> 단위 테스트 순으로 작성하는데 지금 과제에서는 단위 테스트에 좀 더 초점맞춰서 진행하고 있어요 ;)

moonkii · 2021-12-19T15:31:49Z

src/Input.test.jsx

+    expect(handleClick).toBeCalled();
+  });
+
+  it('textbox에 값이 입력된다.', () => {


값이 입력되는 것 보다는 handleChange 함수가 호출되는게 핵심인 것 같아요.

moonkii · 2021-12-19T15:32:26Z

src/List.test.jsx

+    { id: 101, title: '물 마시기' },
+  ];
+
+  const renderComponent = (task) => render((


어떤 컴포넌트를 render 해주는지 구체적으로 이름을 지어주시면 좋을 것 같아요.
만약에 저라면 renderList 정도로 표현했을 것 같아요 ;)

moonkii · 2021-12-19T15:33:03Z

src/Page.test.jsx

+  given('noTask', () => []);
+  given('tasks', () => [
+    { id: 100, title: '숨 쉬기' },
+  ]);


task 는 하나의 변수로 관리해주면 좋을 것 같아요.

moonkii · 2021-12-19T15:34:39Z

src/Page.test.jsx

+  context('List에게 task가 없을 떄', () => {
+    it('"할 일이 없어요"를 그린다.', () => {
+      const { container } = render(<Page tasks={given.noTask} />);
+
+      expect(container).toHaveTextContent('할 일이 없어요!');
+    });
+  });
+
+  context('List에게 task가 있을 때', () => {
+    it('task를 그린다.', () => {
+      const { container, getAllByText } = render(<Page tasks={given.tasks} />);
+
+      expect(container).toHaveTextContent(given.tasks[0].title);
+      expect(getAllByText('완료')[0]).toContainHTML('button');
+    });
+  });


Suggested change

context('List에게 task가 없을 떄', () => {

it('"할 일이 없어요"를 그린다.', () => {

const { container } = render(<Page tasks={given.noTask} />);

expect(container).toHaveTextContent('할 일이 없어요!');

});

});

context('List에게 task가 있을 때', () => {

it('task를 그린다.', () => {

const { container, getAllByText } = render(<Page tasks={given.tasks} />);

expect(container).toHaveTextContent(given.tasks[0].title);

expect(getAllByText('완료')[0]).toContainHTML('button');

});

});

context('List에게 task가 없을 떄', () => {

given('tasks', () => []);

it('"할 일이 없어요"를 그린다.', () => {

const { container } = render(<Page tasks={given.noTask} />);

expect(container).toHaveTextContent('할 일이 없어요!');

});

});

context('List에게 task가 있을 때', () => {

given('tasks', () => {

id: 100,

title: '할 일',

});

it('task를 그린다.', () => {

const { container, getAllByText } = render(<Page tasks={given.tasks} />);

expect(container).toHaveTextContent(given.tasks[0].title);

expect(getAllByText('완료')[0]).toContainHTML('button');

});

});

given 을 context 에 따라 활용한다면 이런 형태가 될거에요.

timothypark33 · 2021-12-20T08:15:05Z

일요일날 마지막까지 리뷰 정말 감사합니다.
반복제거
핵심 시나리오 작성
task는 최소한
given 사용법
모두 잘 이해할 수 있었습니다.

timothypark33 added 3 commits December 14, 2021 21:13

input 컴포넌트 테스트 코드 작성

64e87a6

input 컴포넌트 테스트 코드 작성/미완

f58b4bb

Merge branch 'main' of https://github.com/GUAJEGUICHAN/react-week3-as…

43f26b8

…signment-1

moonkii reviewed Dec 14, 2021

View reviewed changes

timothypark33 added 10 commits December 15, 2021 19:24

[chore] 주석변경 / it= -> test

f9843e4

input 테스트에서 추가버튼 작동확인과 textbox 작동확인 구분

[chore] jest-dom, jest 업데이트

27a5520

[test] List 컴포넌트에서 length가 0일때 '할일이 없어요' 출력 확인

d420874

[test] List컴포넌트에서 task의 length가 1이상 일 때

e2cd6fd

해당 Item 컴포넌트 출력확인

[chore] 오타 수정

7aab82b

[chore] 오타 수정

7489c2b

[test]toBeCalledTimes를 toBeCalled로 수정

cf699d3

[test] List 컴포넌트 테스크 코드 작성

0da86f4

[refactor] eslint 적용

696dbb6

[test] Page 컴포넌트 테스트 코드

36a5606

moonkii reviewed Dec 15, 2021

View reviewed changes

src/Input.test.jsx Outdated Show resolved Hide resolved

moonkii reviewed Dec 15, 2021

View reviewed changes

src/List.test.jsx Outdated Show resolved Hide resolved

moonkii reviewed Dec 15, 2021

View reviewed changes

src/Page.test.jsx Outdated Show resolved Hide resolved

timothypark33 added 10 commits December 16, 2021 21:38

[test] describe, it 이용한 테스트 코드 작성

1819b25

테스크 코드 내용 수정

[test] describe, context, it 사용하여 테스트 코드 작성

96ef210

'1개 이상'이란 표현을 구체적으로 '2개'로 표현

[refacfor]eslint 적용

d7e1b1a

[refactor]eslint 적용

1ccd81d

Merge branch 'main' of https://github.com/GUAJEGUICHAN/react-week3-as…

136dc85

…signment-1

[test] describe, context, it을 이용한 테스트 코드

f45e2f8

[refactor] beforeEach를 사용했다.

dade8a3

eslint 적용

[refactor] Input 컴포넌트 줄바꿈

2fdf981

[test] App 컴포넌트 테스트 코드 작성

653d2c1

[refactor] tasks 파일 수정

86a47db

timothypark33 added 5 commits December 18, 2021 20:17

[refactor]task 하나만 남기기

e9b7012

[refactor] 매개변수로 중복되는 함수 줄이기

7bdb587

[refactor]불필요한 context제거

acce549

[refactor]반복되는 task 줄이기

c746d4a

[refactor] given을 사용하여 task에 값을 할당

e04bb41

moonkii reviewed Dec 18, 2021

View reviewed changes

timothypark33 added 7 commits December 19, 2021 18:26

[refactor] 시나리오에 핵심 내용 반영

ce5e409

[refactor] 빈 줄 넣어서 의미단위로 구분하기

c200372

[refactor] 함수이름 구체화

939282e

[refactor] , 없애기

f7df594

[refactor] 변수와 함수 describe에 넣기

8d6173e

[refactor] 불필요한 context 제거

8a1da43

eslint 적용

383574c

moonkii reviewed Dec 19, 2021

View reviewed changes

timothypark33 added 4 commits December 20, 2021 16:58

[refactor] 핵심만 시나리오 작성하기

4a34cfc

[refactor] 구체적인 함수이름 작성하기

aabf9d3

[refactor] task는 하나만 관리하기

4db4c3b

[refactor] given을 context에 따라 활용하기

88ec30d

moonkii merged commit 5d06c1e into CodeSoom:GUAJEGUICHAN Dec 20, 2021

To-do 테스트 작성하기 #99

To-do 테스트 작성하기 #99

Uh oh!

Conversation

timothypark33 commented Dec 14, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

진도

Uh oh!

moonkii left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

timothypark33 commented Dec 15, 2021

Uh oh!

moonkii commented Dec 15, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

timothypark33 commented Dec 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

timothypark33 commented Dec 18, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

리뷰

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

moonkii commented Dec 18, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

timothypark33 commented Dec 20, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

timothypark33 commented Dec 14, 2021 •

edited

Loading

timothypark33 commented Dec 16, 2021 •

edited

Loading

timothypark33 commented Dec 18, 2021 •

edited

Loading