Hybrid Assignments
# Overview
This series of four assignments and their related activities is focused on the valuable topic of testing your JavaScrip applications. Each of the four modules will introduce you to a different aspect of testing best practices. There is a lot more to learn, but these will give you a good foundation.
All together the Hybrids are worth 30% of your final grade.
| Assignment | Weight | Due |
|---|---|---|
| Static Testing | 25% | Week 3 |
| Unit Testing | 25% | Week 5 |
| Firebase | 50% | Week 10 |
Before you dive in, read this brief backgrounder.
# Why write JavaScript tests?
Experienced developers write almost as much code for automated tests as they do for the core application. Why?
# Confidence
Confidence that the code they have written conforms to the requirements. Confidence that they have handled as many error cases as they can think of. Confidence that they have not accidentally broken some previously working module. Confidence to refactor their implementation in a way that is more efficient or more maintainable, without changing the behaviour.
Some developers write their application code and then write tests to find the missed error cases.
Others write the tests first, to define the expected range of inputs and outputs from each module/function. This is called Test Driven Development (TDD). There are other variations on this like Behaviour Driven Development (BDD) or Domain Driven Development (DDD), but the basic philosophy is the same ...
- write tests first,
- then write the simplest implementation of your application code to make that test pass,
- and then refactor/optimize your code.
# Two important tips
Test functionality NOT implementation
The best way to avoid writing brittle tests that constantly need to be updated, is to focus on the input and output of any given function or component. Your tests should not rely on knowledge of the implementation details of the thing that you are testing!
Only test your own code
Do not waste time writing tests for the behaviour of third party libraries. They already have their own tests.
# Different kinds of tests
There is static testing, unit testing, integration testing, and end-to-end testing.
You may have heard developers talk about the testing pyramid (opens new window). It describes how we layer these different kinds of testing together to make sure that we have reliably checked all of the expected functionality and caught as many potential bugs as we can before our customers do.
Kent C. Dodds (opens new window), a well known personality in the JavaScript community and maintainer of the React Testing Library (opens new window), created a similar analogy using a trophy instead of a pyramid. I think this is a better reflection of the proportionate effort required for each kind of test.
Kent has one of the best online training workshops that I have seen to help you learn the best practices in Testing JavaScript (opens new window). It is not free, but its definitely worth it.
# Tools
Linter
Catch typos and syntax errors early by integrating a tool like eslint (opens new window) into your code editor. Your team may also setup git hooks (opens new window) to automatically run the linter before creating a commit.
Test runner
Automates running your project's unit and integration tests, including the setup and cleanup of any required test data. A tool like Jest can be run manually, triggered with git hooks (opens new window), or run continuously in watch mode while you write your code. There is vscode-jest a plugin for VS Code that will do this automatically for you.
Assertion library
The assertion library provides a set of semantically named comparison methods (opens new window) to simplify the testing syntax.
Browser Simulator
For end-to-end tests, we are trying to replicate how a real user would interact with the application. To programatically simulate (and reliably replicate) these interactions, we turn to tools like cypress (opens new window).
# Mocha and Chai
Mocha (mochajs.org (opens new window)) is a popular JavaScript testing framework, with over 3 million weekly downloads on NPM. It is most often pared with the Chai Assertion Library (opens new window).
# Jest
Jest is a newer JavaScript testing library created by the React team (opens new window). It provides the test runner/reporting framework and an assertion library, replacing both Mocha and Chai. Jest currently has more than 5 million weekly downloads on NPM – likely because it is included in the default project scaffolding created by the create-react-app and the vue create CLI tools.
Jest also includes code coverage analysis, snapshot testing, and tools to simplify creating mocks for external services or libraries.
But, one of the strongest reasons to prefer Jest over Mocha/Chai is the clear failure reporting which includes meaningful stack trace excerpts. This makes it much easier to understand exactly where a test failed and where to fix it.
# Community Support
The Jest community has some really great plugins (opens new window) that can add additional capabilities. Two in particular that I strongly recommend are jest-chain (opens new window) and jest-extended (opens new window).
Also baked into the default project configuration with create-react-app or vue create is the dom-testing-library (opens new window). This works really well with Jest to let you write clean integration tests that let you inspect the rendered DOM. There are official wrappers for most popular frontend frameworks, e.g. React, React Native, Vue, Angular, Svelte. It also integrates with Cypress for end-to-end testing.
The more your tests resemble the way your software is used, the more confidence they can give you. — Kent C. Dodds
# Watch this ...
React testing and debugging (opens new window) video tutorial (about an hour)
Write tests. Not too many. Mostly integration. (opens new window) (about 18 mins).
FunFunFunction video on why and how we do unit tests (opens new window) (about 18 mins).
FunFunFunction video comparing Integration Tests v.s. Unit Tests (opens new window) (about 28 mins).
# Additional Resources
React testing examples (opens new window)
Jest cheat sheet (opens new window)
React testing library cheat sheet (opens new window)
Test Driven Development (TDD) with React, React Testing Library, and Jest (opens new window)