@wojtekmaj/enzyme-adapter-react-17

What is @wojtekmaj/enzyme-adapter-react-17?

@wojtekmaj/enzyme-adapter-react-17 is an adapter for Enzyme that allows it to work with React 17. Enzyme is a JavaScript testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.

What are @wojtekmaj/enzyme-adapter-react-17's main functionalities?

Mounting Components

This feature allows you to mount a React component and inspect its output. The `mount` function renders the full DOM including child components, which is useful for testing component lifecycle and interactions.

const Enzyme = require('enzyme');
const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
const { mount } = Enzyme;
const React = require('react');
const MyComponent = require('./MyComponent');

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

const wrapper = mount(<MyComponent />);
console.log(wrapper.debug());

Shallow Rendering

Shallow rendering is useful for unit testing React components in isolation. The `shallow` function renders only the component itself without rendering its children, making it easier to test the component's behavior.

const Enzyme = require('enzyme');
const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
const { shallow } = Enzyme;
const React = require('react');
const MyComponent = require('./MyComponent');

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

const wrapper = shallow(<MyComponent />);
console.log(wrapper.debug());

Finding Elements

This feature allows you to find elements within a rendered component. The `find` function can be used to search for elements by tag, class, or other attributes, making it easier to test specific parts of the component.

const Enzyme = require('enzyme');
const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
const { shallow } = Enzyme;
const React = require('react');
const MyComponent = require('./MyComponent');

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

const wrapper = shallow(<MyComponent />);
const button = wrapper.find('button');
console.log(button.length);

Other packages similar to @wojtekmaj/enzyme-adapter-react-17

enzyme-adapter-react-16

This package is an adapter for Enzyme that allows it to work with React 16. It provides similar functionalities to @wojtekmaj/enzyme-adapter-react-17 but is specifically designed for React 16.

react-testing-library

React Testing Library is a lightweight solution for testing React components. It encourages testing practices that are more focused on user interactions rather than implementation details. Unlike Enzyme, it does not provide shallow rendering but focuses on testing components as a user would interact with them.

jest

Jest is a JavaScript testing framework maintained by Facebook. It works well with React and provides a complete testing solution including test runners, assertion libraries, and mocking capabilities. While Jest can be used with Enzyme, it also has its own utilities for rendering and testing React components.

README

@wojtekmaj/enzyme-adapter-react-17

Unofficial adapter for React 17 for Enzyme.

Installation

npm install --save-dev @wojtekmaj/enzyme-adapter-react-17

or, if you're using Yarn:

yarn add --dev @wojtekmaj/enzyme-adapter-react-17

Configuration

Finally, you need to configure enzyme to use the adapter you want it to use. To do this, you can use the top level configure(...) API.

import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

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