kentcdodds/testing-react-apps

Prerequisites

System Requirements

All of these must be available in your PATH. To verify things are set up
properly, you can run this:

git --version  
node --version  
npm --version

If you have trouble with any of these, learn more about the PATH environment
variable and how to fix it here for windows or
mac/linux.

Setup

After you've made sure to have the correct things (and versions) installed, you
should be able to just run a few commands to get set up:

git clone https://github.com/kentcdodds/testing-react-apps.git  
cd testing-react-apps  
npm run setup --silent

This may take a few minutes. It will ask you for your email. This is
optional and just automatically adds your email to the links in the project to
make filling out some forms easier.

If you get any errors, please read through them and see if you can find out what
the problem is. If you can't work it out on your own then please file an
issue and provide all the output from the commands you ran (even if
it's a lot).

Running the app

For this one, there's not much to the app itself. The whole reason we have the
app is just so you can see examples of the components that we'll be testing.
You'll spend most of your time in the tests.

To get the app up and running, run:

npm start

This should start up your browser. If you're familiar, this is a standard
react-scripts application.

You can also open
the deployment of the app on Netlify.

Running the tests

npm test

This will start Jest in watch mode. Read the output and
play around with it. The tests are there to help you reach the final version,
however sometimes you can accomplish the task and the tests still fail if you
implement things differently than I do in my solution, so don't look to them as
a complete authority.

Exercises

  • src/__tests__/exercise/00.md: Background, Exercise Instructions, Extra
    Credit
  • src/__tests__/exercise/00.js: Exercise with Emoji helpers
  • src/__tests__/final/00.js: Final version
  • src/__tests__/final/00.extra-0.js: Final version of extra credit

The purpose of the exercise is not for you to work through all the material.
It's intended to get your brain thinking about the right questions to ask me as
I walk through the material.

Helpful Emoji 🐨 💪 🏁 💰 💯 🦉 📜 💣 👨‍💼 🚨

Each exercise has comments in it to help you get through the exercise. These fun
emoji characters are here to help you.

  • Kody the Koala 🐨 will tell you when there's something specific you should
    do
  • Matthew the Muscle 💪 will indicate what you're working with an exercise
  • Chuck the Checkered Flag 🏁 will indicate that you're working with a final
    version
  • Marty the Money Bag 💰 will give you specific tips (and sometimes code)
    along the way
  • Hannah the Hundred 💯 will give you extra challenges you can do if you
    finish the exercises early.
  • Olivia the Owl 🦉 will give you useful tidbits/best practice notes and a
    link for elaboration and feedback.
  • Dominic the Document 📜 will give you links to useful documentation
  • Berry the Bomb 💣 will be hanging around anywhere you need to blow stuff
    up (delete code)
  • Peter the Product Manager 👨‍💼 helps us know what our users want
  • Alfred the Alert 🚨 will occasionally show up in the test failures with
    potential explanations for why the tests are failing.

Workshop Feedback

Each exercise has an Elaboration and Feedback link. Please fill that out after
the exercise and instruction.

At the end of the workshop, please go to this URL to give overall feedback.
Thank you! https://kcd.im/tra-ws-feedback

Transcript

Kent C. Dodds: 0:00 It's time to talk about testing. I'm so excited. I love testing. I created React Testing Library to make it so that everybody could love testing React apps. I'm excited to show you how I go about doing that.

0:13 Testing React applications is 100 percent about confidence. You want to be confident that you can ship your code without having to manually go through every single thing every time you make a change because sometimes you make a change over here breaks over here.

0:29 Without checking everything, you can't be certain. Automated testing that we're going to be going through is a mechanism for making you confident that when you make changes, you can ship without having to check every single little thing manually.

0:46 Let's dive in to the repo. This one's a little bit different. The repo is testing React apps. If we come down here, you'll notice I do have some prerequisites. Don't miss those for sure. Then here, in this setup, it's exactly the same as everything else. The difference here is going to be in the application itself.

1:06 Because the exercises are tests, we're mostly going to be working in the test, not in the app. Actually, if you look at the app, it's pretty sad. There's not a whole lot here. The only reason the app exist at all is for you to be able to look at the actual implementation, so you can play around with it as like you're working on figuring out how to test this thing.

1:29 There's not a whole lot to the application itself. You maybe spend a little bit of time in here, but most of your time will be spent in the test.

1:36 Let's pop open the test over here. I'm going to open up another tab here. We'll run npm t and you'll notice that we actually have...If I hit A, it will run all the tests, we have a lot more test. They're all passing.

1:50 Your job is to follow along with our friend Cody the Koala. Cody is going to tell you, "OK. You need to write a test for this thing." Your job is to do that and have your test continue to pass.

2:04 You'll notice we don't have a final or an exercise in the source directory. For the testing one, it's all in the dunder test, dunder directory. Jest is going to look up all the files that are in there and run them as test.

2:18 Here we have our exercises right here. Because we don't have an actual app for this one, you're going to be looking for that background and exercise information directly in the markdown files themselves. That's where you're going to be reading through that information.

2:33 Then your actual test file is going to live right side-by-side with that. You'll write your React test in here, following along with our good friend, Cody.

2:44 That's what you're going to be working on. It's going to be good. There are extra credits for this, just like everything else. Plenty of extra credits for you to work on. Again, you're going to be working with the Jest test.

2:56 I'll mention here, you'll probably want to scope down your test to 01. If I want to work on 01, I'm going to type 01. Then I'll use my arrow keys to select the exercise file that I want to have run. I'll run exercise. Then we'll follow along with Cody to make sure that we've tested everything out.

3:16 Other than that, everything else is basically the same. Where you get the elaboration and feedback is going to be here at the bottom. You copy and paste that into your browser. Outside of that, everything else is...

3:31 There is one other thing here in the component's directory. Those are the things that you're going to be testing there. All of the things that you import are going to be imported from that component's directory. That's another thing to keep in mind.

3:47 If you want to, you absolutely are totally free to dive into those implementations of each one of these to get an idea of like, "OK, I know I'm not supposed to be testing implementation details, but I would like to know what the implementation is that might give me a better idea of how to test it."

4:02 That's the goal. That is the workshop. Remember testing is 100 percent about how can you be confident that you can ship things. Another tip, when you're looking at a component that you want to test, step back for a second and think, "If I were a manual tester, how would I test this?" Then make your test do the thing that the manual tester would do.

4:24 That is all that I'm going to give for you. Have a good time in this workshop, and we'll see you on the other side of it.