Skip to content

Instantly share code, notes, and snippets.

@yogain123
Last active March 10, 2023 17:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yogain123/b83ea8e75e1c0d20829eab0b895f5582 to your computer and use it in GitHub Desktop.
Save yogain123/b83ea8e75e1c0d20829eab0b895f5582 to your computer and use it in GitHub Desktop.
Testing React - JEST + RTL
@yogain123
Copy link
Author

Basics

Screenshot 2022-10-09 at 11 57 35 AM


Screenshot 2022-10-09 at 11 58 11 AM

@yogain123
Copy link
Author

yogain123 commented Oct 9, 2022

Types of tests

Screenshot 2022-10-09 at 11 58 56 AM


Screenshot 2022-10-09 at 11 59 23 AM


Screenshot 2022-10-09 at 11 59 42 AM


Screenshot 2022-10-09 at 12 00 06 PM


Screenshot 2022-10-09 at 12 00 25 PM


Screenshot 2022-10-09 at 12 01 38 PM

@yogain123
Copy link
Author

Ananomy of test

Screenshot 2022-10-09 at 12 05 12 PM


Screenshot 2022-10-09 at 12 19 53 PM

@yogain123
Copy link
Author

TDD

Screenshot 2022-10-09 at 12 21 44 PM

@yogain123
Copy link
Author

Grouping Test

Screenshot 2022-10-09 at 12 56 37 PM

@yogain123
Copy link
Author

Filename convention

Screenshot 2022-10-09 at 12 58 57 PM

@yogain123
Copy link
Author

Code Coverage

Screenshot 2022-10-09 at 1 01 27 PM

@yogain123
Copy link
Author

RTL Queries

Screenshot 2022-10-09 at 1 06 44 PM


Screenshot 2022-10-09 at 1 09 53 PM

@yogain123
Copy link
Author

Test match

Screenshot 2022-10-09 at 1 20 33 PM


Screenshot 2022-10-09 at 1 19 44 PM

@yogain123
Copy link
Author

findBy

Screenshot 2022-10-09 at 1 24 01 PM


Screenshot 2022-10-09 at 1 23 38 PM


Screenshot 2022-10-09 at 1 26 08 PM


Screenshot 2022-10-09 at 1 26 37 PM

passing 3rd arg to wait longer than default timeout

@yogain123
Copy link
Author

Manual Queries

Screenshot 2022-10-09 at 1 27 58 PM

@yogain123
Copy link
Author

yogain123 commented Oct 9, 2022

User Interactions

Screenshot 2022-10-09 at 1 33 56 PM


Screenshot 2022-10-09 at 1 35 28 PM


Screenshot 2022-10-09 at 1 37 49 PM


Screenshot 2022-10-09 at 1 38 24 PM


Screenshot 2022-10-09 at 1 39 54 PM


Screenshot 2022-10-09 at 1 40 18 PM

@yogain123
Copy link
Author

Keyboard interaction

Screenshot 2022-10-09 at 1 43 09 PM


Screenshot 2022-10-09 at 1 44 10 PM


Screenshot 2022-10-09 at 1 44 49 PM


Screenshot 2022-10-09 at 1 45 53 PM


Screenshot 2022-10-09 at 1 46 43 PM


Screenshot 2022-10-09 at 1 46 22 PM


Screenshot 2022-10-09 at 1 46 32 PM


Screenshot 2022-10-09 at 1 45 44 PM

@yogain123
Copy link
Author

Providers

Screenshot 2022-10-09 at 1 50 14 PM


Screenshot 2022-10-09 at 1 50 25 PM

@yogain123
Copy link
Author

Custom Render function

Screenshot 2022-10-09 at 1 55 26 PM


Screenshot 2022-10-09 at 1 55 55 PM

@yogain123
Copy link
Author

yogain123 commented Oct 9, 2022

Custom React hooks

Screenshot 2022-10-09 at 1 59 29 PM


Screenshot 2022-10-09 at 2 00 15 PM

@yogain123
Copy link
Author

Act Utility

Screenshot 2022-10-09 at 2 04 49 PM


Screenshot 2022-10-09 at 2 05 05 PM

Typically RTL wrap all code in ACT function that causes state update, however in this particular instance you are direclty calling increment which in turn directly calls a function that causes the state update, and that function is setCount, there is just no way for RTL to wrap this function in ACT and thats why it warn to add ACT.

Screenshot 2022-10-09 at 2 08 29 PM

@yogain123
Copy link
Author

yogain123 commented Oct 9, 2022

Mocking HTTP Requests

MSW -> mock service worker

Screen Shot 2022-10-09 at 4 39 03 PM


Screen Shot 2022-10-09 at 4 42 52 PM


Screen Shot 2022-10-09 at 4 40 41 PM


Screen Shot 2022-10-09 at 4 43 48 PM

@yogain123
Copy link
Author

MSW Error Handling

Screen Shot 2022-10-09 at 4 45 58 PM


Screen Shot 2022-10-09 at 4 45 47 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment