Testing Workshop

👋 hi there! My name is Kent C. Dodds! This is a workshop repo to teach you about testing JavaScript applications.

Thank You

Big thanks to the RealWorld project from GoThinkster. This project is a copy of the Node implementation and the React implementation of the RealWorld project.

Also thank you to all the contributors

Topics covered

Unit Testing with Jest
Integration Testing with Jest
End to End (E2E) Testing with Cypress

We'll mention other forms of testing, but these are the types we'll focus on and learn in this workshop. We'll learn about the benefits (and tradeoffs) of TDD. We'll learn how to configure the tools and why, when, where, and what to test.

Project

System Requirements

git v2.10.2 or greater
NodeJS v6.9.5 or greater
yarn v0.20.3 or greater (or npm v4.2.0 or greater)
MongoDB v3.4.2 or greater

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

git --version
node --version
yarn --version
mongod --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-workshop.git
cd testing-workshop
npm run setup --silent

This may take a few minutes. If you get any errors, please read the error output and see whether there's any instructions to fix things and try again. If you're still getting errors or need any help at all, then please file an issue.

Note: You might see this:

I'm not sure how to prevent this from happening (suggestions appreciated!) but it happens every time you run the e2e tests. Just hit Allow (super annoying). Sorry about that 😞

Cypress

If you're a windows user, please see the next section...

For everyone else, you'll want to come with Cypress.io downloaded, installed and have an account ready to go. Please follow these instructions to do this!

Windows users!!

Unfortunately, the cypress application does not yet support the Windows platform. You should still be able to run cypress in "headless" mode, but you will be unable to open the application for development.

To get around this issue, you'll have to run the E2E portion of the workshop on Linux or Mac. I recommend either installing and booting your machine in Linux, or running a Linux Virtual Machine on your Windows computer.

Alternatively, you could just forego the application bit and mostly observe that portion of the workshop. If you're doing this with a group, perhaps you could pair with someone who has a Mac or Linux machine.

Running the app

To get the app up and running (and really see if it worked), run:

npm start dev

# if using yarn
yarn run dev

This should start mongod, the api server, and the client server all at the same time. Your browser should open up automatically to http://localhost:8080 (if it doesn't, just open that yourself) and you should be able to start messing around with the app.

Here's what you should be looking at:

If this fails at any point for you, please first see Troubleshooting and if you still can't get it working, make an issue.

Login

If you want to login, there's a user you can use:

Email: joe@example.com
Password: joe

To stop all the servers, hit Ctrl + C.

Protip: we're using nps in this project. If you want to type less, then you can install nps globally: yarn global add nps (or npm i -g nps) and then you can run nps instead of npm start

Troubleshooting

`npm dev` command not working

If it doesn't work for you, you can start each of these individually yourself:

npm start dev.mongo

npm start dev.api

npm start dev.client

`verify.js` saying something's wrong with mongo

The mongod binary needs to be available in your path for you to run mongod from the command line (which is what this project's scripts does for you). Learn how to do this on windows or on mac.

Note: you'll need to open a new terminal/command prompt window after you've done this.

Structure

This project has a bit of a unique setup. Normally you'll have just a single package.json at the root of your repository, but to simplify setup I've included both the api and client projects in a single repository. The root of the project has a package.json as does api, and client. Most of our time working on tooling and running tests will be in one of these sub-directories (with the exception of the E2E tests).