Testing materials

Last updated ago - September 3, 2023

Testing introduction

Why testing is important

Catch bugs before they appear in production
Testing forces you to write cleaner code, because clean code is easier to test
Increase confidence in application (making sure your changes are not breaking code in other places)
Testing can serve as documentation
Speeding up QA time
In a very large codebase you cannot predict or test manually if your change in code will break something, automated testing helps with checking if your changes are valid

Video explanation

Structure of a test, the AAA pattern

Arrange - set up the test data, test conditions, and test environment
Act - run logic that should be tested (eg. execute function), click a button
Assert - compare the expected result with the actual result

Types of tests

Unit tests - testing an isolated function
Integration tests - testing a component that uses other components, testing things working together
End to end tests - testing user interaction with UI

What to test and not to test?

Don’t test

External libraries
External API’s
Your backend code when testing frontend code
Above can be summarized with: don’t test code you have no possibility of fixing

You should test

Code that you have written in current project
Only one thing or feature per test example: input validation

How to pick elements to test

Test element selectors from best to worst, you want to test your application in a way the user is interacting with it (this is approach presented by React Testing Library authors).

Accessible by Everyone
- getByRole
- getByLabelText
- getByPlaceholderText
- getByText
Accessible by Screen readers
- getByAltText
- getByTitle
Last resort methods (if it’s not possible to use other means) = getByTestId

On the other hand, authors of Cypress library encourage the use of as many test id selectors as possible.

Free testing courses

Free Polish testing courses

Frontlive - Jest & React Testing Library: seria kursów na blogu

Paid testing courses

More about testing

Jest JavaScript Testing Framework

Vitest an alternative to Jest

Why choose Vitest

built in typescript support
chai and jest compatible assertions
works out of the box with super fast build tool: Vite

Vitest materials

Vitest docs
thisdot.co - Testing with Vitest by Ignacio Falk
Protip: You can use Vitest like Jest, just some minor adjustments are needed for it to work. You can watch Jest tutorials to learn Vitest

Import modules for testing as globals in config

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
	plugins: [svelte({ hot: !process.env.VITEST })],
	test: {
		globals: true,
		environment: 'jsdom',
	},
})