모든 개발 프로세스의 가장 중요한 목표는 프로덕션 환경에 배포할 수 있는 소프트웨어를 만드는 것입니다. 이 목표를 달성하기 위해서는 작성된 코드가 기능 사양을 모두 구현하고 장기간에 걸쳐 신뢰성과 안정성을 유지하는 것이 필수적입니다. 테스트의 목적은 애플리케이션이 추가 개발을 진행하는 동안에도 올바르게 작동하도록 보장하는 보안 조치를 제공하는 것입니다.
다양한 예외 시나리오를 고려한 포괄적인 테스트 방법을 활용하면 상당한 시간이 소요될 수 있지만, 이러한 접근 방식은 실제 운영 환경에 배포하기 전에 문제를 식별하고 수정할 수 있도록 보장합니다.
Next.js 애플리케이션 테스트
테스트 케이스 작성은 신뢰할 수 있는 소프트웨어를 개발하는 데 있어 매우 중요하지만 종종 과소평가되는 요소입니다. “코드를 만들었으니 당연히 제대로 작동할 것”이라는 가정을 믿고 테스트 없이 바로 프로덕션 단계로 코드를 배포하려는 경향은 압도적으로 매력적일 수 있습니다.
점진적 접근 방식은 언뜻 보기에는 실용적으로 보일 수 있지만, 실제 애플리케이션에서 예측할 수 없는 문제와 오류를 초래하는 경우가 많습니다. 이러한 위험을 완화하기 위해 개발자는 코드의 기능에 대한 신뢰를 강화하는 동시에 디버깅에 소요되는 시간을 줄이고 배포 단계에 도달할 때까지 발견되지 않을 수 있는 잠재적 문제를 해결할 수 있는 테스트 중심 개발(TDD) 전략을 채택함으로써 큰 이점을 얻을 수 있습니다.
Jest란 무엇인가요?
Jest 은 다양한 JavaScript 프레임워크에서 널리 사용되는 인기 있는 테스트 프레임워크입니다. 강력한 테스트 러너, 자동 모킹, 스냅샷 테스트와 같은 일련의 테스트 기능을 제공합니다.
이러한 속성은 최적으로 다양한 테스트 시나리오에서 철저한 테스트 커버리지를 용이하게 하고 애플리케이션의 신뢰성을 향상시킵니다.
Next.js 할 일 애플리케이션 만들기
Jest를 활용하여 Next.js 애플리케이션에서 단위 테스트를 실행하는 절차를 명확하게 설명할 수 있도록 해 주세요.시작하기 전에 Next.js 프로젝트를 설정하고 필요한 전제 조건을 포함시켜야 합니다.
프로세스를 시작하려면 다음 프로토콜을 진행하세요:
새 Next.js 프로젝트를 생성하려면 터미널 장치에서 앞서 언급된 명령을 실행해야 합니다:
프로젝트 생성이 완료되면 다음 명령을 실행하여 프로젝트 디렉토리에 액세스합니다:
다음 명령을 사용하여 “devDependencies”로 표시된 필수 종속성을 설치하세요:
필요한 준비가 실행되고 필요한 라이브러리가 설치되었습니다. 이제 Next.js를 사용하여 애플리케이션을 구성하고 Jest를 사용하여 테스트를 생성할 수 있는 권한이 부여되었습니다.
이 프로젝트의 코드는 GitHub 플랫폼에 저장되어 있으므로 자유롭게 액세스하여 열람하세요.
To-Do 컴포넌트 만들기
/src 프로젝트 디렉토리에 액세스하여 pages/index.js 파일을 찾아주세요. 문서에서 Next.js의 기존 템플릿 코드를 모두 삭제하고 후속 콘텐츠를 삽입하세요.
적절한 가져오기 명령문을 구현하고 사용자에게 할당된 작업을 처리하는 두 가지 함수, 즉 “할 일 추가” 및 “할 일 삭제”를 생성합니다.
import { useState } from "react";
import styles from "../styles/Home.module.css";
export default function Home() {
const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState("");
const addTodo = () => {
if (newTodo.trim() !== "") {
const updatedTodos = [...todos, newTodo];
setTodos(updatedTodos);
setNewTodo("");
}
};
const deleteTodo = (index) => {
const updatedTodos = [...todos];
updatedTodos.splice(index, 1);
setTodos(updatedTodos);
};
이 코드는 사용 상태 훅을 사용하여 상태 변수인 “todos” 및 “newTodo”를 인스턴스화 및 수정합니다. “addTodo” 함수는 사용자 입력이 비어 있지 않을 때 “할 일” 목록에 항목을 추가하는 반면, “deleteTodo” 함수는 인덱스에 따라 “할 일” 목록에서 특정 항목을 삭제합니다.
앞서 언급한 것과 관련하여, 웹 페이지의 HTML 구조 내에 표시될 자바스크립트 구성 요소를 생성하기 위한 적절한 지침 세트를 개발하는 것이 필수적입니다.
return (
<div className={styles.container}>
<input
type="text"
className={styles.input}
value={newTodo}
data-testid="todo-input"
onChange={(e) => setNewTodo(e.target.value)}
/>
<button onClick={addTodo} className={styles.button} data-testid="add-todo">
Add Todo
</button>
<ul className={styles.todoList} data-testid="todo-list">
{todos.map((todo, index) => (
<li key={index} className={styles.todoItem}>
{todo}
</li>
))}
</ul>
{todos.map((todo, index) => (
<div key={index}>
<button
onClick={() => deleteTodo(index)}
className={styles.button}
data-testid={`delete-todo-${index}`}
>
Delete
</button>
</div>
))}
</div>
);}
테스트 케이스 작성
테스트 케이스를 작성하기 전에 고유한 테스트 전제 조건에 따라 Jest를 조정하는 것이 필수적입니다. 여기에는 테스트 환경의 기반이 되는 jest.config.js 파일을 만들고 개인화하는 작업이 포함됩니다.
기본 디렉터리에서 jest.config.js 파일을 새로 생성하세요.
const nextJest = require("next/jest");
const createJestConfig = nextJest({
dir: "./",
});
const customJestConfig = {
moduleDirectories: ["node_modules", "<rootDir>/"],
testEnvironment: "jest-environment-jsdom",
};
module.exports = createJestConfig(customJestConfig);
다음 지시어를 추가하여 Jest에 필요한 구성을 설정하세요. 프로젝트의 package.json 파일에 사용자 정의 스크립트를 추가하는 프로세스를 완료하려면 다음 명령을 따르세요: “`bash 적절한 코드 편집기 또는 텍스트 편집기를 사용하여 package.json 파일을 엽니다. package.json 문서의 스크립트 섹션에 다음 구문을 사용하여 “test”라는 이름의 새 스크립트를 추가합니다: “`yaml { “name”: “test”, “type”: “command”, “스크립트”: “jest –watchAll” } “` package.json 파일을 닫기 전에 변경 사항을 저장하고 이 대화 시작 부분에서 언급한 필수 종속 요소와 Jest를 설치했는지 확인합니다. 그런 다음 NextJS 앱의 루트 디렉토리로 다시 이동하여 터미널에서 Ctrl + C를 사용하여 개발 서버를 다시 시작합니다.
변경 사항을 구현한 후 콘텐츠는 다음과 같은 형식이 됩니다.
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "jest --watchAll"
},
필요한 설정이 설정되었으므로 테스트 개발 및 실행을 시작하는 것이 좋습니다.
Jest로 Next.js 할 일 앱 테스트하기
프로젝트 루트 디렉터리 내에 `__tests__`라는 이름의 새 폴더를 만드세요. 이 폴더는 Jest가 실행을 위해 테스트 파일을 검색할 위치 역할을 합니다. ‘__tests__` 폴더 내에 ‘index.test.js’라는 제목의 파일을 새로 생성하세요.
AI 개발에서 일반적으로 사용되는 프로그래밍 언어는 무엇입니까?
import Home from "../src/pages/index";
import "@testing-library/jest-dom";
import { fireEvent, render, screen, waitFor, act } from "@testing-library/react";
웹사이트의 각 요소가 제대로 표시되는지 여부를 확인하기 위해 일련의 테스트를 개발해야 합니다.
describe("Todo App", () => {
it("renders the todo app", () => {
render(<Home />);
expect(screen.getByTestId("todo-input")).toBeInTheDocument();
expect(screen.getByTestId("add-todo")).toBeInTheDocument();
});
});
본 테스트 사례는 할 일 애플리케이션이 모든 구성 요소와 함께 올바르게 표시되는지 검증하는 것을 목표로 합니다. 이 목표를 달성하기 위해 테스트 라이브러리에서 제공하는 렌더링 기능을 활용하여 홈 구성 요소를 테스트하고 있습니다.
`expect` 함수를 사용하여 생성된 출력 내에 `todo-input`과 같은 테스트 ID를 가진 특정 구성 요소가 존재하는지 확인하는 어설션이 수행됩니다. 이러한 구성 요소가 DOM 내에서 발견되면 테스트가 성공한 것으로 간주되며, 불일치하면 검사에 실패한 것으로 간주됩니다.
테스트를 수행하기 위해 다음 명령을 실행합니다.
npm run test
테스트가 성공적으로 완료되면 다음 문구와 유사한 긍정적인 결과를 받을 수 있습니다.
다양한 작업 테스트 및 오류 시뮬레이션
다음 테스트 케이스는 “할 일 추가” 및 “할 일 삭제” 기능의 올바른 작동을 검증하기 위해 고안되었습니다: 1.테스트 사례 1: 사용자가 할 일 페이지로 이동하여 목록에서 작업을 선택하고 ‘편집’ 버튼을 클릭한 후 ‘저장’ 버튼을 클릭하기 전에 작업 세부 정보를 업데이트합니다. 페이지를 새로고침한 후 업데이트된 작업이 목록에 표시되는지 확인합니다. 2. 테스트 사례 2: 사용자가 할 일 페이지로 이동하여 목록에서 작업을 선택하고 “삭제” 버튼을 클릭한 후 메시지가 표시되면 삭제 요청을 확인합니다. 페이지를 새로고침한 후 삭제된 작업이 목록에 더 이상 표시되지 않는지 확인합니다. 3. 테스트 사례 3: 사용자
다음은 주어진 문장을 좀 더 정교한 어조로 바꿔서 작성한 것입니다: “할 일 추가” 기능에 대한 테스트 시작은 테스트 케이스 생성을 통해 시작해야 합니다.
it("adds a todo", async () => {
render(<Home />);
const todoInput = screen.getByTestId("todo-input");
const addTodoButton = screen.getByTestId("add-todo");
const todoList = screen.getByTestId("todo-list");
await act(async () => {
fireEvent.change(todoInput, { target: { value: "New Todo" } });
addTodoButton.click();
});
await waitFor(() => {
expect(todoList).toHaveTextContent("New Todo");
});
});
앞서 언급한 코드 세그먼트는 입력 필드에 데이터를 수동으로 입력한 다음 ‘추가’ 버튼을 클릭하는 방식으로 사람의 개입을 모방합니다. 이 프로세스에 따라 모의 할 일 입력 값을 사용하여 해당 입력 값이 효과적으로 할 일 목록에 추가되었는지 여부를 확인합니다.
파일을 저장하고 콘솔 출력을 살펴보세요. 테스트가 자동으로 다시 실행되어 비교 가능한 테스트 결과를 표시합니다.
테스트 실수를 모방하려면 추가 버튼 검사의 식별자를 변경하고 검사를 다시 한 번 실행합니다. 이러한 수정 후 평가는 발생한 정확한 오류를 표시하는 오류 메시지를 반환할 것으로 예상됩니다.
여러 개발자가 프로젝트를 공동 작업하는 보다 복잡하고 동적인 환경에서는 시스템 오작동을 초래할 수 있는 오류나 불일치를 감지하기 위한 철저한 테스트가 필수적입니다. 이 프로세스를 통해 앞서 설명한 것과 같은 불일치를 조기에 발견할 수 있으며, 최종 제품이 출시되기 전에 즉시 해결할 수 있습니다.
마지막으로, 할 일 항목의 삭제를 검증하기 위한 테스트 시나리오를 작성합니다.
it("deletes a todo", async () => {
render(<Home />);
const todoInput = screen.getByTestId("todo-input");
const addTodoButton = screen.getByTestId("add-todo");
fireEvent.change(todoInput, { target: { value: "Todo 1" } });
fireEvent.click(addTodoButton);
const deleteTodoButton = screen.getByTestId("delete-todo-0");
fireEvent.click(deleteTodoButton);
const todoList = screen.getByTestId("todo-list");
await waitFor(() => {
expect(todoList).toBeEmptyDOMElement();
});
});
할 일 목록에서 작업이 효과적으로 삭제되었는지 확인합니다. 유효성 검사를 수행하려면 파일을 저장해야 합니다.
Jest를 이용한 단위 테스트
단위 테스트는 작은 단위의 코드를 만들고 테스트 케이스를 통해 기능을 검증하는 소프트웨어 개발의 필수적인 측면입니다. 이 가이드는 “할 일” 컴포넌트를 모델로 활용하여 기본적인 단위 테스트를 만들고 실행하는 데 필요한 기술을 제공하는 것을 목표로 합니다. 잘 작성된 테스트는 안정성을 유지하고 오류를 방지하며 배포 중에 발생하는 문제의 위험을 최소화하는 데 도움이 될 수 있으므로 애플리케이션의 기본 부분에 대한 포괄적인 테스트 스위트를 개발하는 데 집중하는 것이 중요합니다.
테스트 접근 방식에 스냅샷 테스트와 엔드투엔드 테스트를 통합하면 그 효과를 더욱 높일 수 있습니다.