코딩연습장

+버튼과 -버튼이 있고, count를 화면에 보여주는 컴포넌트가 있다고 생각해보자.컴포넌트를 만들고 작동시키기 전에 TDD는 테스트코드부터 작성해야한다.import { render, screen } from "@testing-library/react";import App from "./App";test("the counter starts at 0", () => { render(); //screen object를 이용해서 원하는 엘리먼트에 접근(ID) const counterElement = screen.getByTestId("counter"); //id가 counter인 엘리먼트의 텍스트가 0인지 테스트 expect(counterElement).toBe(0);});counter..

CRA로 생성한 프로젝트는 테스팅 라이브러리가 자동으로 설치되어있다. 또한 기본 App.js를 위한 테스트코드도 한개가 작성되어 있다. 터미널에 npm test를 입력해보자. import { render, screen } from '@testing-library/react';import App from './App';test('renders learn react link', () => { render(); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument();});render은 안의 컴포넌트를 렌더링하는 함수이다.import logo from "./logo.svg";import "./A..