what is adapter in enzyme

Question

Any documentation on what's the purpose of adapter in enzyme testing library.

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

Sandpaper

npmjs.com/package/enzyme-adapter-react-16 – Lancer

I looked over there, all they mentioned was how to install and what version to be installed. – Sandpaper

Answer 1

Any documentation on what's the purpose of adapter in enzyme testing library.

The closest it gets is to say "You will need to install enzyme along with an Adapter corresponding to the version of react (or other UI Component library) you are using".

The docs mostly just explain how to configure an adapter and don't really talk about its purpose.

---

what is adapter in enzyme

---

Short version

The enzyme API is the same regardless of the version of React you are using, but how React renders and interacts with what is rendered changes depending on the React version.

The adapter abstracts away anything that changes based on the React version so the core enzyme code can stay the same.

---

Detailed version

mount and shallow are both exported from enzyme. Let's focus on mount.

mount is a function that just returns a new ReactWrapper.

ReactWrapper provides the familiar wrapper object with instance, setState, find, etc.

The implementation of all of those functions is the same regardless of which version of React you are using...

...but because React itself has changed over the years any implementation details that change based on the React version are abstracted away with an adapter.

The adapter is retrieved by calling getAdapter and the first time it is used is to validate the nodes passed to mount, and then to create the renderer to actually render the nodes.

For enzyme-adapter-react-16.3 that call to createRenderer gets routed to this.createMountRenderer and within createMountRenderer you can see the familiar ReactDOM.render call where what you passed is actually rendered using React v16 syntax.

---

Searching for getAdapter within ReactWrapper.js shows everywhere that the adapter is used to abstract away functionality that changes based on the React version while using mount...

...and searching for getAdapter within ShallowWrapper.js shows everywhere that adapter is used to abstract away functionality that changes based on the React version while using shallow.

Tarazi

Would it be valid to say that adapter here is like the 'driver softwares' that we install in Windows. Let's say if I have a new external device so my OS wouldn't know how to interact with that device unless proper drivers of that device are installed in the OS? Also could you please give a real time example of what would happen if enzyme adapter isn't present OR is outdated with respect to the corresponding version of it's UI library/framework? – Adventurous