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

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

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',

End to end testing

Testing principles

What to test? Why test? Which type of test to write?

Test driven development

Testing React applications

Other materials about testing