https://github.com/commercetools/enzyme-extensions

🎩 Enzyme extensions to test shallowly rendered enzyme wrappers 🏄🏻
https://github.com/commercetools/enzyme-extensions

enzyme jest react testing

Last synced: about 1 month ago
JSON representation

🎩 Enzyme extensions to test shallowly rendered enzyme wrappers 🏄🏻

• Host: GitHub
• URL: https://github.com/commercetools/enzyme-extensions
• Owner: commercetools
• License: mit
• Created: 2018-05-16T14:21:47.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-07-11T00:08:53.000Z (almost 2 years ago)
• Last Synced: 2025-04-20T15:17:57.753Z (about 1 month ago)
• Topics: enzyme, jest, react, testing
• Language: JavaScript
• Homepage: https://medium.com/@dferber90/test-a-render-prop-6a44e02f4c39
• Size: 1.35 MB
• Stars: 30
• Watchers: 65
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

    

  

  @commercetools/enzyme-extensions



  





  

    

  

  

    

  

  

    

  

  

  



  Why should you use this? Read: 

    Test a Render Prop!

  





> **NOTE** This package used to provide a `renderProp` test helper, which [is now part of `enzyme` itself](https://github.com/airbnb/enzyme/blob/master/CHANGELOG.md#380) as of v3.8.0 🎈.

>

> We therefore dropped `renderProp` in v4.0.0 of this package. We recommend to use `renderProp` from enzyme itself instead.

>

> Be aware that [the API has changed](https://github.com/airbnb/enzyme/pull/1891#issue-228765309) while moving the function to enzyme.

>

> ```js

> // before

> wrapper.renderProp('foo', 10, 20);

> // after

> wrapper.renderProp('foo')(10, 20);

> ```

>

>  We are happy that our little helper has made it into `enzyme`.

## What assumptions is this built with?

- We _like to shallow render_ and avoid mounting

  - 🤺 Shallow rendering is fast and ensures that you only interact with the _unit under test_

  - 🏙 Shallow rendering ensures that you do _not snapshot past your test's concern_

  - 🏎 Shallow rendering has shown to be _more performant_ for us than mounting

- We like _declarative components_ and _Render Props_

  - 🧠 We can _compose components_ easily while following along their interactions

  - 🔪 We like _stubbing_ to test individual pieces of logic

## Installation

### 1. Add package

`yarn add @commercetools/enzyme-extensions -D`

### 2. Add a test setup file (test runner dependent)

For Jest you would set up a [`setupTestFrameworkScriptFile`](https://facebook.github.io/jest/docs/configuration.html#setuptestframeworkscriptfile-string).

Create that file and add it to the jest configuration.

### 3. Extend Enzyme with this package's helpers

In that `testFrameworkScriptFile` file, import the extensions and add them to Enzyme

```js

import Enzyme from 'enzyme';

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

import configure from '@commercetools/enzyme-extensions';

import ShallowWrapper from 'enzyme/ShallowWrapper';

// You likely had this part already

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

// This is the actual integration.

// Behind the scenes this extends the prototype of the passed in `ShallowWrapper`

configure(ShallowWrapper);

```

## Usage

Once set up, you can use the extension in your test files like this:

```js

import React from 'react';

import { shallow } from 'enzyme';

describe('when rendering ``', () => {

  const App = () => (

    


       (

          


            Cursor is at {x} {y}

          

        )}

      />

    

  );


  // Here we call the render function defined on Mouse and we provide

  // some custom arguments to it. This means we are effectively mocking

  // the Mouse component's implementation.

  // This is great to keep test concerns separate.

  const wrapper = shallow()

    .find(Mouse)

    // This is where we are actually using the drill function

    // Since we defined it on the prototype in the Installation step,

    // it does not need to be imported into the test itself.

    // We can call any property dynamically and even derive the property to

    // call depending on the props which are passed as the arguments of the

    // function passed to `drill`.

    .drill(props => props.render(10, 20));

  it('should render the mouse position', () => {

    expect(wrapper.equals(
Cursor is at 10 20
)).toBe(true);

  });

});

```


Enzyme's `renderProp` is built as an easy to use test helper for the most common cases.

In case you need more control, you can use `drill` instead. `drill` offers more flexibility as:

- the prop-to-call can be derived from the other props

- the returned element can be set dynamically

See the [`drill`](docs/drill.md) documentation for more.

## Documentation

- [`drill`](docs/drill.md)

- [`until`](docs/until.md)