LauraBeatris

function styledComponentWithProps<T, U extends HTMLElement = HTMLElement>
  (styledFunction: StyledFunction<React.HTMLProps<U>>): StyledFunction<T & React.HTMLProps<U>> {
    return styledFunction
}

LauraBeatris

import React, { useEffect, useMemo } from "react";
import { Socket } from "phoenix";

// A utility to get the JWT token of the user
import getUserJWT from "utils/getUserJWT";

// The URL of the socket, example: ws://localhost:4000
import { SOCKET_URL } from "settings/socket";

// A hook that returns the current user authenticated

LauraBeatris

import * as dateFnsLocales from 'date-fns/locale';
import { Locale } from 'date-fns';

import i18n from './i18n';

interface Locales {
  [key: string]: Locale;
}

const getDateFnsLocale = (): Locale => {

LauraBeatris

  const spinWheel = useCallback(() => {
    // Receives the winner prop and search for his position in the spinner bets array
    const order = [8, 1, 14, 2, 13, 3, 12, 4, 0, 11, 5, 10, 6, 9, 7];
    const position = order.indexOf(winner);

    // Determine position where to land
    const rows = 12;
    const card = 80 + 2 * 2;
    let landingPosition = rows * 15 * card + position * card;

LauraBeatris

const PhotoUpload = { 
    input: null, 
    files: [],
    uploadLimit: 6, 
    hasLimit(event){
        const { files: FileList } = event.target 
        if ((FileList.length > PhotoUpload.uploadLimit) || ((FileList.length + PhotoUpload.files.length) > PhotoUpload.uploadLimit)) { 
            event.preventDefault()
            alert(`Você só pode realizar o upload de até ${PhotoUpload.uploadLimit} fotos`)
            return true

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']})
  

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

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 { useState, useEffect, useRef } from 'react';

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

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

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 (