Frontend UnitTesting

Exercises are detailed below or in the Github Discussions

Vitest

This project uses Vitest as the test runner. Vitest provides a Jest-compatible API, so Jest knowledge transfers directly. If you know Jest, you know Vitest.

• Vitest Docs
• Migrating from Jest

Debugging

Chrome

cd react-testing
bun run test:debug

Put a debugger; statement in your test and open chrome://inspect or use the Node.js V8 --inspector Manager extension.

See Vitest Debugging for more options.

Visual Studio Code

VS Code Extension

See .vscode/launch.json.

Exercise

• react-testing/src/date-holidays: Is it time to fix the date-holidays performance issue permanently, TDD style?

Express Exercises

See confac
Tag: jest-start
Entrypoint: /backend/src/controllers/tests/

• 0-config-templates.test.ts: Mocking the FileSystem (easy)
• 0-user-verify.test.ts: Mocking the google-auth-library (easy)
• 1-clients.test.ts: Manual Express Mocking (easy)
• 2-consultants.test.ts: Switching to mongodb-memory-server from our poor-man fakeDb implementation (medium)
• 3-projectsMonth.test.ts: Mocking Express with supertest (medium)
• 4-projectsMonth.test.ts: Bringing it all together (medium)
• 7-deleteInvoiceController.test.ts: You're on your own now (hard)
• 8-createInvoiceController.test.ts: A whole bunch of mocking (hard)
• 9-emailInvoiceController.test.ts: Buffers, merging, lots of fun (hard)

Jest

Facebook's test runner that dominated the 2010s. Vitest is the modern successor with the same API. Understanding Jest helps when working with older codebases.

• Jest Community
• Jest Docs
• Jest Cheat Sheet

Jasmine

The OG of JavaScript testing frameworks. Jest and Vitest inherited its describe/it/expect syntax. Still useful for understanding the lineage of modern test runners.

• Project with all common usage as running tests
• Blog post series on Jasmine
• Blog migrating from Jasmine to Jest
• AVA: an alternative test runner

React

There are three ways to test React components:

ReactTestUtils: The most barebone API, the other 2 are built on top of this

• react-dom/test-utils
• react-test-renderer

react-testing-library:

What we will be using.

• Official Docs
• react-testing-library
• Jest Tutorial

Enzyme:

The React team no longer recommends the Enzyme library as their primary choice for React testing.

Wired Elements

This was a really bad idea.
But it looks pretty cool.

• Showcase: Use this as an entrypoint to their documentation (upper right icon)
• Github Repo
• Simple Sandbox example: really basic.
• Bug: some Wired components crash: Slider, IconButton, Fab, ...
• React Wrappers for Web Components
• React and Web Components

The DOM

• Chrome Extension
• DOM Queries: See 0.Enquete.test.tsc
• Fire Events: fireEvent.click()
• jest-dom: toBeInTheDocument etc
• shadow-dom-testing-library: An additional package because WebComponents...

Angular

Protracter is being deprecated?

• ReactiveForms testing
• Component testing
• Directive testing

https://testing-angular.com/