# retap

> Wrapper around tape that adds functions for testing React components

Latest version **2.0.0** (published 2016-05-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install retap
pnpm add retap
yarn add retap
bun add retap
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2016-05-17 |
| First published | 2015-09-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | David Mason |
| Maintainers | davidmason |
| Keywords | test, tap, react, react-component |

## Links

- npm: https://www.npmjs.com/package/retap
- Repository: https://github.com/davidmason/retap
- Homepage: https://github.com/davidmason/retap#readme
- Issues: https://github.com/davidmason/retap/issues
- npm.io page: https://npm.io/package/retap

## Dependencies (6)

- [has](https://npm.io/package/has.md) ^1.0.1
- [tape](https://npm.io/package/tape.md) ^4.2.0
- [lodash](https://npm.io/package/lodash.md) ^3.10.1
- [defined](https://npm.io/package/defined.md) ^1.0.0
- [react-unit](https://npm.io/package/react-unit.md) ^1.0.6
- [find-filename](https://npm.io/package/find-filename.md) ^0.1.0

## 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

- 2.0.0 (latest) — 2016-05-17
- 1.8.1 — 2015-10-12
- 1.8.0 — 2015-10-12
- 1.7.0 — 2015-10-12
- 1.6.0 — 2015-10-07
- 1.5.1 — 2015-10-01
- 1.5.0 — 2015-10-01
- 1.4.0 — 2015-10-01
- 1.3.0 — 2015-10-01
- 1.2.0 — 2015-10-01
- 1.1.3 — 2015-10-01
- 1.1.2 — 2015-10-01
- 1.1.1 — 2015-09-30
- 1.1.0 — 2015-09-30
- 1.0.2 — 2015-09-30
- … 2 more at https://npm.io/package/retap/versions

## README

# retap

Wrapper around [tape](https://www.npmjs.com/package/tape) that adds
functions for testing React components.

## Installation

```
npm install retap --save-dev
```

## Overview

I wanted tests for generated markup that were thorough, and easy to read
and maintain. Use `t.isSameMarkup` to compare a JSX representation of
a component with a JSX representation of the elements you expect to see.

This module can return a
[react-unit](https://www.npmjs.com/package/react-unit) component from
 `t.createComponent`.

## Usage

### Running tests

Since your tests probably include JSX, they need to be transpiled. I use
[babel-tape-runner](https://www.npmjs.com/package/babel-tape-runner):

```
npm install -g babel-tape-runner
babel-tape-runner tests/**/*.jsx
```

That gives raw tap output. You can pipe it to
[faucet](https://www.npmjs.com/package/faucet) to make it easier to read.

```
npm install -g faucet
babel-tape-runner tests/**/*.jsx | faucet
```

Rather than global installs, you can install babel-tape-runner and faucet
as dev dependencies and run them with `npm test`:

```
// package.json
  ...
  "scripts": {
    "test": "babel-tape-runner tests/**/*.jsx | faucet"
  },
  "devDependencies": {
    "babel-tape-runner": "^1.2.0",
    "faucet": "0.0.1",
    "react": "^0.13.3"
  }
  ...
```

### Writing tests

Use it like *tape*, but now you can call `t.isSameMarkup()` with JSX to
compare. You don't have to use JSX - if you feel like using
`React.createElement()`, who am I to stop you?

```
import test from 'retap'
// needed for compiled JSX in expected
import React from 'react'
import DwarfPlanet from '../components/DwarfPlanet'

test('DwarfPlanet generates correct markup', t => {
  const actual = (
    <DwarfPlanet designation="134340 Pluto"
      className="plutoid trans-neptunian-object kuiper-belt-object"
      satellites={['Charon', 'Styx', 'Nix', 'Kerberos', 'Hydra']}/>
  )

  const expected = (
    <div className="dwarf-planet plutoid trans-neptunian-object kuiper-belt-object">
      <h2>134340 Pluto</h2>
      <h3>Satellites</h3>
      <ul>
        <li className="moon">Charon</li>
        <li className="moon">Styx</li>
        <li className="moon">Nix</li>
        <li className="moon">Kerberos</li>
        <li className="moon">Hydra</li>
      </ul>
    </div>
  )

  t.isSameMarkup(actual, expected)

  // it is easier to use t.end() rather than try to figure out how many
  // comparisons isSameMarkup will do to use t.plan()
  t.end()
})

```

You can get a *react-unit* component with `t.createComponent()` to
manually check props and other things (see
[react-unit](https://www.npmjs.com/package/react-unit)). The component
cannot be passed to isSameMarkup (I intend to fix that in future), so
keep the JSX return value if you want to use both approaches:

```
import test from 'retap'
// needed for compiled JSX
import React from 'react'
import DwarfPlanet from '../components/DwarfPlanet'

test('DwarfPlanet generates correct markup', t => {
  const actual = (
    <DwarfPlanet designation="1 Ceres"
      satellites={[]}/>
  )

  const actualComponent = t.createComponent(actual)

  const heading = actualComponent.findByQuery('h2')
  t.equal(heading.props.value, '1 Ceres', 'Should show designation in H2')

  t.isSameMarkup(actual, (
    <div className="dwarf-planet">
      <h2>1 Ceres</h2>
      No known satellites
    </div>
  ))

  // it is easier to use t.end() rather than try to figure out how many
  // comparisons isSameMarkup will do to use t.plan()
  t.end()
})
```


## API

### **`t.isSameMarkup(actual, expected)`**

Generate tap errors in the output for mismatches between *actual* and
*expected*. Not everything is checked, checks run are:

 - elements are of correct types and are in the same tree structure
 - classNames match (in any order)
 - styles match in any order
 - text content matches
 - title attribute matches
 - src matches (for <img> tags)
 - href matches (for <a> tags)
 - content set with dangerouslySetInnerHTML matches

*Note: `isSameMarkup` will perform numerous checks that each count as part
of the test plan, so take these into account if using `t.plan()`.

#### Params

Both must be React elements, which you can make with JSX or manually.

 - *actual* - the element under test, with test props
 - *expected* - the expected markup

e.g.

```
t.isSameMarkup(<MinorPlanet name="Eris"/>,
               <div className="minor-planet">Eris</div>)
```

### **`t.createComponent(jsx)`**

Create a react-unit component. Basically a shortcut to the react-unit
module. See [react-unit](https://www.npmjs.com/package/react-unit)

#### Params

 - *jsx* - React element, specified with JSX or manually.

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