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() });
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() });
Any documentation on what's the purpose of
adapter
inenzyme
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
.