Testing React Forms - React Testing Library - React.js Testing Tutorial #8

In this video we will learn how to test React Forms using React Testing Library. Our React forms can be implemented using formik or react hook form and our tests will work for both libraries.

The tests will take no assumption on the "library" used, so independently of you using react hook form or formik, those tests will work in both libraries.

Join the channel to support my content:

Timeline:
00:00 Introduction
00:55 Demo the form we will test
02:58 Test the happy path scenario
14:21 Refactoring
15:35 Test the required fields
16:55 IMPORTANT: toHaveErrorMessage
22:00 Test Min and Max characters using react testing library
25:45 Cross-Step Validation - money field
29:00 What to test next?

Follow me on:

#jest #ReactTestingLibrary #formik

[mikejohnstone]

Just came across your channel and…. Wow! Your videos are fantastic! I love the part of this one where you break down the finite amount of time for righting tests! I cannot tell you how many times I’ve caught myself writing tests for the sake of writing them… the only thing that I would add to your comments would be, if the user finds a bug or an unexpected side effect tests should be added for those cases. Tests, like the code, can always be revisited and revised. Keep up the awesome content! On to the next video!

[camiam]

Fantastic in all directions: testing, error handling, use of Formik, and practical developer advice. Thank you!

[washingtoncampos]

Wooow, Bruno I have no words to explain how much you are helping me with your videos, you’re by far the best teacher on YouTube when we talk about tests, you’re teaching something that most people don’t teach, you’re awesome, thank you so much for that

[yashaswani]

You don't know how much this video has helped me Bruno, Thanks a LOT!

[Krazness]

Great video. That testing playground is a Godsend

[AhmedSalah-wcle]

You are amazing Bruno, This whole series is great.

[OThiagoliveira]

This is the best video about testing library I ever seen, thanks alot! Um abraço do Brasil

[tomras]

Hey Bruno, just wanted to drop a huge thanks for what you are doing, really enjoy your in-depth explanations on why to use one thing and not use the other, love your videos and don't stop doing what you're doing, because you are amazing at it!

[softwareengineer]

You are one of the most humble and fantastic Tech Professional Bruno. I always Love to watch your video just because of clear and in depth explanation. 👏👏👏👏😊😊😊

[evandromottaz]

Bruno que vídeo sensacional, melhor vídeo de jest que já vi em inglês feito por um brasileiro.

Você conseguiu fazer valer esses 30 minutos muito bem.

[yongkibojack]

Thank you so much. There is no one explain React testing better than you. Very helpful 👍🙏

[manuelpineda]

Excellent video, very well explained!

[gambit]

Excelente, meu amigo!

E background novo, huh? Ficou bom!!!

edit: agora que reparei que é o mesmo, mas da forma que aparece neste vídeo pareceu algo novo!! My bad!

[DanielRios]

26:54 I am trying to do this for ES Modules mockup, but when I put jest.mock() in a function on another file it fails to mock the module, and when I only return the module and the mocked data using jest.mock() in the test file, it says that it "cannot access ... before initialization".

Jest.mock() receives a string and a function only, but when you have a lot of modules to mock the test file becomes too large with a lot of repetitive code.

[christostsm]

Just found your videos Bruno. Would like to say i am sad your last one was a year ago :/ I hope everything goes well for you, your testing videos helped a lot. Gracias! :)

[ManOrDestinyKRR]

Hi Bruno, appreciate your time.
How to test a form which is dynamically generating fields, for example on basis of ist select input, 2nd options are generated and after that submit button is generated.

[abhishekm]

What should i do to get the formvalues without an callback function in your case you have passed the onSubmit to the Multifom Component. How to achive this without the callback

[DanielRios]

I'm using a normal form element, and when I use user.click() on submit button, the onSubmit mock function is not called, it fails on both toHaveBeenCalledTimes() and toHaveBeenCalledWith(), and I'm passing the onSubmit mock to the component

[deepalakshmip]

Hi, Your videos are helped me a lot!!! Thank you. Could you do more videos and especially testing for REDUX.

[thesumitsingh]

hello, I am getting error when trying to use the 'within' function (err message: cannot find name 'within'). Then I imported it from @testing-library/react, but then it gave me error mesaage: "Type 'HTMLElement' is not assignable to type 'string'.". what to do? i am using it similar to you for the dropdown.