https://github.com/jackall3n/enzyme-dive

Dive 🏊🏼‍♂️
https://github.com/jackall3n/enzyme-dive

dive enzyme react testing typescript

Last synced: 4 days ago
JSON representation

Dive 🏊🏼‍♂️

• Host: GitHub
• URL: https://github.com/jackall3n/enzyme-dive
• Owner: jackall3n
• Created: 2020-01-23T13:43:49.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T08:38:47.000Z (about 1 year ago)
• Last Synced: 2024-03-15T11:53:17.531Z (10 months ago)
• Topics: dive, enzyme, react, testing, typescript
• Language: TypeScript
• Size: 37.1 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
🏊🏼‍♂ Dive deep️

## Installation

#### 1. Add Package

```typescript

yarn add enzyme-dive --dev

```

#### 2. Extend Enzyme in your setup file

```typescript

import * as Enzyme from 'enzyme';

import Adapter from 'enzyme-adapter-react-xx';

import configure from "enzyme-dive";

Enzyme.configure({ adapter: new Adapter() });

// The magic 🧙🏼‍♂️

configure(Enzyme.ShallowWrapper);

```

## Usage

### diveTo(selector)

Use this to dive until you reach your component. This can be useful if you've got many HoC wrappers.

```typescript

import React from 'react';

import { shallow } from "enzyme";

import Component from './Component';

import ChildComponent from './ChildComponent';

describe('', function() {

  it("should render child", () => {

      const wrapper = shallow().diveTo(ChildComponent);

      expect(wrapper).toMatchSnapshot();

  });

});

```

---

### diveDeep(depth)

Dive through your nodes a specified amount 

```typescript

import React from 'react';

import { shallow } from "enzyme";

import Component from './Component';

describe('', function() {

  it("should render", () => {

      // const wrapper = shallow().dive().dive().dive().dive().dive();

      const wrapper = shallow().diveDeep(5);

      expect(wrapper).toMatchSnapshot();

  });

});

```