[TDD] testing-library (integration test)
23657 ワード
Integrating Test
unit test VS integration test
unit test
1つのコンポーネントのみをテストします.すなわち,他のコンポーネントとのインタラクションをテストするのではなく,propsをランダム値としてテストする.
integration test
integration testは、接続素子間の動作をテストします.
React Component
Todo.js, AddInput.js, TodoList.jsはこのように3つの素子を集積試験する.
Todo.js
TodoListとAddInputボタンがあります.
import React, { useState } from 'react'
import AddInput from '../AddInput/AddInput'
import Header from '../Header/Header'
import TodoList from '../TodoList/TodoList'
import "./Todo.css"
function Todo() {
const [todos, setTodos] = useState([])
return (
<div className="todo">
<Header title="Todo" />
<AddInput
setTodos={setTodos}
todos={todos}
/>
<TodoList
todos={todos}
setTodos={setTodos}
/>
</div>
)
}
export default Todo
AddInput.js
InputフォームとAdd Buttonがあります.
import React, { useState } from 'react'
import "./AddInput.css"
import { v4 } from "uuid"
function AddInput({
setTodos, todos
}) {
const [todo, setTodo] = useState("")
const addTodo = () => {
let updatedTodos = [
...todos,
{
id: v4(),
task: todo,
completed: false
}
]
setTodos(updatedTodos);
setTodo("")
}
return (
<div className="input-container">
<input
className="input"
value={todo}
onChange={(e) => setTodo(e.target.value)}
placeholder="Add a new task here..."
/>
<button
className="add-btn"
onClick={addTodo}
>
Add
</button>
</div>
)
}
export default AddInput
TodoList.js
Todoに追加されたアイテムが表示されます.
import React from 'react'
import TodoFooter from '../TodoFooter/TodoFooter'
import "./TodoList.css"
function TodoList({
todos, setTodos
}) {
const updateTask = (id) => {
let updatedTasks = todos.map((todo) => {
if (todo.id === id) {
todo.completed = !todo.completed;
return todo
} else {
return todo
}
});
setTodos(updatedTasks)
}
const calcNumberOfIncompletedTasks = () => {
let count = 0;
todos.forEach(todo => {
if (!todo.completed) count++
})
return count
}
return (
<div className="todolist-container">
<div className="todos-container">
<div>
{
todos.map((todo, index) => (
<div
className={`todo-item ${todo.completed && "todo-item-active"}`}
onClick={() => updateTask(todo.id)}
data-testid="todo-item"
key={index}
>
{todo.task}
</div>
))
}
</div>
</div>
<div>
<TodoFooter
numberOfIncompleteTasks={calcNumberOfIncompletedTasks()}
/>
</div>
</div>
)
}
export default TodoList
Test Code
AddInput.jsに入力を入力し、Addボタンを使用してアイテムを追加します.追加したアイテムがTodoListに表示されます.2つの項目を追加し,判定長さ2のテストコードを作成する.
import { render, screen, fireEvent } from '@testing-library/react';
import Todo from '../Todo';
import { BrowserRouter } from 'react-router-dom';
const MockedTodo = () => {
return (
<BrowserRouter>
<Todo />
</BrowserRouter>
)
}
const addInput = (values) => {
values.forEach(value => {
const inputEl = screen.getByPlaceholderText(/Add a new task here.../i)
const btnEl = screen.getByRole('button', { name: /Add/i })
fireEvent.change(inputEl, { target: { value } });
fireEvent.click(btnEl);
})
}
describe("Todo Test", () => {
test("add new item", async () => {
render(<MockedTodo />)
addInput([
"Learn Test Code",
"Learn React LifeCycle"
])
const todoItems = screen.getAllByTestId('todo-item');
expect(todoItems.length).toBe(2)
})
})
Reference
この問題について([TDD] testing-library (integration test)), 我々は、より多くの情報をここで見つけました https://velog.io/@devstefancho/react-test-testing-library-integration-testテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol