Unit tests, integrations tests, e2e tests and advanced testing concepts

What is out there in the world of testing. This article categorizes them briefly and introduces you to some advanced testing concepts you might not have yet heard about.

Different types of testing

Unit Testing

Check that a single function does what it should do.

e.g. mocha/chai or jest

Integration Testing

Render a certain part (e.g. component) of an app without many mocks to check that it does what it should do.

Mostly uses same technology as unit testing.

End-to-end (a.k.a e2e) testing - also called functional testing or acceptance testing

Simulates a real app user and runs that virtual user through the entire app experience.

I sometimes heard people to call integration test and end-to-end tests the same thing.

Manual testing

Click through it.

Links

• Categorization of different tests
• What are Unit Testing, Integration Testing and Functional Testing?

Advanced testing topics

Test coverage

Most often via code-coverage, e.g. via Jest

JSON schema validation

Use JSON Schema to e.g. validate incoming JSON form data with a library like https://github.com/tdegrunt/jsonschema or https://github.com/ajv-validator/ajv

For typescript generate a schema with one of the following tools:

• QuickType
• typescript-json-schema or

For JS create a JSON schema yourself or use one of these tools.

import { validate, ValidationError } from 'jsonschema';

const generatedJSONSchema = {
  type: 'object',
  properties: {
    id: { type: ['null', 'number'] },
    name: { type: ['null', 'string'] },
    description: { type: ['null', 'string'] },
    pictureFileName: { type: ['null', 'string'] },
    instituteName: { type: ['null', 'string'] },
    instituteLogoFileName: { type: ['null', 'string'] },
  },
  required: [
    'description',
    'id',
    'instituteLogoFileName',
    'instituteName',
    'name',
    'pictureFileName',
  ],
  $schema: 'http://json-schema.org/draft-04/schema#',
};

export const validateFeaturedAuthor = (obj: {}): ValidationError[] => {
  const { errors } = validate(obj, generatedJSONSchema);
  return errors;
};

// Usage
...
const errors = validateFeaturedAuthor(parsedJSONFile);

Property Based Testing

What is Property Based Testing?

Randomly generated test cases based on defined properties (like QuickCheck does for Haskell).

• fast-check is a property based testing framework for JavaScript/TypeScript.
• Hypothesis is also a big framework in the space of property based testing which has a bit of a different philosophy as compared to QuickCheck.

Snapshot testing

Test and update snapshots of components. See the docs

Test driven development (TDD)

[…] in TDD, the tests tell you

• what to do next
• what to do,
• how to do it
• what your design is
• how to structure your code
• when you are done.

Contrast to Type Driven Development (TDD)

However, “design with types first” doesn’t exactly mean what you think it means. The idea is that you use types to model your problem domain and let the types drive the design and development.

Both taken from here.

React Component TDD

Advantages

1. Reduced friction: Stay in editor (no need to constantly look at browser/app)
2. Confidence
3. Think of all edge-cases

See: https://www.jetbrains.com/webstorm/guide/tutorials/react_typescript_tdd/testing/