Testing

General introduction to our testing methodologies.

As we are using React in our frontend development, we will be using Jest for testing the components. Jest is a Node-based runner. This means that the tests always run in a Node environment and not in a real browser. This lets us enable fast iteration speed and prevent flakiness.

Jest is intended to be used for unit tests of your logic and your components rather than the DOM quirks.

For End-to-End test we will have to use another framework yet to be decided.

Jest will look for test files with any of the following popular naming conventions:

• Files with .js suffix in tests folders.
• Files with .test.js suffix.
• Files with .spec.js suffix.

As mentioned in the "How to use" we will position our tests in the tests folders located next to the relevant component.

Tests for the API

Here are some general tips for testing an API

• Functionality testing — the API works and does exactly what it’s supposed to do.
• Reliability testing — the API can be consistently connected to and lead to consistent results
• Load testing — the API can handle a large amount of calls
• Creativity testing — the API can handle being used in different ways.
• Security testing — the API has defined security requirements including authentication, permissions and access controls. * See some API security tips for protecting vital data
• Proficiency testing — the API increases what developers are able to do.
• API documentation testing — also called discovery testing, the API documentation easily guides the user.
• Negative Testing — checking for every kind of wrong input the user can possibly supply

Here is a further explanation on the points mentioned above.

How do I run the tests?

Typing npm test will open up an interface for you in the command line. Here Jest will launch in Watch mode, first scanning for every test located in the repository.

By default, when you run npm test, Jest will only run the tests related to files changed since the last commit. This is an optimization designed to make your tests run fast regardless of how many tests you have. However it assumes that you don’t often commit the code that doesn’t pass the tests.

Coverage reporting:

Jest has an integrated coverage reporter that works well with ES6 and requires no configuration. Run npm test -- --coverage (note extra -- in the middle) to include a coverage report.

For writing specific tests for your React Component, please check out the links below:

A components contract

Understanding a component’s contract is the most important part of testing a React component. A contract defines the expected behavior of your component and what assumptions are reasonable to have about its usage. Without a clear contract, your component may be hard to understand. Writing tests is a great way to formally define your component’s contract.

Every React component has at least one thing that contributes to the definition of its contract:

• What it renders (which may be nothing)

Additionally, most component contracts are affected by these things as well:

• The props the component receives
• The state the component holds (if any)
• What the component does when the user interacts with it (via clicking, dragging, keyboard input, etc)

Some less common things that affect component contracts are:

• The context the component is rendered in
• What the component does when you call methods on its instance (public ref interface)
• Side effects that occur as part of the component lifecycle (componentDidMount, componentWillUnmount, etc)

To find your component’s contract, ask yourself questions like:

• What does my component render?
• Does my component render different things under different circumstances?
• When I pass a function as a prop, what does my component use it for? Does it call it, or just give it to another component? If it calls it, what does it call it with?
• When the user interacts with my component, what happens?

For writing specific tests for your React Component, please check out the links below:

https://facebook.github.io/jest/docs/en/expect.html#content https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests