@cfaester/enzyme-adapter-react-18

What is @cfaester/enzyme-adapter-react-18?

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

What are @cfaester/enzyme-adapter-react-18's main functionalities?

Mounting Components

This feature allows you to mount a React component and inspect its rendered HTML. The `mount` function fully renders the component into the DOM.

const Enzyme = require('enzyme');
const Adapter = require('@cfaester/enzyme-adapter-react-18');
Enzyme.configure({ adapter: new Adapter() });

const React = require('react');
const { mount } = require('enzyme');

function MyComponent() {
  return <div>Hello, World!</div>;
}

const wrapper = mount(<MyComponent />);
console.log(wrapper.html()); // <div>Hello, World!</div>

Shallow Rendering

This feature allows you to shallow render a React component, which means only the component itself is rendered, not its children. This is useful for unit testing.

const Enzyme = require('enzyme');
const Adapter = require('@cfaester/enzyme-adapter-react-18');
Enzyme.configure({ adapter: new Adapter() });

const React = require('react');
const { shallow } = require('enzyme');

function MyComponent() {
  return <div>Hello, World!</div>;
}

const wrapper = shallow(<MyComponent />);
console.log(wrapper.html()); // <div>Hello, World!</div>

Finding Elements

This feature allows you to find elements within a mounted or shallow-rendered component. You can use CSS selectors to locate elements and then inspect or interact with them.

const Enzyme = require('enzyme');
const Adapter = require('@cfaester/enzyme-adapter-react-18');
Enzyme.configure({ adapter: new Adapter() });

const React = require('react');
const { mount } = require('enzyme');

function MyComponent() {
  return (
    <div>
      <span className="greeting">Hello, World!</span>
    </div>
  );
}

const wrapper = mount(<MyComponent />);
const span = wrapper.find('.greeting');
console.log(span.text()); // Hello, World!

Other packages similar to @cfaester/enzyme-adapter-react-18

react-testing-library

React Testing Library is a lightweight solution for testing React components. It provides utilities to query the DOM in the same way the user would. Unlike Enzyme, which allows for shallow rendering and direct manipulation of component instances, React Testing Library encourages testing from the user's perspective.

jest

Jest is a JavaScript testing framework maintained by Facebook. It works well with React and includes features like snapshot testing, which can be used to test the rendered output of React components. While Jest does not provide the same component manipulation capabilities as Enzyme, it is often used in conjunction with React Testing Library for a more user-centric testing approach.

README

@cfaester/enzyme-adapter-react-18

A very unofficial adapter for React 18 for Enzyme.

Should you count on it? Probably not. Can you use it as a reference for your own work? Perhaps.

Installation

npm install --save-dev @cfaester/enzyme-adapter-react-18

Configuration

You need to add it to Enzyme configuration. This is actually pretty easy. Just import it.

import Enzyme from 'enzyme';
import Adapter from '@cfaester/enzyme-adapter-react-18';

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

I have personally had a few issues with tests using simulate on a mounted component. Specifically when using form libraries. To alleviate this, wrap your simulate calls in act(), like so:

await act(() => {
	mountWrapper.find('form').simulate('submit');
});

Motivation and thanks

This is not the best code I've ever written, but sometimes ripping out 900 tests, or going through hoops by running some tests under React 17 (can you really trust that anyway?), is just not feasible if you want the cool suspense features in, or dependencies depending on React 18.

This package can serve as a halfway stop towards migrating your tests to a newer framework like @testing-library/react, or to keep some of your shallow tests working.

I don't have much plan of spending a lot of time maintaining this package. But after some deliberation, I'd rather open source it, than sit on it. If nothing else, it can serve as a reference point for your own implementation.

This couldn't be possible without the work of wojtekmaj, and his React 17 adapter. I think you should consider sponsoring him for his other projects as well.