{"componentChunkName":"component---src-templates-blog-post-js","path":"/-testing-hooks-can-be-easier-than-you-think/","result":{"data":{"markdownRemark":{"fields":{"slug":"/-testing-hooks-can-be-easier-than-you-think/"},"frontmatter":{"titulo":"Testing hooks can be easier than you think","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":"

Today I talk about tests in React Hooks, but is very important you have a level knowledge intermediate and advanced and you need to know theses concepts to have a better absorption of the content ok?

\n

\n

Lets'go the content

\n

The hooks allow us to reuse the component and the state logic in differents components. This was a complicated to do before because did you need to use a library like a Redux. However the hooks changed the game and how the components works

\n

I will go to use the project react login testing! It's important you clone the project to continue the content.

\n

Install dependencies

\n

It's importante you have the node and npm installed. Now you open your terminal and run the following code:

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

Now you have installed the developments dependencies go to the code.

\n

Create a folder called hooks and add a hook file useUser.js. Later on we will improve it.

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

Now Now let's create the test file useUser.test inside the folder hooks and make the first validations such as:\nShould be valid if send a valid object;

\n\n

The code:

\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! If we run this test with npm run test we will have a return similar to this on the 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

Now we let's increase the complexity of this hooks why everyone knows that in the real world never is like that.

\n

\n

I transform my hook to level 2.

\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

Now everything fine, rigth?

\n

The file tests:

\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

The last method we used the act , but what exactly he does?

\n

According to the documentation

\n
\n

To prepare a component for determinations, place the rendering and update code inside an act() call. This makes the test run closer to how React works in the browser. Source

\n
\n

Everything that involves updating, can involve the act or the react-test-renderer that both behave the same.

\n

Now we are going to improve our code using the 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

I added a beforeEach to render a hooksUser, to improve the reading of the code.

\n

Bonus

\n

We will test a call on the api and we will mock that call, but first install axios

\n
npm install axios
\n

In our hook, we will add a function that makes a call to 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

Tests file

\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

First let's mock The axios , we don't want him to make a request because the data can change at any time, but we are going to simulate a return of a value from our backend and so we can add validations, if, for example, the user is authenticated or not among others mock tests.

\n

Conclusion

\n

With these tips you can increase the tests on your own hooks, a disclaimer ::: this is one of the ways to test hooks, there are several other ways and other libs that you can test. But that was the way I learned to test and it helped me on a daily basis.

\n

I hope you enjoyed today's post!

\n

\n

Until later.

","timeToRead":6}},"pageContext":{"slug":"/-testing-hooks-can-be-easier-than-you-think/","previousPost":{"fields":{"slug":"/what-do-you-need-to-know-before-create-a-new-project-in-front-end/"},"frontmatter":{"templateKey":"blog-post","data":"28 de Setembro de 2021","tag":"ReactJs","titulo":"What do you need to know before create a new project in front-end","locale":"en"},"timeToRead":4},"nextPost":{"fields":{"slug":"/10-songs-that-make-me-be-more-productive/"},"frontmatter":{"templateKey":"blog-post","data":"12 de Fevereiro de 2021","tag":"random subjects","titulo":"10 songs that make me be more productive.","locale":"en"},"timeToRead":4},"locale":"en"}}}