
## Introduction

I tried everything - taking notes on paper, watching YouTube videos on a specific topic, reading complex articles - but what I discovered after doing all of that was that the only thing that worked for me was something I least expected: the art of recognizing my own evolution.

_But why is it so difficult to recognize your own evolution? Is there an easy way to do it?_

I struggle to share my accomplishments, and even though I can now see my progress, sometimes it feels like it's not enough.

I feel like I'm doing the bare minimum, or that there are others who do **ten times more than me**.

I HATE comparing myself to others; it's a burning feeling within me. It's completely UNFAIR to compare myself to someone else, but this insecurity that I carry is something I'm working on resolving.

But I believe you also have this feeling of frustration, comparing yourself to people in the IT field who say it's "easy." People say it's easy to find a job, but I don't take away their achievements because each has their own story, circumstances, and privileges, including me. But still... the same thought keeps swirling in your head that you'll never reach that level.

I remember that in my first year of college, I almost quit the course because I simply couldn't keep up with the class and couldn't grasp the basic fundamentals of programming logic.

![https://media.giphy.com/media/W0c3xcZ3F1d0EYYb0f/giphy.gif](https://media.giphy.com/media/W0c3xcZ3F1d0EYYb0f/giphy.gif)

My mind was filled with thoughts like **"I'm falling behind," "I'll never succeed," "I should just give up."** But the best thing I did was push those thoughts aside, take notes of my learnings, and do what needed to be done. And it was the best decision I ever made.

## The importance of recognizing your personal evolution

The pursuit of personal evolution is a continuous journey in every person's life. As we face challenges, acquire new skills and experiences, and seek a sense of growth and fulfillment, it is natural to question: "How do I recognize my own evolution?" This question intrigues many people, and it intrigues me more and more. I desire to understand and appreciate my own development over time.

Perceiving personal evolution can be a complex task, as it is not always easy to measure or quantify the internal growth that occurs. Often, we are immersed in our daily routines, busy with obligations and demands, and may not be aware of the subtle changes happening in our mindset, skills, and perspectives. However, developing the ability to recognize and value this evolution is essential for our emotional well-being and continuous motivation.

![https://media.giphy.com/media/xT1XGYhZZlnrgqETDi/giphy.gif](https://media.giphy.com/media/xT1XGYhZZlnrgqETDi/giphy.gif)

## How to recognize your own evolution

Well, as I mentioned at the beginning, I'm not the best person to recognize others, but I will now explain something that I apply in my daily life or from time to time.

### Set clear and measurable goals

One of the first steps in recognizing our evolution is to set clear and measurable goals. By defining tangible goals in different areas of life, such as career, relationships, or health, we create a framework for evaluating our progress. By achieving these goals, even in small steps, we can recognize and celebrate the growth we have achieved. And the best way to create goals is by writing them down...

For example, there is a story I shared on Instagram about a notebook I have had since the beginning of my career, where I wrote down my life goals. After years, seeing that I have accomplished a large part of those things is a wonderful feeling. In those moments, I can see how much I have grown and evolved, not just professionally but as a person.

I have a board here on the left where I see it EVERY day with my goals that I want to achieve, not necessarily this year, but in the future,

- Improve my English level from A1 to C1; currently, I'm at B1, so it's already a victory.
- Develop a side project.
- Achieve...

**Take you from point A to point B by generating value from the things I know, that I would like to share, show my culture, my thoughts, ideas, and document.**

But this is not a rule; do it in whatever way you want.

### Regular self-assessment

In addition, regular self-assessment plays a crucial role in the process of recognizing personal evolution. Taking time to reflect on our experiences, such as achievements (for example, passing the university entrance exam, passing the driving test, buying my motorcycle and later my car, my apartment), allows us to identify patterns, lessons learned, and areas we have developed. By questioning ourselves about the skills we have acquired, the new perspectives we have gained, and how we have dealt with adversity, we gain valuable insights into our own evolution.

### Seek constructive feedback

Seeking constructive feedback also plays an important role in recognizing personal evolution. By receiving insights and perspectives from trusted individuals, such as mentors, friends, or colleagues, we can gain an external view of our growth. Feedback can reveal aspects that we may not be able to see on our own and provide a more objective assessment of our progress.

### Cultivate a mindset of gratitude and celebration

As we progress in our pursuit of recognizing personal evolution, it is also crucial to cultivate a mindset of gratitude and celebration. Recognizing our achievements, even the small ones, take a moment to make and review notes. For example, every Friday, I take time to look back at what I have accomplished. Writing on Monday is when I write the most; it motivates me throughout the week to achieve new things.

But don't focus on the number of completed activities. It's just one task you accomplished, learned, and contributed to that day.

The important thing is to keep these notes and review them when necessary.

See you later!

![https://media.giphy.com/media/mP8GermRyOFWV8PQeq/giphy.gif](https://media.giphy.com/media/mP8GermRyOFWV8PQeq/giphy.gif)


How do I perceive my evolution?


# Secrets of Successful Creative Copywriting

Today, let's talk about creative copywriting and how it can lead to great innovations in art and creativity.

We've all heard the famous phrase **"nothing is original, everything is copied"**, but it's important to understand that this doesn't mean we should plagiarize or steal other people's ideas. Creative copywriting is a practice that involves learning from and being inspired by the work of others to create something new and authentic.

![Creative Copywriting](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZGNlc2JhczhreHQzZmhsajU4OHB2cWIxdDhqMnh4Mmp5eTFsZHl5OCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/tu9enjnsFsb1x6xolp/giphy.gif)

## What is Creative Copywriting?

Creative copywriting is a technique that involves studying and learning from the work of other artists and creatives, using that learning as a foundation to create something original. It's important to note the difference between copying and plagiarizing. Copying is using someone else's work as a starting point, while plagiarizing is directly stealing someone else's ideas.

## How can Creative Copywriting be a valuable exercise for artists and creatives?

Creative copywriting can help develop artistic skills and increase the ability to innovate. By studying the work of other artists and creatives, it's possible to learn new techniques, explore different styles and formats, and discover new ways of working.

## How can copying stimulate creativity?

Creative copywriting can stimulate creativity by inspiring new ideas through studying the work of other artists and creatives. Additionally, copying can help find solutions to creative problems and think outside the box.

## The importance of studying and learning from others' work.

Studying and learning from others' work is important for developing skills and enhancing creativity. By observing the work of other artists and creatives, it's possible to gain a better understanding of how they create and what makes them unique. This can help discover one's own style and find a unique voice.

## How can copying help discover one's own style and find a unique voice?

Creative copywriting can help discover one's own style and find a unique voice by studying and learning from the work of other artists and creatives. It allows for experimenting with different techniques and styles to discover what works best. This can lead to developing an authentic and original style.

## How can copying help explore different techniques, styles, and formats?

Creative copywriting can help explore different techniques, styles, and formats by studying and learning from the work of other artists and creatives. It allows for experimenting with different approaches and discovering new ways of working.

## 10 tips for creative copywriting:

1. Learn from the masters.
2. Explore different techniques.
3. Add your own perspective.
4. Try something new.
5. Use it as a starting point.
6. Practice until perfection.
7. Make adaptations.
8. Try something challenging.
9. Work with different materials.
10. Keep an open mind.

See you later!

![Creative Copywriting](https://media.giphy.com/media/mP8GermRyOFWV8PQeq/giphy.gif)


Secrets of Successful Creative Copywriting


Today I will teach you how to converter your video MP4 to audio with nodejs

With that, you can select your video and transfer it to audio using the library ffmpeg
Repo project [here!!](https://github.com/LorenaKauane/video-to-audio)

### The libraries we will use is:

- [NodeJs](https://nodejs.org/en/)
- [Express](http://expressjs.com/pt-br/)
- [Ffmpeg](https://ffmpeg.org/)
- [multer](https://www.npmjs.com/package/multer)
- [@ffmpeg-installer/ffmpeg](https://www.npmjs.com/package/@ffmpeg-installer/ffmpeg)
- [fluent-ffmpeg](https://www.npmjs.com/package/fluent-ffmpeg)

### What is FFMPEG

There are many open source tools to edit, tweak and convert your files to exactly what you need. Tools like, Audacity and Handbrake is very good, but sometimes you just want to change a file from one format to another quickly.

FFmpeg is a collection of different projects for handling multimedia files. It is often used behind the scenes in many other media related projects.

### Create the project

- Create the project folder.
- `npm init`

We will need to use some lib to upload the file, and the lib chosen was the [multer](https://github.com/expressjs/multer)

- `npm install express multer`
- `npm install nodemon`
- `npm install @ffmpeg-installer/ffmpeg fluent-ffmpeg`
- Configure nodemon to run inside the `package.json` file and in the `start` script add `nodemon index.js`

In the `index.js` file we will add an endpoint called `/convert` it will look like this:

```js
const express = require('express')
const multer = require('multer')

const app = express()
const PORT = process.env.PORT || 5000

app.use(multer({ dest: './tmp/' }).single('file'))

app.post('/convert', (request, response) => {
  return response.send("It's works")
})

app.listen(PORT)
```

In our multer middware (he is responsible for saving our video) we will add a small improvement to it, because if you send the same file with the same name it will cause problems. So it will look like this:

```js
const storage = multer.diskStorage({
  destination: function (request, file, callback) {
    callback(null, './tmp/')
  },
  filename: (req, file, callback) => {
    callback(null, Date.now() + '-' + file.originalname)
  },
})

app.use(multer({ storage }).single('file'))
```

We renamed the filename to get the now date and filename.

Now let's implement FFMPEG to convert to mp3

```js
const express = require('express')
const multer = require('multer')
const fs = require('fs')
const ffmpeg = require('fluent-ffmpeg')
const ffmpegPath = require('@ffmpeg-installer/ffmpeg').path

ffmpeg.setFfmpegPath(ffmpegPath)

const PORT = process.env.PORT || 5000
const app = express()

const storage = multer.diskStorage({
  destination: (request, file, callback) => {
    callback(null, './tmp/')
  },
  filename: (request, file, callback) => {
    callback(null, Date.now() + '-' + file.originalname)
  },
})

app.use(multer({ storage }).single('file'))

app.post('/convert', (request, response) => {
  const file = request.file
  const fileName = '-output.mp3'

  ffmpeg('tmp/' + file.filename)
    .toFormat('mp3')
    .on('end', () => {
      return response.download(__dirname + fileName, error => {
        if (error) throw error
        console.log('conversion success')
        removeFile(`${__dirname}/tmp/${file.filename}`)
      })
    })
    .on('error', error => {
      console.log(error)
      removeFile(`${__dirname}/tmp/${file.filename}`)
    })
    .saveToFile(__dirname + fileName)
})

function removeFile(directory) {
  fs.unlink(directory, error => {
    if (error) throw error
    console.log('File deleted')
  })
}

app.listen(PORT)
```

- First we imported our necessary dependencies and made a ffmpeg.setFfmpegPath(ffmpegPath) for the operating system to get the FFMPEG path
- Inside the /convert endpoint we call some ffmpeg functions such as format it supports several formats, but as in today's blog topic and converting to audio we just call it mp3.
- When FFMPEG finishes the conversion it will call this END function and send our file to our client, and after sending the file to the client it will remove the file from our local machine.

```
.on('end', () => {
    return response.download(__dirname + fileName, error => {
    if (error) throw error
    console.log('conversion success')
    removeFile(`${__dirname}/tmp/${file.filename}`)
    })
})
```

ffmpeg has several functions, start, end among others...

And that, I hope you liked it and until next time

Until later!

![https://media.giphy.com/media/mP8GermRyOFWV8PQeq/giphy.gif](https://media.giphy.com/media/mP8GermRyOFWV8PQeq/giphy.gif)


How convert video to audio with nodejs


Coding is the hard task, do you need focus and dedication, like everything in life, but why do you don't focus that? Especially if you're a beginner dev

![https://media.giphy.com/media/Y4vfxiMcB6neuEvFye/giphy.gif](https://media.giphy.com/media/Y4vfxiMcB6neuEvFye/giphy.gif)

Learn about concepts like, arrays, variables, methods, functions, OOP, TDD, git, databases, because these concepts you take in your all life.

### Tools

Don't focus on learning just one technology example: Just React, Just nodejs, just java, because these technologies are tools, and it limits you. The ideal is to focus on one technology but also know how to understand in the back-end, understand a little bit of infrastructure, clouds...

Learn more about a different technology like, Nodejs it's good for certain things, but sometimes Go and better than python, you don't need to be the expert, but you need to understand why your technology is good for solving your problem.

- What problem resolve?
- How will you solve?
- What are the main problems you will have and how will you put everything together?
- Is it the best way?

I want to stress you out to not just focus on code.

![https://media.giphy.com/media/DBbgL1Bwsahpf9kVZA/giphy.gif](https://media.giphy.com/media/DBbgL1Bwsahpf9kVZA/giphy.gif)

That way you grow and learn differently because you first understand the problem, and design what you will develop and not just code and change everything as you implement it. That way you don't learn and alias waste your time

### The importance of breaking tasks

If you have a very big problem, break it down into small pieces so your work will be more effective.

Don't learn to code just memorize syntax, learn how to memorize concepts, because I think it's humanly impossible to memorize methods, functions, everything in one language.

Alias It's okay for you to search for certain things on google because there really are certain things that you can't memorize and there's no problem with that, like working with date, and something that's hard to memorize. So don't feel bad about searching google

### But what's the next step ?

And after you learn the most basic concepts, you should ask yourself...

- How can I improve my learning process?
- Do you learn better by reading?
- Writing code? Reviewing Code? Because then you will learn about architecture, different types of tests, design patterns. I for example learn a lot by reviewing code.

And of course **learn to learn**, because the IT area is gigantic and everything changes very quickly, that's why learning the concepts doesn't leave you behind.

If you already know the concepts and are going to start a new project on the front end then watch this video where I tell you what you should know before creating your project on the front.

[![thumbnail ALT TEXT](http://img.youtube.com/vi/vZASLXluAOU/0.jpg)](http://www.youtube.com/watch?v=vZASLXluAOU 'Video description')

Until later!

![https://media.giphy.com/media/mP8GermRyOFWV8PQeq/giphy.gif](https://media.giphy.com/media/mP8GermRyOFWV8PQeq/giphy.gif)


Stop worrying about the code.


Today I will talk about what do you need to know before create a new project in front-end, with that do you will learn a creation a scalable software, a healthy software long way, create process with easy steps.

I'm sharing knowledge on YouTube, but unfortunately content in Portuguese, but I'm transcribing it to English like this post, in case you wanted to see the video:

[![thumbnail ALT TEXT](http://img.youtube.com/vi/vZASLXluAOU/0.jpg)](http://www.youtube.com/watch?v=vZASLXluAOU 'Video description')

![https://media.giphy.com/media/13Nc3xlO1kGg3S/giphy.gif?cid=790b76118d13be12b5f092ecdef5874b1f61d1079af41e53&rid=giphy.gif&ct=g](https://media.giphy.com/media/13Nc3xlO1kGg3S/giphy.gif?cid=790b76118d13be12b5f092ecdef5874b1f61d1079af41e53&rid=giphy.gif&ct=g)

In the past, some companies never thought about that, especially in front-end, that's why there is so much legacy and poorly architected software.

### What is design/project software?

Process of designing the elements of a system, architecture, modules, flows, how the software works, the objective in here is to work with date and information about your system and to allow the implementation consistency architectural entities as defined in system architecture models and views.

### First step

The first step, do you need to understand the problem.

- How many users?
- What are these users like? (age, how they work) if your company has a UI/UX it will probably bring this information
- Do you need to support mobile devices?
- Support offline?
- Internationalization?
- Accessibility?
- Differences Browser?
- List what not to do
- What is the flows to date (API)? List of the all APIs, where the user will click and what will happens?
- Is SEO a concern? Yes (SSR) or is Single Page Application (SPA) good enough?

After answering all the questions, you will already have a clear idea of how the system will work, the type of user and how the user will use the system. This is very important, ok?

### System elements

- **Architecture**

Define structure, the behavior, we can use flowcharts to represent and illustrate the architecture, like: [drwa.io](http://drwa.io/), [whimsical](https://whimsical.com/), [Lucidchart](https://www.lucidchart.com/pages/pt)

- **Modules**

It is components that handle a specific task in a system. The combination with modules build the system. So for example, module that almost all systems exist today that are clients, sales, probably in the system you use there are thousands of modules.

- **Components**

It is a specific function or group of related functions.

- **date**

Flows the information and date and its management.

### Product Assumptions

- Suppose how many interactions occur in one day, will it have a very large volume of date?
- What is the average response of the API?

### Speed / Performance

In your front-end project, you also need to think about the bottleneck of your application, you want a system with smoothness and speed, right? (everyone wants it hehehe)

If you're going to think about smoothness, let's think about:

- Back snapshot (page stack / API cache)
- Instant advance
- Animation or transition?

How can we further simplify the user's life? Because the user likes automatic things, saving a date in the datebase and being redirected to the list screen, instead of saving it after clicking the back button, simple things that make a total difference in the usability of your software.

Now speaking of speed, some points can be considered as:

- preload / presearch,
- Code splitting or skeleton loading, depending on where your user is a certain part of the system is not loaded, or is loaded as he uses the system
- Cache / CDN for static resources
- Service worker (offline) for caching
- Infinite scroll, have you ever thought about how it's done on facebook?
- SSR / initial date feed (improves first significant access)

### Images

But we can't forget about a very important item in the front-end world, which are images!

Front-end images impact speed directly so it is very important to think about them and what method will be used on your system.

The most famous methods are:

- Compress, compress the image
- Lazy Load translating on tiptoe is lazy loading and a way for you to delay loading, so your page content will load first and then load the image in sequence.
- Progressive images when the image is blurry
- Use SVG for icons which is faster
- Caching / HTTP2 (Browser cache, CDN cache)

Now going to the date and the API:

- You can use conventional model today which is REST
- WebSockets for chats
- GraphQL provides a complete and understandable description of the date in its API, gives customers the power to ask for exactly what they need

### Future

Last but not least, the FUTURE and ALL

- Improvement ideas
- Things that can improve, why program and so, you code today and in a few months you already think about the refactor

It is important to mention that to create a new project you need to get your hands dirty, do a lot of studies, understand the system in general, you need a lot of focus and dedication like everything else in life. I believe I managed to talk a good part of today's subject, I hope you enjoyed today's content!

Thanks! To the next.

![https://media.giphy.com/media/1ccd9l2mnpOQz96MZM/giphy.gif?cid=790b7611d4735075cf4e1a6895216ec88faac5562efa2ce9&rid=giphy.gif&ct=g](https://media.giphy.com/media/1ccd9l2mnpOQz96MZM/giphy.gif?cid=790b7611d4735075cf4e1a6895216ec88faac5562efa2ce9&rid=giphy.gif&ct=g)


what do you need to know before create a new project in front-end

What do you need to know before create a new project in front-end


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?

![](https://media.giphy.com/media/IbUUbU4xUDJWcgGMGP/giphy.gif)

### Lets'go the content

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](https://redux.js.org/). However the hooks changed the game and how the components works

I will go to use the project [react login testing](https://github.com/LorenaKauane/react-login-testing)! It's important you clone the project to continue the content.

### Install dependencies

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

```bash
npm install --save-dev @testing-library/react-hooks
npm install --save-dev react-test-renderer
```

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

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

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

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

- ✅ Should be valid hooks is valid ;
- ✅ Should be valid if send a object empty and return undefined;
- ✅ Should be valid if send a valid object;

The code:

```jsx
import { renderHook } from '@testing-library/react-hooks'
import { useUser } from './useUser'

describe('useUser tests', () => {
  it('Should be validating the hook is valid', () => {
    const { result: hook } = renderHook(() => useUser({}))
    expect(hook).toHaveProperty('current')
  })

  it('Should be validating the name is undefined', () => {
    const { result } = renderHook(() => useUser({}))
    expect(result.current).toBe('Name: undefined.')
  })

  it('Should be validating the name is Leo', () => {
    const { result } = renderHook(() => useUser({ name: 'Leo' }))
    expect(result.current).toBe('Name: Leo.')
  })
})
```

Niceeee! If we run this test with `npm run test` we will have a return similar to this on the console

```bash
 PASS  src/hooks/useUser.test.js
  useUser tests
    ✓ Should be validating the hook is valid (11ms)
    ✓ Should be validating the name is undefined (1ms)
    ✓ Should be validating the name is Leo (1ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        1.948s
Ran all test suites matching /use/i.
```

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

![](https://media.giphy.com/media/SqfHFPbzxw98xwFOiE/giphy.gif)

I transform my hook to level 2.

```jsx
import { useState } from 'react'

export const useUser = () => {
  const [user, setUser] = useState({})

  const changeUser = user => setUser(user)

  return {
    changeUser,
    nameUser: `Name: ${user.name}.`,
  }
}
```

Now everything fine, rigth?

The file tests:

```jsx
import { renderHook, act } from '@testing-library/react-hooks'
import { useUser } from './useUser'

describe('useUser tests', () => {
  it('Should be validating the hook is valid', () => {
    const { result: hook } = renderHook(() => useUser({}))
    expect(hook).toHaveProperty('current')
  })

  it('Should be validating the name is undefined', () => {
    const { result: hook } = renderHook(() => useUser({}))
    const { nameUser } = hook.current
    expect(nameUser).toBe('Name: undefined.')
  })

  it('Should be validating the name is Leo', () => {
    const { result: hook } = renderHook(() => useUser())
    const { changeUser } = hook.current

    act(() => changeUser({ name: 'Leo' }))

    const { nameUser } = hook.current
    expect(nameUser).toBe('Name: Leo.')
  })
})
```

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

According to the documentation

> 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](https://pt-br.reactjs.org/docs/test-utils.html#act)

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

Now we are going to improve our code using the Context Api.

`useUser.js`

```jsx
import React, { createContext, useContext, useState, useCallback } from 'react'

const UserContext = createContext()

const UserProvider = ({ children }) => {
  const [user, setUser] = useState({})

  const changeUser = useCallback(user => setUser(user), [setUser])

  return (
    <UserContext.Provider
      value={{
        user,
        changeUser,
      }}
    >
      {children}
    </UserContext.Provider>
  )
}

function useUser() {
  const context = useContext(UserContext)
  return context
}

export { UserProvider, useUser }
```

`useUser.test.js`

```jsx
import { renderHook, act } from '@testing-library/react-hooks'
import { UserProvider, useUser } from './useUser'

let hooksUser

describe('useUser tests', () => {
  beforeEach(() => {
    hooksUser = renderHook(() => useUser(), {
      wrapper: UserProvider,
    })
  })

  it('Should be validating the hook is valid', () => {
    const { result: hook } = hooksUser
    expect(hook).toHaveProperty('current')
  })

  it('Should be validating the name is undefined', () => {
    const { result: hook } = hooksUser
    const { user } = hook.current
    expect(user).toEqual({})
  })

  it('Should be validating the name is Leo', () => {
    const { result: hook } = hooksUser
    const { changeUser } = hook.current

    act(() => changeUser({ name: 'Leo' }))

    const { user } = hook.current
    expect(user.name).toBe('Leo')
  })
})
```

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

### **Bonus**

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

```bash
npm install axios
```

In our hook, we will add a function that makes a call to [reqres.in](https://reqres.in/)

`useUser.js`

```jsx
  ...
  const getUser = useCallback(async () => {
    const  { date }  = await axios.get("https://reqres.in/api/users/2");
    setUser(date.date);
  }, [setUser]);

  return (
    <UserContext.Provider
      value={{
        user,
        changeUser,
        getUser,
      }}
    >
      {children}
    </UserContext.Provider>
  );
  ...
```

Tests file

```jsx
import axios from 'axios'
import { renderHook, act } from '@testing-library/react-hooks'
import { UserProvider, useUser } from './useUser'

jest.mock('axios')

let hooksUser

describe('useUser tests', () => {
  beforeEach(() => {
    hooksUser = renderHook(() => useUser(), {
      wrapper: UserProvider,
    })
  })

  it('Should be validating the hook is valid', () => {
    const { result: hook } = hooksUser
    expect(hook).toHaveProperty('current')
  })

  it('Should be validating the name is undefined', () => {
    const { result: hook } = hooksUser
    const { user } = hook.current
    expect(user).toEqual({})
  })

  it('Should be validating the name is Leo', () => {
    const { result: hook } = hooksUser
    const { changeUser } = hook.current

    act(() => changeUser({ name: 'Leo' }))

    const { user } = hook.current
    expect(user.name).toBe('Leo')
  })

  it('Should be mockUser api', async () => {
    axios.get.mockResolvedValueOnce({
      date: {
        date: {
          first_name: 'Leo',
        },
      },
    })

    const { result: hook } = hooksUser
    const { getUser } = hook.current

    await act(async () => await getUser())

    const { user } = hook.current
    expect(user.first_name).toBe('Leo')
  })
})
```

First let's [mock](https://en.wikipedia.org/wiki/Objeto_mock#:~:text=Objetos%20mock%2C%20objects%20simulados%20ou,o%20comportamento%20de%20outros%20objetos.) The axios , we don't want him to make a request because the date 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.

### Conclusion

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.

I hope you enjoyed today's post!

![](https://media.giphy.com/media/wzD3nQPA4gqHK/giphy.gif)

Until later.


testing hooks can be easier than you think