# dce-enzyme

> React component unit testing package that wraps Enzyme.

Latest version **1.0.19** (published 2021-01-29) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install dce-enzyme
pnpm add dce-enzyme
yarn add dce-enzyme
bun add dce-enzyme
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.19 |
| Published | 2021-01-29 |
| First published | 2019-07-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 8.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Gabriel Abrams |
| Maintainers | gabeabrams |
| Keywords | DCE, Harvard, Enzyme, React, Testing |

## Links

- npm: https://www.npmjs.com/package/dce-enzyme
- Repository: https://github.com/harvard-edtech/dce-enzyme
- Homepage: https://github.com/harvard-edtech/dce-enzyme#readme
- Issues: https://github.com/harvard-edtech/dce-enzyme/issues
- npm.io page: https://npm.io/package/dce-enzyme

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^16.12.0
- [enzyme](https://npm.io/package/enzyme.md) ^3.10.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.12.0
- [enzyme-adapter-react-16](https://npm.io/package/enzyme-adapter-react-16.md) ^1.15.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.19 (latest) — 2021-01-29
- 1.0.18 — 2021-01-29
- 1.0.17 — 2021-01-29
- 1.0.16 — 2021-01-29
- 1.0.15 — 2021-01-29
- 1.0.14 — 2019-12-03
- 1.0.13 — 2019-11-22
- 1.0.12 — 2019-10-30
- 1.0.11 — 2019-10-29
- 1.0.10 — 2019-10-28
- 1.0.9 — 2019-10-28
- 1.0.8 — 2019-10-28
- 1.0.7 — 2019-10-28
- 1.0.6 — 2019-10-18
- 1.0.5 — 2019-08-21
- … 5 more at https://npm.io/package/dce-enzyme/versions

## README

# dce-enzyme
React component unit testing package that wraps Enzyme.

## Writing a Test

### Import dependencies at top of test

```js
import React from 'react';
import Driver from 'dce-enzyme';
```

### Write your test

Initialize the driver with the component to test then use driver functions (see the full list below) to write your test

```js
...
import OkayButton from './OkayButton';

describe('OkayButton', () => {
  it('Handles a Click', async () => {
    // Keep track of button clicks
    let clicked = false;

    // Initialize the driver
    const driver = new Driver(
      <OkayButton
        title="I am Done"
        color="blue"
        onClick={() => { clicked = true; }}
      />
    );

    // Simulate a click
    await driver.click('button');

    // Make sure the button was clicked
    assert(clicked, 'The button did not call onClick');
  });
});
```

## Driver functions

_Note:_ wherever you see "selector," this can be a CSS selector, React component constructor, React component display name, object property selector, or any other [valid enzyme selector](https://airbnb.io/enzyme/docs/api/selector.html).

#### click(selector) – clicks the given element

Example:

```js
driver.click('#close-button');
```

#### focus(selector) - focuses the given element

Example:

```js
driver.click('#selectable-element');
```

#### toggleCheckbox(selector) - simulates someone toggling a checkbox

Example:

```js
driver.toggleCheckbox('#agree');
```

#### typeInto(selector, text) – types the given text into the element

Example:

```js
await driver.typeInto('#email-field', 'example@harvard.edu');
```

#### getAttributes(selector) – returns an object holding all the attributes of the element

Example:

```js
const att = driver.getAttributes('#email-field');
const email = att.value;

assert(email.includes('@'), 'Email does not include "@"');
```

#### getHTML(selector) – returns the HTML representation of the element

Example:

```js
const html = driver.getHTML('#okay-button');

assert(html.includes('some-html-content'));
```

#### elementExists(selector) – returns true if the given element exists

Example:

```js
assert(driver.elementExists('#submit'), 'Submit button absent');
```

#### getText(selector) – returns the text inside an element

Example:

```js
assert.equal(
  driver.getText('span'),
  'About Me',
  'Span text was incorrect'
);
```

#### getState() – returns the state of the root-level component

Example:

```js
const state = driver.getState();

assert.equal(
  state.numClicks,
  10,
  'The number of clicks in the state is wrong!'
);
```

#### waitForElementToExist(selector, [timeoutSecs = 2]) – waits for an element to exist

Waits until the element exists.

#### waitForStatePropToEqual(prop, value, [timeoutSecs = 2]) – waits for a property of the root-level component's state to equal the given value

Arguments:

- prop – the state property to check
- value – wait for the prop to equal this value
- timeoutSecs – the number of seconds to wait until throwing a timeout error

Example:

```js
// Wait up to 1min for the component to load
await driver.waitForStatePropToEqual('status', 'loaded', 60);
```

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