React Testing Crash Course

Learn about testing in React including unit, e2e and integration testing with React Testing Library, Jest & Cypress

Techbase YouTube Channel:

Starter Repo:

Final Repo:

Timestamps:
0:00 - Brad Intro
0:55 - Mitchel Intro
1:24 - Why should you test?
1:58 - What to test?
5:48 - Demo app setup
11:06 - Unit tests
25:11 - Integration tests
28:07 - End-to-End tests
55:56 - Wrap up

[ahmedosama]

Great! We need more tutorials about testing, there isn't much of it on the internet

[nbo]

The starting repo is broken and outdated. Just saving you some time. Do some other video.

[darkfrozen]

So, this doesn't work anymore. Tried really hard to setup the project but it just doesn't work at all.
Searched online and they were saying to downgrade to node 16 etc. Tried all the other fixes none worked.

[aadil]

No!! I DON'T WANT TO BE A SOFTWARE ENGINEER AT GOOGLE!! leave me alone 'algo girl'
Every time, Jesus.

[muhammed_rahif]

Exactly what I needed... perfect timing...🤩

[tevinmorake]

Thanks Brad, Mitchel. I learnt quite a lot today even though I've been testing for years.
Really appreciate it guys!

[samanfayazi]

What would we do without you brad? honestly I have no clue, respect guys, for all your hard work

[Koko-pgwu]

Can someone tell me why I can't log in to the app? The server is running and I did use johndoe as username and s3cret as the password? All it says is username os password is invalid.

[thatCbean]

First of all, great video, it is very educational and easy to listen to.
I would like to say a couple things however:
Firstly, you said that integration tests are more than just combining unit tests, but I feel like you didn't really cover the whole idea of what the difference is and why you need both.
For those reading this in the future, a unit test tests a single component and is very useful to find problems with specific parts of your program. The purpose of an integration test is to test if the components correctly function when put together. They basically test the connection between components. If you rely solely on integration tests you may find errors, but it will be harder to see in which component they might be whereas unit tests generally point you right to the faulty component. Unit tests are also really useful for boundary testing: Testing cases near branching points in the code, and other edge cases.

EDIT: In other words, for important parts of your code you would want both unit and integration tests.
In this case I would have used unit tests to see if the buttons work correctly and to see if the text boxes take their inputs correctly, and an integration test to see if clicking the pay button actually correctly registers the inputs of the fields and passes them on to the next component, instead of just combining the unit tests.

Secondly, I feel like your code editor is a bit too small, you can't really see the code, even though that should be the focus of the video.

EDIT 2: At 42:55 you also say that there is only one text box so just targeting "textbox" is fine. That is of course only the case if no other textbox will be added later. If you only have one test like this it would be easy to edit, but if you write a lot of tests like this adding components to pages can get very tedious very quickly because of the amount of tests you will have to edit, on top of the new tests you already have to write.

EDIT 3: At about 45:00 you say "use as small of a value as possible", but I would personally argue that this way, you do not test larger values which are much more important. I would say a better option would be to reset the database before and/or after your tests, and to at least test larger values in your integration tests (especially very large values).

[austinpatrick]

I too had the authentication issue. Username: johndoe and Password: s3cret was not working. My solution was the following: Make sure the backend is also running. When you run yarn dev, check the output and make sure you don't see "[nodemon] app crashed - waiting for file changes before starting...". If so, I resolved it by changing line 79 in backend/app.ts from... app.use(checkAuth0Jwt); --to--> app.use(checkAuth0Jwt as any); .... Also similarly add this "as any" to lines 84, 89, and 94. Then rerun yarn dev, and it should work.

[dannieh]

Hi! Really useful video. One suggested improvement is that, because of heavy indentation, maybe you could split the editor with a horizontal line instead of vertical? It's really hard to follow when you're scrolling left to right. At almost no point was it possible to read an entire instruction without you doing that.

Thanks and keep doing what you're doing!

[fricktion]

starter repo super broken, just an fyi for everybody.

[PeterMumford]

I can't get the repo to run. It appears to be completely stuck in dependency conflicts. The breaking error is "Module not found: Can't resolve '../aws-exports'" . But aws-exports in not a dependency. It appears to be a container. There are open issues on the repo regarding this same problem.

[devorein]

Found another gem. Thank you so much, Brad and Techbase.

[thisaintmyrealname]

YES. Thank you. This is the other half of the knowledge that is required at jobs!

[joangerard]

have the login details changed? I am unable to sign in

[TimWinfred]

For accessibility, your form inputs should ALWAYS have labels.

[ajeethkumarr]

Hey Brad I am doing your udemy mern Ecommerce project, in fetching data from react chapter I got stuck on http-error 431, what should I do to get rid of this?

[tech]

Is it just me or did that `yarn install && yarn dev` take a lot of time, and show like 18000 packages?

[jasonwarner]

"For a small app like this"
*tears*