jest 설치

1. jest,babel-jest 설치

npm i -D jest babel-jest

2. VS Code 의 경우 type 설정을 안해주면, 자동완성에서 문제가 생길 수 있음, 아래 설치

npm i -D @types/jest

3. ~.test.js 파일로 만들면 test를 할 수 있다.

simple.test.js 파일로 생성한 경우 아래와 같이 작성 가능

test('simple', () => {
  // assertion단언문=>A(actual실제로일어난일)가 B(expect기대하는것)여야한다.
  expect(1 + 1).toBe(2); // 1+1이 2여야한다.
});
// 1번째인자:test이름(simple) / 2번째인자:test할 function

4. jest 실행 (=>6번이 더 편한 방법)

npx jest

5. 코드 오류뜨는 건 .eslintrc.js 에서 jest부분 수정하여 해결

jest: true,

6. jest 실행할때마다 4번 코드치면 불편/ 아래 코드치면 계속해서 프로젝트 test파일을 다 감시함

npx jest --watchAll

*. test 코드 참고

function add(x, y) {
  // TODO:
  return x + y;
}

test('add', () => {
  expect(add(1, 3)).toBe(4);
});

/*
Signature : 메소드, function에 대해 구별할 수 있는 특징
-name(add),parameters(x,y),return(result)
*/
// TDD Cycle:RED-GREEN-REACTORING

TEST coverage

npm run coverage
or
npx jest --coverage

test:e2e

npm run test:e2e

React testing library

리액트 테스팅 라이브러리는 사용자와 동일한 방식으로 DOM 쿼리를 사용할 수 있게 해줍니다. 실제 사용자가 우리의 앱을 사용하는 방식으로 테스트하여 우리의 앱이 올바르게 동작하는지 테스트할 수 있습니다.

1.설치

npm i -D @testing-library/react @testing-library/jest-dom

@testing-library/jest-dom

@testing-library/jest-dom은 jest의 matcher들을 확장하여 테스트의 의도를 더 명확하게 표현할 수 있습니다.(dom확장)

2.jest.config.js 파일 만들고 아래 코드 작성

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: [
    './jest.setup',
  ],
};

=> testEnvironment: 'jsdom' >>강의에는 안나옴/이걸 설정해줘야 render 오류가 안남

3.jest.setup 파일 만들고 item.test.jsx 에 작성했던 아래 코드를 여기에 옮기기(test할때마다 안써줘도 되기 위해 설정함)

import '@testing-library/jest-dom';

4. npm i -D jest-environment-jsdom 설치(강의에는 안나옴/이걸 설정해줘야 render 오류가 안남)

npm i -D jest-environment-jsdom

▼ 안할시 났던 오류(jsdom)

▼ 기존 item.jsx 참고

import React from 'react';

export default function Item({ task: { id, title }, onClickDelete }) {
  return (
    <li>
      {title}
      <button type="button" onClick={() => onClickDelete(id)}>
        완료
      </button>
    </li>
  );
}

▼ item.test.jsx 작성 코드 (이 곳에 test해봄)

import React from 'react';

import { render, fireEvent } from '@testing-library/react';

import Item from './Item';
// 기존 Item 파일에 props로 값 변경해주기 위해

test('Item', () => {
  const task = {
    id: 1,
    title: '뭐라도 하기',
  };// 매개변수 값 다시 설정

  const handleClick = jest.fn();
  // handleClick= jest가 미리 준비한 function

  const { container, getByText } = render((
    <Item
      task={task}
      onClickDelete={handleClick}
    />
  ));
  // getByText :text요소를 찾음
  // render 그려주기

  expect(container).toHaveTextContent('뭐라도 하기');
  expect(container).toHaveTextContent('완료');

  // const button = getByText('완료');
  // fireEvent.click(button);

  expect(handleClick).not.toBeCalled();
  // .not.toBeCalled(): 실행이 안되다가

  fireEvent.click(getByText('완료'));

  /*  expect(handleClick).toBeCalled();
  // .toBeCalled(): 위에서 click하니까 실행 */

  expect(handleClick).toBeCalledWith(1);
  // toBeCalledWith(): 어떤 인자를 받아 실행이되는지(item.jsx에서 이미 id를 인자로 받기로 설정해서 위에 1이 들어감)
});

// describe-context-it 방법도 많이 사용(jest는 context기능을 지원안하나, 플러그인따로 설치해서 함)
// given

▼ npx jest --watchAll 실행시 터미널 화면

render()

react-testing-library 에서 컴포넌트를 렌더링 할 때에는 render() 라는 함수를 사용한다.

fireEvent()

이 함수는 이벤트를 발생시켜준다.

fireEvent.이벤트이름(DOM, 이벤트객체);

toHaveAttribute()

jest-dom의 toHaveAttribute() matcher 함수를 이용해서 속성값이 정확한지 검증할 수 있다.

https://velog.io/@velopert/react-testing-library

react-testing-library 를 사용한 리액트 컴포넌트 테스트

react-testing-library 에서는 Enzyme 과 달리 모든 테스트를 DOM 위주로 진행합니다. 그리고, 컴포넌트의 props 나 state 를 조회하는 일은 없습니다. 컴포넌트를 리팩토링하게 될 때에는, 주로 내부 구조 및

velog.io

[벨로퍼트 정리 참고하기]

다양한 쿼리

render 함수를 실행하고 나면 그 결과물 안에는 다양한 쿼리 함수들이 있는데요, 이 쿼리 함수들은 react-testing-library 의 기반인 dom-testing-library 에서 지원하는 함수들입니다.

이 쿼리 함수들은 Variant 와 Queries 의 조합으로 네이밍이 이루어져있는데요, 우선 Varient 에는 어떤 종류들이 있는지 봅시다.

Variant

getBy

getBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 하나를 선택합니다. 만약에 없으면 에러가 발생합니다.

getAllBy

getAllBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 여러개를 선택합니다. 만약에 하나도 없으면 에러가 발생합니다.

queryBy

queryBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 하나를 선택합니다. 만약에 존재하지 않아도 에러가 발생하지 않습니다.

queryAllBy

queryAllBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 여러개를 선택합니다. 만약에 존재하지 않아도 에러가 발생하지 않습니다.

findBy

findBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 하나가 나타날 때 까지 기다렸다가 해당 DOM 을 선택하는 Promise 를 반환합니다. 기본 timeout 인 4500ms 이후에도 나타나지 않으면 에러가 발생합니다.

findAllBy

findBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 여러개가 나타날 때 까지 기다렸다가 해당 DOM 을 선택하는 Promise 를 반환합니다. 기본 timeout 인 4500ms 이후에도 나타나지 않으면 에러가 발생합니다.

Queries

ByLabelText

ByLabelText 는 label 이 있는 input 의 label 내용으로 input 을 선택합니다.

<label for="username-input">아이디</label>
<input id="username-input" />

const inputNode = getByLabelText('아이디');

ByPlaceholderText

ByPlaceholderText 는 placeholder 값으로 input 및 textarea 를 선택합니다.

<input placeholder="아이디" />;

const inputNode = getByPlaceholderText('아이디');

ByText

ByText는 엘리먼트가 가지고 있는 텍스트 값으로 DOM 을 선택합니다.

<div>Hello World!</div>;

const div = getByText('Hello World!');

참고로, 텍스트 값에 정규식을 넣어도 작동합니다.

const div = getByText(/^Hello/);

ByAltText

ByAltText 는 alt 속성을 가지고 있는 엘리먼트 (주로 img) 를 선택합니다.

<img src="/awesome.png" alt="awesome image" />;

const imgAwesome = getByAltText('awesomse image');

ByTitle

ByTitle 은 title 속성을 가지고 있는 DOM 혹은 title 엘리먼트를 지니고있는 SVG 를 선택 할 때 사용합니다.

title 속성은 html 에서 툴팁을 보여줘야 하는 상황에 사용하곤 합니다.

<p>
  <span title="React">리액트</span>는 짱 멋진 라이브러리다.
</p>

<svg>
  <title>Delete</title>
  <g><path/></g>
</svg>

const spanReact = getByTitle('React');
const svgDelete = getByTitle('Delete');

ByDisplayValue

ByDisplayValue 는 input, textarea, select 가 지니고 있는 현재 값을 가지고 엘리먼트를 선택합니다.

<input value="text" />;

const input = getByDisplayValue('text');

ByRole

ByRole은 특정 role 값을 지니고 있는 엘리먼트를 선택합니다.

<span role="button">삭제</span>;

const spanRemove = getByRole('button');

ByTestId

ByTestId 는 다른 방법으로 못 선택할때 사용하는 방법인데요, 특정 DOM 에 직접 test 할 때 사용할 id 를 달아서 선택하는 것을 의미합니다.

<div data-testid="commondiv">흔한 div</div>;

const commonDiv = getByTestId('commondiv');

!> 주의: camelCase 가 아닙니다. 값을 설정할때 data-testid="..." 이렇게 설정하셔야합니다. 추가적으로, ByTestId 는 다른 방법으로 선택할 수 없을때에만 사용해야합니다.

어떤 쿼리를 사용해야 할까?

쿼리의 종류가 정말 많죠? 그렇다면, 어떤 쿼리를 우선적으로 사용해야 할까요? 매뉴얼 에서는 다음 우선순위를 따라서 사용하는것을 권장하고있습니다.

getByLabelText
getByPlaceholderText
getByText
getByDisplayValue
getByAltText
getByTitle
getByRole
getByTestId

그리고, DOM 의 querySelector 를 사용 할 수도 있는데요, 이는 지양해야합니다. 차라리 data-testid 를 설정하는것이 좋습니다.

const utils = render(<MyComponent />);
const element = utils.container.querySelector('.my-class');

다양한 쿼리

이 쿼리 함수들은 Variant 와 Queries 의 조합으로 네이밍이 이루어져있는데요, 우선 Varient 에는 어떤 종류들이 있는지 봅시다.

Variant

getBy

getBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 하나를 선택합니다. 만약에 없으면 에러가 발생합니다.

getAllBy

getAllBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 여러개를 선택합니다. 만약에 하나도 없으면 에러가 발생합니다.

queryBy

queryBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 하나를 선택합니다. 만약에 존재하지 않아도 에러가 발생하지 않습니다.

queryAllBy

queryAllBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 여러개를 선택합니다. 만약에 존재하지 않아도 에러가 발생하지 않습니다.

findBy

findAllBy

Queries

ByLabelText

ByLabelText 는 label 이 있는 input 의 label 내용으로 input 을 선택합니다.

<label for="username-input">아이디</label>
<input id="username-input" />

const inputNode = getByLabelText('아이디');

ByPlaceholderText

ByPlaceholderText 는 placeholder 값으로 input 및 textarea 를 선택합니다.

<input placeholder="아이디" />;

const inputNode = getByPlaceholderText('아이디');

ByText

ByText는 엘리먼트가 가지고 있는 텍스트 값으로 DOM 을 선택합니다.

<div>Hello World!</div>;

const div = getByText('Hello World!');

참고로, 텍스트 값에 정규식을 넣어도 작동합니다.

const div = getByText(/^Hello/);

ByAltText

ByAltText 는 alt 속성을 가지고 있는 엘리먼트 (주로 img) 를 선택합니다.

<img src="/awesome.png" alt="awesome image" />;

const imgAwesome = getByAltText('awesomse image');

ByTitle

ByTitle 은 title 속성을 가지고 있는 DOM 혹은 title 엘리먼트를 지니고있는 SVG 를 선택 할 때 사용합니다.

title 속성은 html 에서 툴팁을 보여줘야 하는 상황에 사용하곤 합니다.

<p>
  <span title="React">리액트</span>는 짱 멋진 라이브러리다.
</p>

<svg>
  <title>Delete</title>
  <g><path/></g>
</svg>

const spanReact = getByTitle('React');
const svgDelete = getByTitle('Delete');

ByDisplayValue

ByDisplayValue 는 input, textarea, select 가 지니고 있는 현재 값을 가지고 엘리먼트를 선택합니다.

<input value="text" />;

const input = getByDisplayValue('text');

ByRole

ByRole은 특정 role 값을 지니고 있는 엘리먼트를 선택합니다.

<span role="button">삭제</span>;

const spanRemove = getByRole('button');

ByTestId

ByTestId 는 다른 방법으로 못 선택할때 사용하는 방법인데요, 특정 DOM 에 직접 test 할 때 사용할 id 를 달아서 선택하는 것을 의미합니다.

<div data-testid="commondiv">흔한 div</div>;

const commonDiv = getByTestId('commondiv');

어떤 쿼리를 사용해야 할까?

getByLabelText
getByPlaceholderText
getByText
getByDisplayValue
getByAltText
getByTitle
getByRole
getByTestId

그리고, DOM 의 querySelector 를 사용 할 수도 있는데요, 이는 지양해야합니다. 차라리 data-testid 를 설정하는것이 좋습니다.

const utils = render(<MyComponent />);
const element = utils.container.querySelector('.my-class');

Common Matchers

toBe

정확한 값 일치 여부 확인

test('two plus two is four', () => {
  expect(2 + 2).toBe(4);
});

toEqual

객체(object)의 값 일치 여부 확인

test('object assignment', () => {
  const data = {one: 1};
  data['two'] = 2;
  expect(data).toEqual({one: 1, two: 2});
});

not

불일치 여부 확인

test('adding positive numbers is not zero', () => {
  for (let a = 1; a < 10; a++) {
    for (let b = 1; b < 10; b++) {
      expect(a + b).not.toBe(0);
    }
  }
});

Truthiness

toBeNull

null 여부 만 확인

toBeUndefined

undefined 여부 만 확인

toBeDefined

toBeUndefined의 반대 경우 확인

toBeTruthy

true로 취급되는 구문을 확인

toBeFalsy

false로 취급되는 구문을 확인

test('null', () => {
  const n = null;
  expect(n).toBeNull();
  expect(n).toBeDefined();
  expect(n).not.toBeUndefined();
  expect(n).not.toBeTruthy();
  expect(n).toBeFalsy();
});

test('zero', () => {
  const z = 0;
  expect(z).not.toBeNull();
  expect(z).toBeDefined();
  expect(z).not.toBeUndefined();
  expect(z).not.toBeTruthy();
  expect(z).toBeFalsy();
});

Numbers

toBeGreaterThan

큰 숫자 여부 확인

toBeGreaterThanOrEqual

같거나 큰 숫자 여부 확인

toBeLessThan

작은 숫자 여부 확인

toBeLessThanOrEqual

같거나 작은 숫자 여부 확인

test('two plus two', () => {
  const value = 2 + 2;
  expect(value).toBeGreaterThan(3);
  expect(value).toBeGreaterThanOrEqual(3.5);
  expect(value).toBeLessThan(5);
  expect(value).toBeLessThanOrEqual(4.5);

  // toBe and toEqual are equivalent for numbers
  expect(value).toBe(4);
  expect(value).toEqual(4);
});

Strings

toMatch

정규식을 이용해서 문자열의 일치 여부 확인

test('there is no I in team', () => {
  expect('team').not.toMatch(/I/);
});

test('but there is a "stop" in Christoph', () => {
  expect('Christoph').toMatch(/stop/);
});

Arrays and iterables

toContain

Array 또는 iteration이 가능한 (Set, Map 등...) 객체에 특정 요소 포함 여부를 확인

const shoppingList = [
  'diapers',
  'kleenex',
  'trash bags',
  'paper towels',
  'beer',
];

test('the shopping list has beer on it', () => {
  expect(shoppingList).toContain('beer');
  expect(new Set(shoppingList)).toContain('beer');
});

Exceptions

toThrow

함수 호출 시 에러 발생 여부 확인
단순 에러 및 특정 에러 지정 가능

function compileAndroidCode() {
  throw new Error('you are using the wrong JDK');
}

test('compiling android goes as expected', () => {
  expect(compileAndroidCode).toThrow();
  expect(compileAndroidCode).toThrow(Error);

  // You can also use the exact error message or a regexp
  expect(compileAndroidCode).toThrow('you are using the wrong JDK');
  expect(compileAndroidCode).toThrow(/JDK/);
});

https://velog.io/@modolee/jest-user-guide-04

npm i -D jest-environment-jsdom 관련

https://velog.io/@coolchaem/ReactTypeScript-APP-jest-%EC%84%B8%ED%8C%853

React(TypeScript) APP: jest 세팅(3)

jest + react testing library 설치 jest 는 test framework로 널리 알려져있다. 간단한 특징은 다음과 같다. 간편한 사용법 unit test 용이한 기능 react 지원 그러나 react와 typescript를 테스트하려면 추가적인 설정

velog.io

https://www.daleseo.com/react-testing-library/

React Testing Library 사용법

Engineering Blog by Dale Seo

www.daleseo.com

https://github.com/ahastudio/CodingLife/tree/main/20220124/react-swc#jest%EC%99%80-swc%EB%A1%9C-%ED%85%8C%EC%8A%A4%ED%8A%B8-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95

GitHub - ahastudio/CodingLife: Coding Life

Coding Life. Contribute to ahastudio/CodingLife development by creating an account on GitHub.

github.com

<강의내용>

리액트 Testing

Jest

Jest는 자바스크립트 테스팅 프레임워크입니다.

간단한 설정만으로도 테스트를 실행할 수 있습니다.
풍부한 matcher를 제공하여 별도의 모듈 없이 테스트를 더 풍부하게 표현할 수 있습니다.
Coverage도 별도의 설치 없이 확인할 수 있습니다.
Mocking 등을 지원하여 테스트를 더 쉽게 가능하게 해주는 프레임워크입니다.

Jest 설치

npm i -D jest @types/jest babel-jest

@types/jest

Jest의 타입 정의를 가지고 있는 모듈입니다. TypeScript에서 주로 사용되지만 이 모듈을 설치하게 되면 편집기 내에서 자동완성을 지원하기 떄문에 설치합니다.

Assertion

단정문이라고 부르는 Assertion은 우리가 기대하는 값이 실제 값이랑 일치하는지 확인하는데 사용합니다. 자바스크립트의 console.assert는 우리가 기대하는 값이 아니면 콘솔에 출력되도록하여 프로그래머가 원하는 값이 아닌 경우 즉각적으로 알 수 있도록 도와줍니다. 테스트에도 단정문을 사용하여 우리가 원하는 값이 맞는지 계속해서 피드백을 얻을 수 있습니다.

Signature

모든 연산은 연산의 이름, 매개변수, 반환값을 명세합니다. 이를 시그니처라고 부릅니다.

TDD

왜 TDD를 해야 하는가

Ron Jeffries - “clean code that works”

Kent Beck - “TDD is a way of managing fear during programming.”

Kent Beck - “TDD is an awareness of the gap between decision and feedback during programming, and techniques to control that gap.”

GOOSGBT - “Software Development as a Learning Process”

모든 테스트를 완전히 자동화 하고 그 결과까지 스스로 검사하게 만들자.

테스트를 작성하기 가장 좋은 시점은 프로그래밍을 시작하기 전이다.

테스트 주도 개발은 테스트가 개발을 주도하는 방법이다. 테스트가 개발을 주도한다는 것은 테스트가 코딩의 방향을 이끌어 간다는 말이다. 테스트를 실패하는 코드가 없으면 코딩을 하지 않고, 코드상에 중복이 있으면 제거한다는 간단한 규칙을 지켜나가면 자연스레 아름다운 코드가 펼쳐진다. 덤으로 회귀 테스트도 생기고, 개발 과정 자체가 즐거워지는 보너스도 있다.

2가지 간단한 룰

먼저 자동화된 테스트에서 실패하지 않는 한 새로운 코드를 작성하지 않는다.
중복을 제거한다.

How - Red Green Refactoring

TDD에서는 처음에는 통과하지 못할(RED) 테스트를 작성하고, 이 테스트를 통과하게끔(Green) 코드를 작성하고, 결과 코드를 최대한 깔끔하게 리팩터링 하는 짧은 주기로 반복합니다.

Red - write a little test that doesn’t work, perhaps doesn’t even compile at first

test('add', () => {
  expect(add(1, 2)).toBe(3);
});

add 함수는 아직 구현된 코드가 없기에 당연히 테스트는 실패합니다. 여기서 주의할 점은 아직 add 함수를 선언하지 않은 점입니다. 테스팅 프레임워크의 에러 메시지를 먼저 확인하는 게 가장 중요합니다.

ReferenceError: add is not defined

아마 위와 같은 에러를 먼저 확인할 수 있을 겁니다. 이제 add 함수를 선언할 때입니다. 절대 스텝을 건너 뛰고 앞서가면 안 됩니다.

function add() {
}

test('add', () => {
  expect(add(1, 3)).toBe(4);
});

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

Expected: 4
Received: undefined

당연히 위와 같이 실패할 겁니다. 왜냐하면 add 함수에 내용이 없기 때문이죠. 이제 Green으로 넘어갈 차례입니다.

Green - make the test work quickly, committing whatever sins necessary in the process

수단과 방법을 가리지 않고 가장 빠르게 테스트를 통과시키는 방법은 무엇일까요? 말도 안 된다고 생각하시겠지만 TDD에서는 아래의 코드가 옳습니다.

function add() {
  return 4;
}

test('add', () => {
  expect(add(1, 3)).toBe(4);
});

Refactor - eliminate all the duplication created in just getting the test to work

이제 중복을 몰아낼 차례입니다. 먼저 의도를 드러내 볼까요?

function add() {
  return 1 + 3;
}

add 함수의 의도가 결과값에서 표현해봤습니다. 하지만 입력값이 바뀔 때마다 return을 계속 수정해줘야 하죠. 이런 중복을 어떻게 몰아낼 수 있을까요? 1, 3은 각각 어디에서 왔나요?

function add(x, y) {
  return x + y;
}

위와 같이 표현하면 중복을 몰아낼 수 있습니다. TDD에서 핵심은 Refactoring 단계입니다. 우리에겐 테스트 코드가 있으니 마음에 들 때까지 얼마든지 코드를 수정해도 문제가 생기지 않습니다. 이 부분에서 Kent Beck이 말한 TDD가 두려움을 조절하는 기술임을 확실하게 느낄 수 있습니다.

TDD에 대해서 더 공부하고 싶으신 분들은 아래 TDD FAQ를 공부해주세요!

TDD FAQ by Ashal

React testing library

설치

npm i -D @testing-library/react @testing-library/jest-dom

@testing-library/jest-dom

@testing-library/jest-dom은 jest의 matcher들을 확장하여 테스트의 의도를 더 명확하게 표현할 수 있습니다.

fireEvent

테스팅에서 DOM 이벤트를 편리하게 발생시켜주는 메서드입니다. click, change 등의 이벤트를 발생시킬 수 있죠.

Mocking

mocking은 일부 기능을 테스트할 때 의존 관계를 끊고 독립적으로 테스트할 수 있게 합니다. jest.fn()을 통해서 함수를 mocking 할 수도 있죠. Jest에서 제공하는 다양한 mocking 방법이 있으니 공식 문서를 보고 학습할 필요가 있습니다.

Sources

저작자표시

'CodeSoom- React 13기' 카테고리의 다른 글

[코드숨] 리액트 13기 -3강/React-Testing(과제 1: To-do 테스트 작성하기)아샬 강의 (0)	2022.10.29
[코드숨] 리액트 13기 -3강/React-Testing(과제 1: To-do 테스트 작성하기)관련 참고사이트 (0)	2022.10.29
[코드숨] 리액트 13기 -2강/ 과제2 - 간단한 Todo App 만들기(과제풀이) (0)	2022.10.22
[코드숨] 리액트 13기 -2강/ 과제1-Counter 앱 만들고 파일 분리하기(과제풀이) (0)	2022.10.22
[코드숨] 리액트 13기 -2강/ 과제2 - 간단한 Todo App 만들기 (0)	2022.10.20

[코드숨] 리액트 13기 -3강/React-Testing(Jest,React testing library,TDD)

jest 설치

React testing library

@testing-library/jest-dom

render()

fireEvent()

toHaveAttribute()

[벨로퍼트 정리 참고하기]

다양한 쿼리

Variant

getBy

getAllBy

queryBy

queryAllBy

findBy

findAllBy

Queries

ByLabelText

ByPlaceholderText

ByText

ByAltText

ByTitle

ByDisplayValue

ByRole

ByTestId

어떤 쿼리를 사용해야 할까?

다양한 쿼리

Variant

getBy

getAllBy

queryBy

queryAllBy

findBy

findAllBy

Queries

ByLabelText

ByPlaceholderText

ByText

ByAltText

ByTitle

ByDisplayValue

ByRole

ByTestId

어떤 쿼리를 사용해야 할까?

Common Matchers

toBe

toEqual

not

Truthiness

toBeNull

toBeUndefined

toBeDefined

toBeTruthy

toBeFalsy

Numbers

toBeGreaterThan

toBeGreaterThanOrEqual

toBeLessThan

toBeLessThanOrEqual

Strings

toMatch

Arrays and iterables

toContain

Exceptions

toThrow

<강의내용>

리액트 Testing

Jest

Jest 설치

@types/jest

Assertion

Signature

TDD

왜 TDD를 해야 하는가

2가지 간단한 룰

How - Red Green Refactoring

React testing library

설치

@testing-library/jest-dom

fireEvent