Blog on different types of matchers in Jest for React Testing #242
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
hulksyed07
requested review from
bhavesh80,
2KAbhishek,
kartik-madhak and
aaditya25052002
kartik-madhak
approved these changes
Dec 17, 2024
2KAbhishek
approved these changes
Dec 17, 2024
There was a problem hiding this comment.
@swathynair19 maybe we can get a better image for this, other than that, content looks good
radiantshaw
reviewed
Dec 20, 2024
There was a problem hiding this comment.
@hulksyed07 Very nicely and concisely explained. Just a few optional nitpicks.
|
|
||
| ## What Are Jest Matchers? | ||
|
|
||
| In Jest, matchers are methods that enable you to compare the actual output of your code with the expected outcome. These matchers are used within `expect` statements, and they provide a readable way to express test conditions. |
There was a problem hiding this comment.
Nit:
Suggested change
| In Jest, matchers are methods that enable you to compare the actual output of your code with the expected outcome. These matchers are used within `expect` statements, and they provide a readable way to express test conditions. | |
| In Jest, matchers are methods that enable you to compare the actual output of your code with the expected outcome. These matchers are chained to `expect` statements, providing a readable way to express test conditions. |
| expect(component.textContent).toBe('Hello, World!'); | ||
| ``` | ||
|
|
||
| In this case, `toBe` is a matcher that verifies the actual value matches the expected value exactly. |
There was a problem hiding this comment.
Suggested change
| In this case, `toBe` is a matcher that verifies the actual value matches the expected value exactly. | |
| In this case, `toBe` is a matcher that verifies that the actual value exactly matches the expected value. |
Reads more fluently IMO.
| Examples: | ||
|
|
||
| ```javascript | ||
| import {render, screen} from '@testing-library/react'; |
There was a problem hiding this comment.
Nit:
Suggested change
| import {render, screen} from '@testing-library/react'; | |
| import { render, screen } from '@testing-library/react'; |
2KAbhishek
reviewed
Dec 23, 2024
There was a problem hiding this comment.
@hulksyed07 lets remove this file and update the image to the new one
There was a problem hiding this comment.
Have updated it to the new compressed image.
2KAbhishek
reviewed
Dec 23, 2024
There was a problem hiding this comment.
will be good to compress this before merging
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What did you do?
Please include a summary of the changes.
Why did you do it?
Why were these changes made?
Screenshots (Please include if anything visual)
Include any relevant screenshots that may help explain the change.