# Tests
import LiveCodes from '../../src/components/LiveCodes.tsx';
## Overview
Automated tests can be added for projects. The tests are run in the context of the result web page.
The automated tests are run by the Jest testing framework, which runs totally in the browser. In addition, other [testing libraries](#supported-testing-libraries) are also supported.
Screenshots:
## Use Cases
- Automated tests increase the confidence in the code and can improve the quality of projects.
- Allows Test-driven development (TDD).
- Can be used for education and training by preparing projects with tests that are required to pass by the students' implementation (similar to freeCodeCamp).
- Can be used by wesites that offer coding challenges (similar to Codewars).
## Demos
Demo: (template=jest)
Demo: (template=jest-react)
## Tests Panel
The "Tests" panel is located in the "[Tools pane](./tools-pane.html.md)" below the result page.
In the tests panel, you can find:
- "Run" button: To run tests (keyboard shortcut: Ctrl/Cmd + Alt + t).
- "Watch" button toggle: To watch the project and re-run tests automatically when code changes.
- "Reset" button: Resets test results.
- "Edit" button: Opens a code editor to edit tests (not in embeds).
- Test results.
:::info Note
Please note that the tests panel are hidden by default in [embedded playgrounds](./embeds.html.md) unless the [project has tests](../configuration/configuration-object.html.md)#tests). In such case, the panel is added to the [tools pane](./tools-pane.html.md). However, the test editor is not shown.
The [SDK](../sdk/index.html.md) can control the visibility of the different tools in the tools pane (see [`tools`](../configuration/configuration-object.html.md)#tools) property of the [configuration object](../configuration/configuration-object.html.md)).
The tests panel and the test editor are always shown in the [full standalone app](../getting-started.html.md)#standalone-app).
:::
## Supported Languages
The testing code can be written using JavaScript, TypeScript, JSX or TSX.
However, since the tests run against the result web page, they can test projects that use any language/framework.
This is [a demo](https://livecodes.io/?x=id/xyi6usem2sf&tests) for running tests against a Ruby project.
Languages may have test modules. This is [an example](https://livecodes.io/?x=id/665ar3bpqka&console=full) of running [Python doctest](https://docs.python.org/3/library/doctest.html) tests:
## Importing Code
Functions, objects or values can be exported from the `script` code like a regular ES module.
These can then be imported in the test code for usage. This is only available for code in the `script` editor. The testing code also have access to global objects like `window`.
Example:
```js
// in the script editor
export default function greet() {
return 'Hello, World!';
}
export const add = (x, y) => x + y;
window.multiply = (x, y) => x * y;
```
```js
// in the test editor
import greet, { add } from './script'; // relative import without extension
describe('test imported', () => {
test('greet', () => {
expect(greet()).toBe('Hello, World!');
});
test('add', () => {
expect(add(1, 2)).toBe(3);
});
});
describe('test global', () => {
test('multiply', () => {
expect(window.multiply(2, 3)).toBe(6);
});
});
```
## Supported Jest features
- [Jest globals](https://jestjs.io/docs/api): `expect`, `test`, `xtest`, `it`, `fit`, `xit`, `describe`, `fdescribe`, `xdescribe`, `beforeAll`, `afterAll`, `beforeEach`, `afterEach`
- Jest function mocks: `jest.fn`, `jest.mocked`, `jest.replaceProperty`, `jest.spyOn`
These can be directly used in the test editor, without the need for any imports.
Autocomplete is available in Monaco editor for Jest API.
## Supported testing libraries
In addition to Jest, you may wish to use other supported testing libraries. These have to be explicitly imported to the testing code.
### Testing library
Simple and complete testing utilities that encourage good testing practices.
- DOM Testing Library
```js
import {
getByLabelText,
getByText,
getByTestId,
queryByTestId,
waitFor,
} from '@testing-library/dom';
```
- React Testing Library
```js
import { render, fireEvent, waitFor, screen } from '@testing-library/react';
```
- jest-dom
```js
import '@testing-library/jest-dom';
```
- user-event
```js
import userEvent from '@testing-library/user-event';
```
### Chai
Jest assertions can be used in the tests. However, if you prefer Chai, it can be easily used.
Autocomplete is also available in Monaco editor for Chai API.
```js
import { assert } from 'chai';
```
## Examples
Usage examples are provided in the starter templates (Jest Starter and Jest/React Starter).
:::caution
The test code is added to the result page and runs in its context. Please note that script errors (e.g. import or syntax errors) may prevent the tests from loading.
:::
## SDK
The [SDK](../sdk/index.html.md) allows [running tests](../sdk/js-ts.html.md)#runtests) and collecting results.