Enzyme Testing Utility Deployment and Usage Guide

Prerequisites

Before getting started with Enzyme, ensure you have the following installed:

Node.js (version 8.0 or higher)
npm (version 5.2 or higher)
React (version compatible with your chosen Enzyme adapter)
A test runner of your choice (Mocha, Jest, Jasmine, etc.)

Installation

1. Install Enzyme and the appropriate adapter

Enzyme requires an adapter that corresponds to the version of React you're using. Choose the correct adapter based on your React version:

# For React 16.4.0 and above
npm install --save-dev enzyme enzyme-adapter-react-16

# For React 16.3.x
npm install --save-dev enzyme enzyme-adapter-react-16.3

# For React 16.2
npm install --save-dev enzyme enzyme-adapter-react-16.2

# For React 16.0-16.1
npm install --save-dev enzyme enzyme-adapter-react-16.1

# For React 15.x
npm install --save-dev enzyme enzyme-adapter-react-15

# For React 15.4.x
npm install --save-dev enzyme enzyme-adapter-react-15.4

# For React 14.x
npm install --save-dev enzyme enzyme-adapter-react-14

# For React 13.x
npm install --save-dev enzyme enzyme-adapter-react-13

2. Configure Enzyme to use the adapter

Create a setup file (e.g., src/setupTests.js or tests/setup.js) and configure Enzyme:

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16'; // Use your specific adapter

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

3. Install optional assertion libraries (recommended)

For enhanced testing experience, consider installing these libraries:

# For Jest
npm install --save-dev jest-enzyme

# For Chai
npm install --save-dev chai-enzyme

# For Jasmine
npm install --save-dev jasmine-enzyme

# For should.js
npm install --save-dev should-enzyme

# For expect
npm install --save-dev expect-enzyme

Configuration

Environment Setup

No specific environment variables are required for Enzyme itself. However, you may need to configure your test runner:

For Jest

Add to your package.json:

{
  "jest": {
    "setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"]
  }
}

For Mocha

Create a test script in package.json:

{
  "scripts": {
    "test": "mocha --require @babel/register --require ./src/setupTests.js"
  }
}

Build & Run

Running Tests

Enzyme works with any test runner. Here are common commands:

# Using Jest
npm test

# Using Mocha
npm run test

# Using Jasmine
jasmine

Basic Test Structure

import React from 'react';
import { shallow, mount, render } from 'enzyme';
import { expect } from 'chai';

describe('<MyComponent />', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper).to.have.lengthOf(1);
  });
});

Deployment

Enzyme is a testing utility and doesn't require deployment. However, ensure your test configuration is included in your CI/CD pipeline:

CI/CD Integration

GitHub Actions

name: Test
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
      - run: npm ci
      - run: npm test

Travis CI

language: node_js
node_js:
  - "14"
script:
  - npm test

Troubleshooting

Common Issues and Solutions

1. Adapter not configured

Error: Uncaught Error: Enzyme requires an adapter to be configured

Solution: Ensure you've configured Enzyme in your setup file:

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });

2. Missing peer dependencies

Error: Error: Enzyme Adapter requires React peer dependency

Solution: Install the required peer dependencies:

npm install react react-dom

3. Version compatibility issues

Error: Warning: React version mismatch

Solution: Ensure your adapter version matches your React version. Refer to the compatibility table in the README.

4. Shallow rendering not working with hooks

Issue: Hooks don't work with shallow rendering

Solution: Use mount() instead of shallow() when testing components with hooks:

const wrapper = mount(<ComponentWithHooks />);

5. Testing React 18 with Enzyme

Issue: Enzyme has limited support for React 18

Solution: Use the latest enzyme-adapter-react-16 and ensure you're using React 18.0.0 or higher. Consider using React Testing Library as an alternative for React 18 testing.

6. Simulate events not working

Issue: simulate() doesn't trigger event handlers

Solution: Ensure you're using the correct event names and that your component properly handles the events. Check the adapter documentation for event mapping.

7. Context not being passed correctly

Issue: Context values are undefined in tests

Solution: Use mount() for context testing or provide context manually:

const wrapper = mount(<Component />, {
  context: { someContext: 'value' }
});

Additional Resources

Enzyme Migration Guide
Official Documentation
GitHub Issues for reporting bugs
Gitter Chat for community support

How to Deploy & Use airbnb/enzyme