# hoc-enzyme

> Solving painful headless testing of React HOCs with enzyme

Latest version **0.0.11** (published 2016-12-17) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.11 |
| Published | 2016-12-17 |
| First published | 2016-12-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Igor Tkachenko |
| Maintainers | vashigor |
| Keywords | react-native, relay, enzyme, react, bdd, mocha |

## Links

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

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

- 0.0.11 (latest) — 2016-12-17
- 0.0.10 — 2016-12-14
- 0.0.9 — 2016-12-13
- 0.0.8 — 2016-12-13
- 0.0.7 — 2016-12-12
- 0.0.6 — 2016-12-11
- 0.0.5 — 2016-12-11
- 0.0.4 — 2016-12-11
- 0.0.3 — 2016-12-10
- 0.0.2 — 2016-12-09
- 0.0.1 — 2016-12-09

## README

# hoc-enzyme
Solving painful headless testing of Relay-produced HOCs

Install
-------

1. npm install -D hoc-enzyme enzyme
2. Edit your Mocha's setup.js
  1. import HOCEnzyme from 'hoc-enzyme'
  2. HOCEnzyme.setup()

Syntax
======
```javascript
wrapper.diveInto((child) => child.type() == Text)
```

With DOM rendering (mounted components)
=======================================
Usage with Redux && react-native-router-flux
--------------------------------------------
```javascript
describe('Sandboxed react-native-router-flux width redux', () => {
  let wrapper

  jsdom()

  before(() => {
    wrapper = mount(<RouterComponent />)
  })

  it.only('should switch between views', () => {
    let spy = sinon.spy(Actions, 'second')
    const TmpCom = wrapper.find(RouterWithRedux).diveInto(
      child => {
        return child.type() == Scene && child.__unwrapped.key == 'home'
      }
    ).prop('component')
    expect(store.getState()).to.have.deep.property('scene.sceneKey', 'home')
    mount(<TmpCom />).diveInto(
      child => child.type() == TouchableHighlight
    ).prop('onPress')()
    expect(store.getState()).to.have.deep.property('scene.sceneKey', 'second')
  })
})
```

Usage with Apollo
-----------------
```javascript
describe('Sandboxed react-native + apollo', () => {
  let wrapper

  jsdom()

  before(() => {
    wrapper = mount((
      <ApolloProvider client={client}>
        <SandboxComponent />
      </ApolloProvider>
    ))
  })

  it('should fetch data from apollo component', () => {
    const tmp = wrapper.find(SandboxComponent).diveInto((child) => {
      return child.type() == Text
    }, false)

    expect(tmp.first()).to.have.props({children: 'Hello world'})
  })
})
```

Usage with Relay
----------------
```javascript
describe('<Home/>', () => {
  let wrapper = null

  jsdom()

  const counter = (child, node, index) =>
    node.type() == View && child.type() == Text && index == 2

  const button = child => child.type() == TouchableHighlight

  before(done => {
    /**
     * Home is a wrapped with Renderer Relay Container
     * It renders the following jsx
     * <View>
     *   <TouchableHighlight ...>
     *     <Text>...</Text>
     *   </TouchableHighlight>
     *   <Text>...</Text>
     *   <Text>...</Text>
     * </View>
     */
    wrapper = mount(<Home />)
    done()
  })

  it('should render select text', done => {
    const view = wrapper.find(View)
    // Use predicate to find not presented children
    expect(view.diveInto(counter)).to.have.props({children: 0})

    view.diveInto(button).prop('onPress')()
    setTimeout(() => {
      expect(view.diveInto(counter)).to.have.props({children: 1})
      done()
    }, 10)
  })
})
```

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