Testing Workshop: Ideas for format/content/resources/etc.?

[kentcdodds]

I definitely plan on using Jest for writing Unit tests. I plan on having a section to discuss my five minute talk "What we can learn about testing from the wheel". I'm thinking about doing some Integration/E2E testing with Cypress.io but I'm not certain there...

[kentcdodds]

So here an initial outline.

Background

Why do we test?

Slides briefly discussing the history of testing in general and in JavaScript. Perhaps a few stories and examples of when an automated testing saved the day or could have saved the day. (Any interesting stories would be helpful!)

How do we test?

• Basically my talk "What we can learn about testing from the wheel".
• Why, how, what, and when of TDD
• What is code coverage and how does it work in JavaScript

What do we test?

Here we'll talk about a few things:

• the value of time and focusing on the things that will provide the greatest dividends.
• why and how to avoid situations where refactoring breaks your tests.
• why, what, when, and where mocking is appropriate

Hands on

The hands on portion will be based on an application. I'm not sure what application to use, but I'd prefer it not be an app I have to write from scratch myself. I'll probably fork it (attributing the original author) and modify it (so it'll need to be open source). Looking for a SPA that has a React frontend and an Express backend. I want something that would be intrinsically interesting to the target audience. Perhaps a game or something that uses the GitHub API. It'll need routes, authentication, some amount of CRUD. I'd also prefer that it's already set up with Babel (and maybe even Flow! Because then I could talk about all the tests you don't have to write when you have a type checker!)

Unit testing

Basic JavaScript utilities

This is the easiest starting point. We'll probably start on the backend for this.

Key takeaways:

• Setting up Jest
  • Configuring for node
  • Running with code coverage
  • Watch Mode
• How to write unit tests with Jest

Advanced

We'll build on the tests that we have on the backend, but start using mocking.

Key takeaways:

• Using Jest's built-in mocking capabilities
• When to mock and the trade-offs you make doing it

TDD

Here we'll add a new feature to the backend API and develop it using TDD

Key takeaways:

• How TDD can help you develop quicker/better software
• What TDD costs and when the cost isn't worth the benefit.

Frontend Testing

Here we'll take some of the more complicated UI components and test the functionality that would be challenging to cover in the E2E tests.

Key takeaways:

• Setting up Jest
  • Configuring for the browser
• Testing React (when it's useful and worth the effort and when it's not)
  • Using enzyme
  • Snapshot testing

Integration testing

Here we'll test a full route for the API. Perhaps authentication or something that uses several modules or downstream APIs to accomplish a task. We'll talk about snapshot testing (probably with an API response).

Key takeaways:

• The benefits of integration testing (and the trade-offs)
• The benefits of snapshot assertions (and the trade-offs)
• Most of your code coverage should probably come from these kinds of tests

End to End testing

Here's where we'll bring in Cypress.io and talk about the tool itself. We'll set it up and write at least one test for a full flow (the most important flow) of the application.

Key takeaways:

• E2E tests are the best bang for your buck
• They can be finicky and run a little slower (though Cypress really helps with this).
• You'll get a lot more code coverage, but measuring it is difficult (not worth it really). What really matters with E2E tests is use-case coverage (also hard to measure, but something you should be thinking about).

Conclusion

We'll conclude with an overview of the three types of testing we covered. I'll talk about where you should run your tests (perhaps if we have time I'll add a section about setting up CI with the project). I'll give a reminder that there are more kinds of testing you should be doing. And mention again that you should always weigh the costs with the benefits of the time and effort you spend on writing, running, and maintaining your tests.

Feedback welcome!

[kentcdodds]

I think I've found the perfect application for the workshop: Conduit Node backend and Conduit React frontend. It's pretty perfect I think.

[kentcdodds]

Here are some handy cypress tips from @bahmutov 👏