CarmeloRicarte

Node con TypeScript - TS-Node-dev (preferido)

1. Instalar TypeScript y demás dependencias

npm i -D typescript @types/node ts-node-dev rimraf

2. Inicializar el archivo de configuración de TypeScript ( Se puede configurar al gusto)

npx tsc --init --outDir dist/ --rootDir src

CarmeloRicarte

.table-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.table {
  width: 100%;
  max-width: 90vw;

CarmeloRicarte

export const timeSince = ( date: string ) => {

    const baseDate = new Date(date)

    const seconds = Math.floor(( new Date().getTime() - baseDate.getTime() ) / 1000);
      
    let interval = seconds / 31536000;

CarmeloRicarte

import React, { PropsWithChildren } from "react";
import { renderHook, RenderOptions } from "@testing-library/react";
import { Provider } from "react-redux";
import { ToolkitStore } from "@reduxjs/toolkit/dist/configureStore";
import type { AppStore } from "../../src/store";

// This type interface extends the default options for render from RTL, as well
// as allows the user to specify other things such as store.
interface ExtendedRenderOptions extends Omit<RenderOptions, "queries"> {
  store?: AppStore;

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>

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 { 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

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 { createSlice } from "@reduxjs/toolkit";
import type { PayloadAction } from "@reduxjs/toolkit";

export interface CounterState {
  counter: number;
}

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

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,
  };