{"componentChunkName":"component---src-templates-blog-post-js","path":"/-testar-hooks-pode-ser-mais-facil-que-se-pensa/","result":{"data":{"markdownRemark":{"fields":{"slug":"/-testar-hooks-pode-ser-mais-facil-que-se-pensa/"},"frontmatter":{"titulo":"Testar os hooks pode ser mais fácil do que você pensa.","data":"28/04/2021","tag":"ReactJs","image":{"childImageSharp":{"fluid":{"src":"/static/89b569462423d696adb9cecf5b9e70e9/46604/hooktestss.png","base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABPElEQVQ4y61UTU/CQBDdn+KBo9EElX7y0dpCoVaBQk2xVUKiGBPPHoxXb0QPxIvejQf/YZPnboWGFj+TafIyO9M3b3d2dpeB+GOvb++gBNveqYISrGp0QAmm1R1QIhNUa63fEzhHFdwCf3X8o2AxJoQ03eawUl/mY6XazHHZqiN+SpqVYZmUJgoOh+T4qLgBFB5zDoYwbC8Tza1Q1pucMEA0niIeX6I/jNHq+JhcXCMYTbgfQTJclG4fsXH/grLpwR9ECONz7Mom9EZ7veSG5cHrhuj6J6l4zXRx2As5RrDbvbTkzekNSld3OApOMXuYo89tRd3PC35VsihTxD/9xV4tm8JtnU/mH5/9rylrTVp0Op2c2z3FzPJyTfmLkFo4Nt+dBvqbslXWQQk2f3oGJRj5e5gkCShBv0JqwQ+Z2srAX4hsWAAAAABJRU5ErkJggg==","aspectRatio":1,"srcSet":"/static/89b569462423d696adb9cecf5b9e70e9/7e7e9/hooktestss.png 225w,\n/static/89b569462423d696adb9cecf5b9e70e9/62b1f/hooktestss.png 450w,\n/static/89b569462423d696adb9cecf5b9e70e9/46604/hooktestss.png 500w","sizes":"(max-width: 500px) 100vw, 500px"}}}},"html":"

Hoje vou falar sobre os testes nos Hooks do React, mas e muito importante você ter um nível de conhecimento técnico intermediário e avançado e já conheça esses conceitos para ter uma melhor absorção do conteúdo ok?

\n

\n

Se você ainda não tem conhecimento sobre os hooks em breve farei um post específico para ele. Leia sobre como criar testes no front-end em react js.

\n

Vamos para o conteúdo de hoje.

\n

Os Hooks nos permitem reutilizar o componente e a lógica de estado em diferentes componentes. Isso era complicado de fazer antes por que você precisava utilizar uma biblioteca de terceiros como o Redux. Portanto, os Hooks mudaram todo jogo de como os componentes funcionam.

\n

Vou utilizar como base o projeto react login testing! E importante você clonar o projeto para dar continuidade ao contéudo.

\n

Instalando as dependências

\n

E importante que você tenha o node e o npm instalados. Abra o seu terminal e execute o seguinte código:

\n
npm install --save-dev @testing-library/react-hooks\nnpm install --save-dev react-test-renderer
\n

Agora que você instalou as dependências de desenvolvimento vamos para o código.

\n

Crie uma pasta chamada hooks e adicione um hook useUser. Mais para frente vamos aprimorar ele.

\n
export const useUser = ({ name }) => `Name: ${name}.`
\n

Agora vamos criar o arquivo de testes useUser.test dentro da pasta dos hooks e fazer as primeiras validações como:

\n\n

Nosso código ficou assim:

\n
import { renderHook } from '@testing-library/react-hooks'\nimport { useUser } from './useUser'\n\ndescribe('useUser tests', () => {\n  it('Should be validating the hook is valid', () => {\n    const { result: hook } = renderHook(() => useUser({}))\n    expect(hook).toHaveProperty('current')\n  })\n\n  it('Should be validating the name is undefined', () => {\n    const { result } = renderHook(() => useUser({}))\n    expect(result.current).toBe('Name: undefined.')\n  })\n\n  it('Should be validating the name is Leo', () => {\n    const { result } = renderHook(() => useUser({ name: 'Leo' }))\n    expect(result.current).toBe('Name: Leo.')\n  })\n})
\n

Niceeee! Se ao executarmos o comando esse teste com npm run test vamos ter um retorno parecido com esse no console:

\n
 PASS  src/hooks/useUser.test.js\n  useUser tests\n    ✓ Should be validating the hook is valid (11ms)\n    ✓ Should be validating the name is undefined (1ms)\n    ✓ Should be validating the name is Leo (1ms)\n\nTest Suites: 1 passed, 1 total\nTests:       3 passed, 3 total\nSnapshots:   0 total\nTime:        1.948s\nRan all test suites matching /use/i.
\n

Agora vamos aumentar a complexidade desse hook por que todo mundo sabe que no mundo real nunca é assim.

\n

\n

Tranformei meu hook em um hook nível 2 de complexidade hahaa vamos até o nível 3

\n
import { useState } from 'react'\n\nexport const useUser = () => {\n  const [user, setUser] = useState({})\n\n  const changeUser = user => setUser(user)\n\n  return {\n    changeUser,\n    nameUser: `Name: ${user.name}.`\n  }\n}
\n

Bom, até aqui tudo tranquilo certo?

\n

Nosso arquivo de testes:

\n
import { renderHook, act } from '@testing-library/react-hooks'\nimport { useUser } from './useUser'\n\ndescribe('useUser tests', () => {\n  it('Should be validating the hook is valid', () => {\n    const { result: hook } = renderHook(() => useUser({}))\n    expect(hook).toHaveProperty('current')\n  })\n\n  it('Should be validating the name is undefined', () => {\n    const { result: hook } = renderHook(() => useUser({}))\n    const { nameUser } = hook.current\n    expect(nameUser).toBe('Name: undefined.')\n  })\n\n  it('Should be validating the name is Leo', () => {\n    const { result: hook } = renderHook(() => useUser())\n    const { changeUser } = hook.current\n\n    act(() => changeUser({ name: 'Leo' }))\n\n    const { nameUser } = hook.current\n    expect(nameUser).toBe('Name: Leo.')\n  })\n})
\n

No último método utilizamos o act do testing-library, mas o que exatamente ele faz?

\n

De acordo com a documentação

\n
\n

Para preparar um componente para determinações, coloque o código de renderização e de atualizações dentro de uma chamada act(). Isso faz com que o teste rode mais próximo de como React funciona no browser. Fonte

\n
\n

Tudo que envolve atualização, da para envolver o act ou o react-test-renderer que ambos se comportam igual.

\n

Agora vamos melhorar nosso código utilizando o Context Api.

\n

useUser.js

\n
import React, { createContext, useContext, useState, useCallback } from 'react'\n\nconst UserContext = createContext()\n\nconst UserProvider = ({ children }) => {\n  const [user, setUser] = useState({})\n\n  const changeUser = useCallback(user => setUser(user), [setUser])\n\n  return (\n    <UserContext.Provider\n      value={{\n        user,\n        changeUser\n      }}\n    >\n      {children}\n    </UserContext.Provider>\n  )\n}\n\nfunction useUser () {\n  const context = useContext(UserContext)\n  return context\n}\n\nexport { UserProvider, useUser }
\n

useUser.test.js

\n
import { renderHook, act } from '@testing-library/react-hooks'\nimport { UserProvider, useUser } from './useUser'\n\nlet hooksUser\n\ndescribe('useUser tests', () => {\n  beforeEach(() => {\n    hooksUser = renderHook(() => useUser(), {\n      wrapper: UserProvider\n    })\n  })\n\n  it('Should be validating the hook is valid', () => {\n    const { result: hook } = hooksUser\n    expect(hook).toHaveProperty('current')\n  })\n\n  it('Should be validating the name is undefined', () => {\n    const { result: hook } = hooksUser\n    const { user } = hook.current\n    expect(user).toEqual({})\n  })\n\n  it('Should be validating the name is Leo', () => {\n    const { result: hook } = hooksUser\n    const { changeUser } = hook.current\n\n    act(() => changeUser({ name: 'Leo' }))\n\n    const { user } = hook.current\n    expect(user.name).toBe('Leo')\n  })\n})
\n

Adicionei um beforeEach para renderizer um hooksUser, para melhorar a leitura do código.

\n

Bônus

\n

Vamos testar uma chamada na api e vamos mockar essa chamada, mas primeiro instale o axios

\n
npm install axios
\n

No nosso hook, vamos adicionar uma função que faz uma chamada para reqres.in

\n

useUser.js

\n
  ...\n  const getUser = useCallback(async () => {\n    const  { data }  = await axios.get(\"https://reqres.in/api/users/2\");\n    setUser(data.data);\n  }, [setUser]);\n\n  return (\n    <UserContext.Provider\n      value={{\n        user,\n        changeUser,\n        getUser,\n      }}\n    >\n      {children}\n    </UserContext.Provider>\n  );\n  ...
\n

Nosso arquivo de testes:

\n
import axios from 'axios'\nimport { renderHook, act } from '@testing-library/react-hooks'\nimport { UserProvider, useUser } from './useUser'\n\njest.mock('axios')\n\nlet hooksUser\n\ndescribe('useUser tests', () => {\n  beforeEach(() => {\n    hooksUser = renderHook(() => useUser(), {\n      wrapper: UserProvider\n    })\n  })\n\n  it('Should be validating the hook is valid', () => {\n    const { result: hook } = hooksUser\n    expect(hook).toHaveProperty('current')\n  })\n\n  it('Should be validating the name is undefined', () => {\n    const { result: hook } = hooksUser\n    const { user } = hook.current\n    expect(user).toEqual({})\n  })\n\n  it('Should be validating the name is Leo', () => {\n    const { result: hook } = hooksUser\n    const { changeUser } = hook.current\n\n    act(() => changeUser({ name: 'Leo' }))\n\n    const { user } = hook.current\n    expect(user.name).toBe('Leo')\n  })\n\n  it('Should be mockUser api', async () => {\n    axios.get.mockResolvedValueOnce({\n      data: {\n        data: {\n          first_name: 'Leo'\n        }\n      }\n    })\n\n    const { result: hook } = hooksUser\n    const { getUser } = hook.current\n\n    await act(async () => await getUser())\n\n    const { user } = hook.current\n    expect(user.first_name).toBe('Leo')\n  })\n})
\n

Primeiramente vamos mockar o axios, não queremos que ele faça a request por que os dados podem mudar a qualquer momento, mas vamos simular um retorno de um valor do nosso back-end e assim podemos adicionar validações, se, por exemplo, o usuário está autenticado ou não entre outros testes de mock.

\n

Conclusão

\n

Com essas dicas você pode incrementar os testes nos seus próprios hooks, um disclaimer::: essa e uma das formas de se testar hooks, tem várias outras formas e outras libs que você consegue testar. Mas essa foi a forma que eu aprendi a testar e me ajudou no dia a dia.

\n

Espero que você tenha gostado do post de hoje!

\n

\n

Até mais.

","timeToRead":6}},"pageContext":{"slug":"/-testar-hooks-pode-ser-mais-facil-que-se-pensa/","previousPost":{"fields":{"slug":"/o-que-voce-precisa-saber-antes-de-criar-seu-projeto-front-end/"},"frontmatter":{"templateKey":"blog-post","data":"28 de Setembro de 2021","tag":"ReactJs","titulo":"O que você precisa saber antes de criar seu projeto no front-end","locale":"pt"},"timeToRead":4},"nextPost":{"fields":{"slug":"/10-musicas-que-me-faz-ser-mais-produtiva/"},"frontmatter":{"templateKey":"blog-post","data":"12 de Fevereiro de 2021","tag":"assuntos aleatórios","titulo":"10 músicas que me faz ser mais produtiva.","locale":"pt"},"timeToRead":3},"locale":"pt"}}}