DEV Community

Lautaro Suarez
Lautaro Suarez

Posted on

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
Image description

myComponent.test.tsx

Image description

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

Image description

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

Image description

myComponent.test.tsx

Image description

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.

Top comments (3)

Collapse
 
emilysocool profile image
Emily Crookham

Hello

Collapse
 
lausuarez02 profile image
Lautaro Suarez

Hey, can i help you?

Collapse
 
emilysocool profile image
Emily Crookham

I’m new here, want to make new friends