Menu
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() });
732
The adapter abstracts away anything that changes based on the React version so the core enzyme code can stay the same. mount and shallow are both exported from enzyme .
To configure an adapter, you should call `Enzyme. configure({ adapter: new Adapter() })` before using any of Enzyme's top level APIs, where `Adapter` is the adapter corresponding to the library currently being tested. For example: import Adapter from 'enzyme-adapter-react-16';
An adapter is essentially just a translation layer that connects two different interfaces together. The interfaces we are connecting in this situation are: The data model required by our React components. The data model defined by our APIs.
When using Enzyme, component instances are called 'Wrappers', and can be created in two main ways, shallow and mount. The primary difference between these two ways of rendering a wrapper is that a mount will also render any sub components of the top level component, whereas the shallow render will not.
Any documentation on what's the purpose of
adapterinenzymetesting 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.
143
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
