LauraBeatris

/* First Example */ 
function pagination(
  totalItems,
  selectedPage,
  itemsLimit = 4,
){
  // Calculating the total of pages by dividing the limit and the numbers of items 
  const totalPages = Math.ceil(totalItems / itemsLimit); 
  const startPage = 1;
  const endPage = totalPages;

LauraBeatris

// Appending fields to a parent
function appendField(fieldSelector, parentSelector) {
    const parentContainer = document.querySelector(parentSelector);
    const fields = document.querySelectorAll(fieldSelector);

    // Cloning the node of the last field added to the parent
    const lastField = fields[fields.length - 1];
    const newField = lastField && lastField.cloneNode(true);

    // The user needs to fill the input above before creating a new one

LauraBeatris

const { resolve } = require('path');

module.exports = {
  env: {
    browser: true,
    es6: true,
    jest: true,
  },
  globals: {
    Atomics: 'readonly',

LauraBeatris

.select { 
  /* Removing the native appearance */
  -moz-appearance: none; 
  -webkit-appearance: none;
  appearance: none; 
    
  background-color: #fff;
  /* Custom arrow */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;

LauraBeatris

{ 
   "jest": { 
    "testMatch": [
        "**/__tests__/**/*.test.js" 
     ],
    "moduleNameMapper": {   
      "^~/(.*)": "<rootDir>/src/$1"
    },
    "setupFilesAfterEnv": [
      "@testing-library/react/cleanup-after-each",

LauraBeatris

import React from 'react';
import { render } from '@testing-library/react';
import { ThemeProvider } from 'styled-components';
import { MemoryRouter } from 'react-router-dom';

import theme from '~/styles/theme';

// eslint-disable-next-line
function ProvidersWrapper({ children }) {
  return (

LauraBeatris

import { useState, useEffect, useRef } from 'react';

export default () => {
  const [open, setOpen] = useState(false);
  const outerNode = useRef(null);

  function handleClick() {
    setOpen(!open);
  }

LauraBeatris

const React = require('react');
const reactI18next = require('react-i18next');

/*  
  Also, if you're changing the language, add that mock function before your test suit

  jest.mock('react-i18next', () => ({
    useTranslation: () => ({
      t: key => key,
      i18n: { changeLanguage: jest.fn() },

LauraBeatris

import { useSelector, useDispatch } from 'react-redux' 

// It can receive two more parameters, the second one is to specify a factory instead of the jest's automocking feature
jest.mock('react-redux')  

it('should load some items in the component', () => { 
  // Returning a mock data from the store to test the behavior of the component
  useSelector.mockImplementation((cb) => cb({items: ['Hello World']})
  
  const { getByTestId } = render(<List />)

LauraBeatris

import { useSelector, useDispatch } from 'react-redux' 
import { render, fireEvent } from '@testing-library/react';

// It can receive two more parameters, the second one is to specify a factory instead of the jest's automocking feature
jest.mock('react-redux')  

it('should load some items in the component', () => { 
  // Returning a mock data from the store to test the behavior of the component
  useSelector.mockImplementation((cb) => cb({items: ['Hello World']})