CarmeloRicarte

function parseJwt (token) {
    var base64Url = token.split('.')[1];
    var base64 = base64Url.replace('-', '+').replace('_', '/');
    return JSON.parse(window.atob(base64));
};

CarmeloRicarte

Instalación y configuracion de Jest + React Testing Library

En proyectos de React + Vite

1. Instalaciones:

yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react 
yarn add --dev @testing-library/react @types/jest jest-environment-jsdom

2. Opcional: Si usamos Fetch API en el proyecto:

CarmeloRicarte

1. Instalaciones
   yarn add -D vitest jsdom @vitest/ui @testing-library/react @vitest/coverage-c8
2. Configuraciones
   2.1 En vite.config.js, añadir lo siguiente al defineConfig:
   test: { environment: 'jsdom', globals: true }
   2.2 En package.json, añadir lo siguiente dentro de scripts:
   "test": "vitest",
   "test:ui": "vitest --ui",\

CarmeloRicarte

1. Instalaciones
   yarn add -D vitest jsdom @vitest/ui @testing-library/react @testing-library/jest-dom @vitest/coverage-c8
2. Configuraciones
   2.1 Crear el archivo setupTests.ts en el root con lo siguiente:
   import "@testing-library/jest-dom";
import matchers from "@testing-library/jest-dom/matchers";
import { expect } from "vitest";
expect.extend(matchers);
   2.2 En el tsconfig.json, insertar lo siguiente dentro de compilerOptions: "types": ["vitest/globals"]\

CarmeloRicarte

// this is how to mock partial library for mock a method, in this case, useNavigate
const mockedUseNavigate = vi.fn();
vi.mock("react-router-dom", async () => {
  const mod = await vi.importActual<typeof import("react-router-dom")>(
    "react-router-dom"
  );
  return {
    ...mod,
    useNavigate: () => mockedUseNavigate,
  };

CarmeloRicarte

import { createSlice } from "@reduxjs/toolkit";
import type { PayloadAction } from "@reduxjs/toolkit";

export interface CounterState {
  counter: number;
}

const initialState: CounterState = {
  counter: 0,
};

CarmeloRicarte

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const todosApi = createApi({
  reducerPath: "todos",
  baseQuery: fetchBaseQuery({
    baseUrl: "https://jsonplaceholder.typicode.com",
  }),
  endpoints: (builder) => ({
    getTodos: builder.query({
      query: () => "/todos",

CarmeloRicarte

import { useState, ChangeEvent, useEffect, useMemo } from "react";

export const useForm = <T extends Object>(
  initialForm: T,
  formValidations: {
    [key: string]: [(value: string) => boolean, string];
  } = {}
) => {
  const [formState, setFormState] = useState(initialForm);
  const [formValidation, setFormValidation] = useState(

CarmeloRicarte

Use ENV in testing with Vite

1. Install dotenv package as dev depencency.
2. Create .env.test at root of your project, with the same environment variables that you have in your .env file. Then, add it to .gitignore file.
3. Create a helper function that will return all env:

export const getEnvironments = () => {
  import.meta.env;
  return {
    ...import.meta.env,
 };

CarmeloRicarte

import { render, RenderOptions } from '@testing-library/react';
import React from 'react';
import { Provider } from 'react-redux';
import { store } from '../../store';

const Providers: React.FC = ({ children }) => {
  return (
    <Provider store={store}>
      {children}
    </Provider>