Jest essentials

Jest Essentials:

On this post I am going to make a short explanation about jest and how to start with it as a beginner.

render: what`s render? As we also use it when rendering a component is basically that. This method will help us rendering the component on the testing side.

If we need to get an specific test-dataid, role, text, etc. we can get it by just destructuring the component.
We can get it testid, role, text and other things in order to test the component.

myComponent.tsx

myComponent.test.tsx

This way we will receive that the test is incorrect because we were expecting the textContent to be 'test ttt' but it actually is 'test text'

Now we just fix it and we will see how it is correct now.
myComponent.test.tsx

Now we are going to talk about the 'fireEvent' element and how we can use it.

There is a lot of use for 'fireEvent' but one of the main ones it is the fireEvent.click() which is as may think to imitate a click event.

myComponent.tsx

myComponent.test.tsx

This way we are testing that the function is being called by passing it as a parameter to the component in order to test it.

If you want to learn more about jest i will highly recommend going to the jest documentation.

Hope someone found it useFul.

Lautaro.