프로그래밍/testing
[react-testing-library] 테스트 코드 작성 시 Tip
[react-testing-library] 테스트 코드 작성 시 Tip
2022.03.02🎯 테스트 코드 작성 시 Tip 테스트 코드를 3가지 관점으로 작성하면 쉽게 작성할 수 있다. 📝 Three “A”s test("renders Changed! if the button was clicked", () => { // Arrange render(); // Act const buttonElement = screen.getByRole("button"); userEvent.click(buttonElement); // Assert const outputElement = screen.getByText("Changed!"); expect(outputElement).toBeInTheDocument(); }); Arrange : 테스트 데이터와 테스트 조건 및 환경 설정을 준비 Act : 테스트해야 하는 로..
[react-testing-library] 유저 이벤트
[react-testing-library] 유저 이벤트
2022.01.17🎯 유저 이벤트 📝 user-event 내장 이벤트 함수인 fireEvent, createEvent를 좀 더 직관적이고 범용적으로 사용할 수 있도록 만든 라이브러리 click, type, keyboard, upload, hover, tab 등 유저가 실제로 웹페이지를 사용하며 만드는 이벤트를 메서드로 제공한다. 📝 user-event - click import userEvent from "@testing-library/user-event"; import { render } from "@testing-library/react"; userEvent.click(submitButton) userEvent.click(submitButton, { shiftKey: true }) userEvent.click(subm..
[react-testing-library] 쿼리의 우선순위
[react-testing-library] 쿼리의 우선순위
2022.01.17🎯 쿼리의 우선순위 유저가 페이지를 이동하는 방식에 가까운 쿼리일수록 우선순위가 높다. 접근성 높은 HTML을 작성할수록 테스트가 용이한 코드가 된다. 📝 ByRole (제일 높음) accessibility tree에 있는 요소들을 기준으로 원소를 찾는다. 유저가 웹 페이지를 사용하는 방식을 가장 닮은 쿼리 동일한 role을 가진 경우, accessible name을 이용해 원소를 구별한다. accessible name이란 원소의 특징을 나타내는 이름이다. 임의로 role 혹은 aria-*을 부여하는 것을 지양한다. 자주 사용되는 Role : button, checkbox, listitem, heading, img, form, textbox, link 자주 사용되는 accessible name butto..
[react-testing-library] react-testing-library란?
[react-testing-library] react-testing-library란?
2022.01.17🎯 react-testing-library 테스트가 소프트웨어가 사용되는 모습을 닮을수록, 테스트를 더욱 신뢰할 수 있게 된다. The more your tests resemble the way your software is used, the more confidence they can give you. 사용되는 모습이란? 사용자가 직접 앱을 사용하는 모습이다. React 컴포넌트의 특정 메서드나 상태를 테스트하는 게 아니라, 실제 유저가 사용하는 방식대로 테스트하는 접근하는 것이다. 유저가 페이지에서 어떤 DOM 요소에 접근하는 방법을 흉내 낸다. 이 방식으로 테스트 코드를 작성하면, 내부 구현이 바뀌어도 테스트가 깨지지 않는다. React 컴포넌트가 렌더링 한 결과에 대한 접근만 가능하다. 결과 중심..
[Jest] Async assertion
[Jest] Async assertion
2022.01.17🎯 Async assertion callback 패턴의 경우 test() 함수가 제공하는 done() 함수를 활용하여 콜백이 끝나고 done()을 호출이 된다. 에러가 발생하면 done()의 인자로 에러를 넘긴다. Promise 패턴의 경우 async/await을 활용하거나 Promise를 리턴한다. function isPythagoreanAsync(a, b, c) { return new Promise(resolve => { setTimeout(() => { const result = isPythagorean(a, b, c) if (result) return resolve(result) reject(new Error("Not pythagorean")) }, 500) }) } test('Should 3, ..
[Jest] Assertion Matchers 활용
[Jest] Assertion Matchers 활용
2022.01.17🎯 Assertion Matchers 활용 toBe() : 객체의 내용을 비교 toEqual() : 객체 자체를 비교할 toContain() toMatch() toThrow() function isPythagorean(a, b, c) { return a * a + b * b === c * c } function createTodo(id, title, content) { return { id, title, content } } function transformUser(user) { const { name, age, address } = user return [name, age, address] } 📝 toBe() test('Should 3, 4, 5 pythagorean', () => { expect(is..
[jest] jest란?
[jest] jest란?
2022.01.17🎯 jest facebook에서 오픈소스화한 테스팅 프레임워크 assertion 함수들, test runner, mock 라이브러리 등을 모두 제공한다. create-react-app에서 기본적으로 사용된다. (npm test) 사용성이 좋고, 가장 인기 있는 프로젝트다. 📝 jest의 핵심 기능들 assertion matchers (.toBe, .toEqual) async assertion mock functions testing lifecycle functions grouping snapshot testing 📝 Assertion matchers jest는 풍부한 matcher를 제공하여, 여러 상황에서 match를 체크할 수 있다. expect()는 expectation object를 리턴한다. 이..