flecks/website/docs/testing.mdx

---
title: Testing
description: Easily test your code across platforms.
---

# Testing

flecks uses Mocha and Chai to run your tests.

Let's create a small test application to illustrate how testing works in flecks:

```
npx @flecks/create-app testing
```

Move into your new project directory and create a fleck:

```
npx @flecks/create-fleck unit
```

You will notice a line in the output:

```
No fleck tests found.
```

flecks is trying to run the tests for the fleck, but none exist by default. Let's add some code
and then add some tests to verify that it works.

Edit `packages/unit/src/index.js` to add some code:

```javascript title="packages/unit/src/index.js"
export const add2 = (n) => n + 2;

export const add3 = (n) => n + 3;
```

Now create a `packages/unit/test` directory and add a source file `add2.js` inside:

```javascript title="packages/unit/test/add2.js"
import {expect} from 'chai';

const {add2} = require('@testing/unit');

it('can add two to a number', () => {
  // highlight-next-line
  expect(add2(2)).to.equal(5);
});
```

:::note

We intentionally made an error so we can see what a failed test looks like.

:::

Now run the following command **from within `packages/unit`**:

```bash
npm run test
```

You will see the following output:

```
  1) can add two to a number

  0 passing (11ms)
  1 failing

  1) can add two to a number:

      AssertionError: expected 4 to equal 5
      + expected - actual

      -4
      +5
```

It caught the error! Let's fix it up:

```javascript title="packages/unit/test/add2.js"
import {expect} from 'chai';

const {add2} = require('@testing/unit');

it('can add two to a number', () => {
  // highlight-next-line
  expect(add2(2)).to.equal(4);
});
```

and try again:

```bash
npm run test
```

```
  ✓ can add two to a number

  1 passing (4ms)
```

flecks also allows you to write tests that only target a specific platform. Let's add a webserver
and then write a test that only runs for the client:

:::warning

Make sure you run the following command in your **project directory**, not the `packages/unit`
directory.

:::

```bash
npx flecks add @flecks/web
```

Now, let's add a test. We add a client test by adding a `platforms/client` directory to our `test`
directory and putting tests there:

```javascript title="packages/unit/test/platforms/client/add3.js"
import {expect} from 'chai';

const {add3} = require('@testing/unit');

it('can add three to a number', () => {
  // highlight-next-line
  expect(add3(2)).to.equal(6);
});
```

:::note

We intentionally made a mistake again to show a test failure.

:::

Now start your application:

```bash
npm start
```

Visit your website in the browser and you will see:

![A screenshot of a browser showing the test runner page with our test failing](./flecks-test-client-failed.png)

The test is failing! That's what we expected.

Now, edit your client test to fix it:

```javascript title="packages/unit/test/platforms/client/add3.js"
import {expect} from 'chai';

const {add3} = require('@testing/unit');

it('can add three to a number', () => {
  // highlight-next-line
  expect(add3(2)).to.equal(5);
});
```

Save the file. If you still have your application running, go look at the page. You'll notice that
**it updated automatically** to look like:

![A screenshot of a browser showing the test runner page with our test passing](./flecks-test-client-passed.png)

Awesome, everything passes!

:::info[Sanity check]

If you run `npm run test` in your `packages/unit` directory, you will see that only one test was
run:

```
  ✓ can add two to a number

  1 passing (3ms)
```

That's correct; we only run client tests on the client.