ivanbtrujillo

/**
* This is a wrap for React.Lazy based on Christoph Nakazawa solution (https://gist.github.com/cpojer/c50a742ec943d95c3c72a41ac1c06f03) for the issue that happens when using React.Lazy and we deploy a new version of a module, changing the hash (automatically managed by bundlers).
*
* THE PROBLEM:
* When our React application is compiled for production, packaging tools (Vite in this case) often add hashes to the filename to handle caching. 
* These hashes change whenever the content of the file changes. This ensures that users get the most recent version of the file, since a change in the hash will force the browser to download the new file instead of serving a cached version.
* 
* If a user has your application open and you make a new deployment, the file names of the dynamically loaded modules may change (due to the new hashes). 
* And then, if the user navigates to a part of your application that requires loading a new module, their browser will attempt to load the module using the old file name (which i

ivanbtrujillo

If you want to test a single file using jest, and get the coverage of that single file 
instead of the coverage of the whole project, you can use this command:


npx jest [file_name] --coverage --collectCoverageFrom=[path_to_file.extension] --watch

Example:

npx jest logout --coverage --collectCoverageFrom=./src/modules/logout/logout.tsx --watch

ivanbtrujillo

  const lightMachine = Machine({
    id: 'light',          
    initial: 'off',                 
    states: {                       
      off: { on: { TOGGLE: 'on' } }, 
      on: { on: { TOGGLE: 'off' } }
    }
  });
  

ivanbtrujillo

GIT USEFULL ALIASES

Remove last commit:

git config --global alias.rm-commit 'reset --hard HEAD~1'  

USAGE:

git rm-commit

ivanbtrujillo

import { useEffect, useRef } from 'react';

type GenericProps = { [key: string]: any };

export const useWhyDidYouUpdate = (componentName: string, props: GenericProps) => {

  console.warn(`Remove useWhyDidYouUpdate from component ${componentName} before commit your changes`);
  /*
   * Get a mutable ref object where we can store props
   * for comparison next time this hook runs.

ivanbtrujillo

interface User {
  id: number;
  name: string;
}


// Objects

We are going to change the name of the user. We will have three functions:
- changeName1 : mutates the object. Bad practice because mutations are a source of bugs hard to find.

ivanbtrujillo

import Sum from './Sum';
describe('Sum', () => {
  it('should render', () => (
  ));
  it('should have two inputs to add the numbers', () => (
  ));
  it('should have a button to fire the sum action', () => (
  ));
  it('should have text to show the result', () => (
  ));

ivanbtrujillo

import React, { useState } from "react";
const Sum = () => {
  
  const [value1, setValue1] = useState();
  const [value2, setValue2] = useState();
  const [result, setResult] = useState();
  
  const calculateSum = () => setResult(value1 + value2);
  
  return (

ivanbtrujillo

import React from "react";
import { render, cleanup, fireEvent } from "@testing-library/react";
import Sum from "./Sum";
import "jest-dom/extend-expect";

describe("Sum", () => {
  it('should sum value1 and value2 and show the result', () => {
    const { getByTestId } = render(<Sum />);
    
    const firstInput= getByTestId("value1");

ivanbtrujillo

import React from "react";

const Sum = () => (
  <div>
    <input data-testid="value1" />    
    <input data-testid="value2" />
  </div>
);
export default Sum;