react-todos-app's Introduction

React Todos App

Simple React application for managing TODOs.
App written without any additional 3rd parties libraries.
Very simple app demonstrating the basics of React.
App is performing API requests to JSON placeholder API.
This Application is built with Vite.
Unit Testing with Vitest, React-Testing-Library and MSW

Technologies

React
TypeScript
Canva (for logo)
Json placeholder API
Vite
Vitest
React-testin-library
MSW

Features

Add new TODO
Mark TODO as completed
Delete TODO

Installation

Clone the repository
Run npm install
Run npm run dev

Demo

You can watch demo here

Application is deployed on Netlify. You can see it here

react-todos-app's People

Contributors

Stargazers

react-todos-app's Issues

Unit testing - new calls to server are breaking addTodo function

Whenever I'm adding new unit test which needs to be handled by MSW server it breaks the addTodo test. It seems that there is problem with MSW server configuration.

TypeError: Failed to fetch
 createNetworkError react-todos-app/node_modules/@mswjs/interceptors/lib/node/interceptors/fetch/index.mjs:157:24
 globalThis.fetch .../index.mjs:98:31
 runNextTicks node:internal/process/task_queues:60:5
  listOnTimeout node:internal/timers:540:9
  processTimers node:internal/timers:514:7

// this breaks whenever deleteTodo test is declared
  it('should add a new todo', async () => {
    const { result } = renderHook(() => useTodos());
    await waitFor(() => result.current.todos.length > 0);

    result.current.addTodo('new todo');
    await waitFor(() => result.current.todos.length > 2);

    expect(result.current.todos[0].title).toBe('new todo');
  });

  it('should delete a todo', async () => {
// this breaks addtodo test.
    const { result } = renderHook(() => useTodos());
    await waitFor(() => result.current.todos.length > 0);

    result.current.deleteTodo(1);

    await waitFor(() => result.current.todos.length < 2);
    expect(result.current.todos.length).toBe(1);
  });

MSW server setup:

const initialTodos = [
  { id: 1, title: 'todo 1', completed: true },
  { id: 2, title: 'todo 2', completed: false },
];
const newTodo = { id: 3, title: 'new todo', completed: false };

describe('useTodos', () => {
  const server = setupServer(
    http.get('https://jsonplaceholder.typicode.com/todos', () => {
      return HttpResponse.json(initialTodos);
    }),
    http.post('https://jsonplaceholder.typicode.com/todos', () => {
      return HttpResponse.json(newTodo);
    }),
    http.delete('https://jsonplaceholder.typicode.com/todos/:id', (req, res, ctx) => {
      return res(ctx.status(200));
    })
  );

  beforeAll(() => server.listen());
  afterEach(() => server.resetHandlers());
  afterAll(() => server.close());