# mithril-jest

> Lets Mithril work with Jest

Latest version **1.0.3** (published 2019-01-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install mithril-jest
pnpm add mithril-jest
yarn add mithril-jest
bun add mithril-jest
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2019-01-26 |
| First published | 2016-12-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 7.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Arthur Clemens |
| Maintainers | arthurclemens |
| Keywords | mithril, jest, testing |

## Links

- npm: https://www.npmjs.com/package/mithril-jest
- Repository: https://github.com/ArthurClemens/mithril-jest
- Homepage: https://github.com/ArthurClemens/mithril-jest#readme
- Issues: https://github.com/ArthurClemens/mithril-jest/issues
- npm.io page: https://npm.io/package/mithril-jest

## Dependencies (3)

- [jest](https://npm.io/package/jest.md) ^24.0.0
- [jest-cli](https://npm.io/package/jest-cli.md) ^24.0.0
- [tidy-html5](https://npm.io/package/tidy-html5.md) ^0.1.1

## Alternatives

- [duck](https://npm.io/package/duck.md) — 4.2M weekly downloads
- [ava](https://npm.io/package/ava.md) — 560.2K weekly downloads
- [storybook-addon-module-mock](https://npm.io/package/storybook-addon-module-mock.md) — 71.7K weekly downloads
- [vest](https://npm.io/package/vest.md) — 50.1K weekly downloads
- [@ethereum-waffle/mock-contract](https://npm.io/package/@ethereum-waffle/mock-contract.md) — 40.0K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2019-01-26
- 1.0.2 — 2018-12-18
- 1.0.1 — 2018-10-19
- 1.0.0 — 2018-03-21
- 0.1.7 — 2017-01-20
- 0.1.6 — 2016-12-29
- 0.1.5 — 2016-12-28
- 0.1.4 — 2016-12-23
- 0.1.3 — 2016-12-23
- 0.1.2 — 2016-12-23
- 0.1.1 — 2016-12-23
- 0.1.0 — 2016-12-20

## README

# mithril-jest

Lets [Mithril](https://github.com/lhorie/mithril.js) work with [Jest](https://github.com/facebook/jest).


## Rationale

Jest creates textual snapshots of components to make it easy to spot changes. Differences in rendered HTML are printed to the console as diffs, making it easy to accept or reject the new snapshot; see [Jest's snapshot release blog post](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html).

<img src="http://arthurclemens.github.io/assets/mithril-tidy/jest-run.png" width="691" height="548" />

`mithril-jest` installs Jest (which installs Jasmine), so you can use the regular functions `describe`, `expect`, `toMatchSnapshot` and so on.

To get snapshot-ready HTML from Mithril templates, use function `tidy` (see below).



## Installation

```
npm install --save-dev mithril-jest
```

You may need to install command line library `tidy-html5` too (on a Mac: `brew install tidy-html5`).



## Tests setup

A typical Jest setup is to have a `spec` file for each page or component - for component `component.js` you'll have test file `component.spec.js`. Jest's convention is to put these test files inside directory `__tests__/`, but there is no specific need to do this; any directory (for example the conventional `test`) will work.

If your tests live in directory `test`, add to `package.json` to the "scripts" entry:

```json
"test": "jest test/**"
```

Then run:

```
npm run test
```

For interactive mode, run:

```
npm test --watch
```



## API

### tidy

Renders a Mithril template to (tidy) HTML so it can be used to call Jest's `toMatchSnapshot`. This function:
  1. Renders a template to HTML
  2. Formats the HTML so it becomes multi line and indented


#### Example

```javascript
import m from "mithril";
import { tidy } from "mithril-jest";

const Page = {
  view: () =>
    m("div", [
      m("h1", "Page"),
      m("a", {
        href: "/home"
      }, "Back")
    ])
};

describe("Page component", () => {
  it("should have a title", () => {
    const cmp = m(Page);
    const html = tidy(cmp);
    expect(html).toMatchSnapshot();
  });
});
```
This generates a new (or diffs an existing) snapshot.


The rendered HTML can also be used to inspect:

```javascript
describe("Page component", () => {
  it("title should be h1 with label 'Page'", () => {
    const cmp = m(Page);
    const html = tidy(cmp);
    expect(html).toContain("Page");
  });
});
```


#### Signature

`tidy(vnodes, htmlTidyOptions) => String`

Argument                  | Type                      | Required | Description
------------------------- | ------------------------- | -------- | ---
`vnodes`                  | Mithril element           | Yes      | The vnodes to be rendered.
`htmlTidyOptions`         | Object                    | No       | Overrides the default HTML Tidy [configuration options](http://api.html-tidy.org/tidy/tidylib_api_5.2.0/tidy_config.html#config_options).
**Returns**               | String                    |          | Rendered and tidied HTML String.



### Dependencies

* [Mithril](https://mithril.js.org)
* [Jest](https://facebook.github.io/jest/)
* [tidy-html5](https://github.com/htacg/tidy-html5)


### Licence

MIT

---
_Source: https://npm.io/package/mithril-jest · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._