DEV Community

Lautaro Suarez
Lautaro Suarez

Posted on

1

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.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay