React Testing Library Tutorial #10 - Fire Events

Check out Laith's TH-cam channel for more tutorials:
/ @laithacademy
🐱‍💻 Access the course files on GitHub:
github.com/har...
🐱‍👤 Get access to extra premium courses on Net Ninja Pro:
netninja.dev
🐱‍💻 Full React Course:
• Full React Tutorial #1...
🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

[@ClutchProd]

Might be good to also mention the userEvent library to simulate key presses and clicks, so you can type the value into the input box.

[@suhasrao4324]

Official docs suggests using userEvent over fireEvent. Below is for userEvent v14+
import userEvent from "@testing-library/user-event";
const mockSetTodo = jest.fn();
describe("User Input Component", () => {
test("should be able to type into input field", async () => {
render();
const inputElement = screen.getByPlaceholderText(/Add a new task here.../i);
await userEvent.setup().type(inputElement, "Shipping World!");
expect(inputElement.value).toBe("Shipping World!");
});

test("renders an empty input field when 'add' button is clicked", async () => {
render();
const inputElement = screen.getByPlaceholderText(/Add a new task here.../i);
const buttonElement = screen.getByRole('button', { name: /Add/i});
const user = userEvent.setup();
await user.type(inputElement, "Shipping World!");
await user.click(buttonElement);
expect(inputElement.value).toBe("");
});
});

[@michaelsaucedo3952]

Liking this. I've been wanting to add testing to my React abilities. 🃏

[@exodion4173]

Amazing explanation.

[@romimaximus]

At 7:12, i didnt get where that "jest" came from ? if you can, please explain, im a little confused, is that another testing library ? if so , do i have to install it to use it ? i apreciate for this great testing tutorial playlist, its really helping me a lot !! 👍

[@neenus]

jest is already installed as part of testing-library in a react app that is created with create-react-app... if you look at your package.json file you should see @testing-library/jest-dom listed under dependencies

[@romimaximus]

@@neenus ok, i didnt know that, i thought that i have to install it, but thank you for your feedback 😎👍

[@mun6048]

Async is not required while getting element from a component(5:12) ?

[@thesimplypleasure4746]

It's gonna be awesome sir 👍😍

[@80Vikram]

Chole bhature ka re ??

[@swagboysahil530]

hey, I got this error at 11:00 "messageParent" can only be used inside a worker
could not find much useful info about this error.how to resolve it ?

[@rossidude]

Remember to use the .value property of your inputElement

[@80Vikram]

Thanks a ton, god bless you

[@tribaldeni]

what if you're using context to pass values

[@sagarreddy7461]

thanks laith n shaun.

[@vikasni95]

This is just a masterpiece 😊

[@NetNinja]

Thank you!

[@sardorjumanazarov441]

wow superb, keep goin

[@franklinrodriguez5427]

why u use async?

[@raffaelenicosia9335]

I believe it is just a copy and paste mistake

[@cbn4000]

I'm getting "undefined is not iterable" when running the last test.

[@albeque]

Does anyone know how to test hover on button? I tried so many ways

[@doniaelfouly4142]

thanks

[@EddieCheng174]

7:36 Interestingly, instead of "Add a new task here...", I accidentally tried "Add a new task here" and it still passed the test.

[@camdoes739]

same, i tried it with 'A' as well and it passed. it seems that getByPlaceholderText does not perform exact search, or actually, it might be something with regular expressions

[@camdoes739]

confirmed hahaha it is something with regular expressions. if you use a string, it does throw an error

[@EddieCheng174]

@@camdoes739 cool thx!

[@EddieCheng174]

@Loukas Piloidis thanks for clear explanation

[@batuhankir8402]

gg

[@akaraze749]

It'll be better if you speak less BS and be more on point.