9^th Practical Class:
Unit Testing

The Goal: Game Of Life

Unit Testing: Jest & Vitest

Quacker uses the following testing frameworks:

• backend: Jest
• frontend: Vitest

• Vitest is almost compatible with Jest
• Existing Vite config can be reused for compiling test files too
• TypeScript and JSX support out of the box

Node.js also has a built-in test runner.

Quacker example: Get Initials

:

Unit Test

:

• - a group of related tests, useful for tracking in test reports
• / - a set of related expectations in a single test
• - assertion - "I expect the output to..."
  • , , , ...

Run Tests in Quacker

Component Tests: React Testing Library

testing-library.com

The more your tests resemble the way your software is used, the more confidence they can give you.

• Core library: DOM Testing Library
• Wrappers for frameworks (React, Angular, Vue...)
• Works with JSDOM or in the browser

Example: To-do list in Quacker

Test case:

When I open the to-do list, enter the name of a new to-do item in the input field labelled "What shall be done?" and press the "Add" button, the new item will appear on the to-do list as a checkbox.

Queries

Methods to find an element on the page.

• - query an element in the accessibility tree. Works best in combination with the option to find by their accessible name. Try this method first!
• - good for form fields
• - a placeholder is not a substitute for a label
• ...see all in Queries - Priority

Types of Queries:

• - throws an error if no elements are found
• - returns if no elements are found
• - returns a Promise which resolves when an element is found

Articles

• How to use React Testing Library Tutorial
• Common mistakes with React Testing Library

Game Of Life

For more information visit the Conway's Game of Life page at Wikipedia.

Rule # 1

Any live cell with fewer than two live neighbors dies, as if by underpopulation.

Rule # 2

Any live cell with two or three live neighbors lives on to the next generation.

Rule # 3

Any live cell with more than three live neighbors dies, as if by overpopulation.

Rule # 4

Any dead cell with exactly three live neighbors becomes a live cell, as if by reproduction.

All Rules:

Test Driven Development (TDD)

1. Write Failing Test
2. Fix Tests
3. Refactor
   repeat!

TDD Cycle

1. Write Failing Test

2. Fix Failing Test
(as fast as possible)

• change code so all tests passes

3. Refactor

• refactor code (or tests too)
• all tests must pass

5. Write Failing Test
(repeat!)