React15일차-UnitTest(jest)

어제는 오랜만에 친구를 만나고 와서 쉬었습니다....ㅎㅎㅎ

오늘은 UnitTest에 대해서 알아보겠습니다. 즉 전체가아닌 일부분중 하나만 검사하는 것이라고 생각하시면 됩니다.

여러가지가 있지만 create-react-app에서 하는 jest에 대해서 알아보겠습니다.

우선 파일 만들 vscode열어서 npm init -y 하고npm i jest -D로 jest 설치해주세요

이렇게 나오고 package.json으로 가서

"test": "echo \"Error: no test specified\" && exit 1"

를

 "test": "jest"

ㄹ로변경해주세요

npm test를 치면 jest가 실행되도록 해주는 것입니다.

이제 ex.test.js를 만들어서 테스트 할 내용을 하나 하나씩 만들어 봅시다.

우선 작성된 내용이 없으니 아주 기본만 되도록 해봅시다.

test("", () => {}); ㅇ이게 기본 형식이 됩니다. ""안에 테스트내용을 요약해서 적어주시면 되고 

그다음에  테스트할내용을 함수로 적어주시면 됩니다.

test("", () => {

  expect(5 + 4).toBe(7);

});

이렇게 입력하고 터미널에 npm test를 눌러 봅시다.

위로 조금 올리면 

이렇게 나옵니다 이게 무슨 말이냐고 하면

Expected는 우리가 기대한 값입니다 우리는 7이 나온다고 주장을 했다고 합니다.

REceived는 실제로 받은 값 실제로 9가 나왓습니다. 그래서 저 두개가 다르니까 fail이 된겁니다

그럼 코드를 보겠습니다.

expect(5 + 4).toBe(7);

여기서 expect에는 우리가 테스트할 내용을 적어주시고  toBe에는 우리가 예상할 값을 넣어주시면 됩니다.

즉  영어 그래도 해석하면 5+4는 기대된다 7이 될것이라고  이런식으로 이해하면 빠르고 좋을 거같습니다.

즉 5+4는9인데7이 될거라고 했으니까 틀렸다 라는 의미입니다.

9로 고치고 다시 npm test를 눌러보면

이렇게 제대로 동작된것을 알수 있습니다.

그럼 우리가 칠때마다 npm test치면 불편 하니까 계속  바뀔때마다 자동으로 테스트하게 해주겠습니다.

npx jest --watchAll

이렇게 뜨고 저장 한번하면 제대로 동작 됩니다.

그럼 이제 하나씩 테스트하면 알아보겠습니다

expect({ age: 39 }).toBe({ age: 39 });

이거는 제대로 동작이 될까요???

땡 동작이 안됩니다.  이건 겉모양만 같은거고 사실상 안에 내용은 다른 것입니다. 즉 객체는 저런 같은내용이더라도 

다를 수 있습니다. 그러면 어떻게 확이해야 되나 할수있습니다. 바로 toEqual을 써보시면 됩니다

 

expect({ age: 39 }).toEqual({ age: 39 });

을쓰면 이렇게 제대로 나오게 됩니다.

expect("hello").toHaveLength(5); 이거는 어떤 기능인줄 알아보겠습니다. 즉 글자의 길이를 알아보는 겁니다.

hello의 길이가 5이면 pass고 아니면 error가뜰 것입니다.

expect("hello").toHaveLength(5);

 

expect("hello").toHaveLength(4);

expect({ name: "Mark" }).toHaveProperty("name");

 expect({ name: "Mark" }).toHaveProperty("name", "Mark");

이거는 알아 보겠습니다. 즉  위에는 name이라는 요소가 있느냐 라고 질문하는 것입니다

밑에는 name:Mark가 있는지 질문한는 것이고요 name과mark둘중 한개라도 틀린면 오류 입니다.

expect({ name: "Mark" }).toHaveProperty("Mark");

이거는 어떻게 될까요??

오류가 나옵니다. 즉 value즉 오른쪽에 있는것만 가지고 탐색은 안됩니다. key즉 왼쪽에있는것은 혼자로 있는지는 되지만

value값은 혼자서 확인이 안됩니다.

기본

expect({ name: "Mark" }).toHaveProperty("name", "Marks");

expect({ name: "Mark" }).toHaveProperty("Mark");

expect({ name: "Mark" }.name).toBeDefined();이거는 조금 집중해서 보면 { name: "Mark" }.name여기가 중요합니다.

{ name: "Mark" }에name이라는 key값이 정의 되어있냐 라는 의미입니다.

expect({ name: "Mark" }.age).toBeDefined();이렇게 바꾸면 오류가 나오게 됩니다.

expect({ name: "Mark" }.name).toBeDefined();

expect({ name: "Mark" }.age).toBeDefined();

    expect(false).toBeFalsy();
    expect(0).toBeFalsy();
    expect("").toBeFalsy();
    expect(null).toBeFalsy();
    expect(undefined).toBeFalsy();
    expect(NaN).toBeFalsy();

이건 ()안에 값이 false를 의미하는 거냐 라는 뜻입니다. 즉 0,null,undefined,NaN등은 전부 false를 뜻하는 것이기때문에 

제대로 동작이 될것입니다

즉 ()안에 1이나 문자를 넣는다면 실패 하게 될것입니다.

기본

expect(1).toBeFalsy();

   expect(10).toBeGreaterThanOrEqual(10);
expect(10).toBeGreaterThanOrEqual(9);
expect(10).toBeGreaterThan(9);

이거 세개는 <=,< 이거를 나타냅니다 즉 왼쪽이 오른쪽 값보다 크냐 또는 크거나 같냐 라고 질문하는거 기 때문에 제대로 동작이 됩니다.

  expect(10).toBeGreaterThanOrEqual(11);즉 이렇게 하면 오류가 나오게 됩니다.

  expect(10).toBeGreaterThanOrEqual(11);

 class Foo {}

  expect(new Foo()).toBeInstanceOf(Foo);

이거는 왼쪽이 오른쪽에 속해 있냐 라는 의미입니다.

즉 클래스에서 오른쪽에 적혀있는 클래스에 속해있냐 라고 묻는것입니다.

Foo클래스에서 만든것이므로 제대로 동작이 됩니다.

이번 게시글은 이까지 하고 다음 게시글은 create-react-app에서 컴포넌트를 만들어서 제대로 동작되나 해보겠습니다. ㅎㅎ