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.
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.
Related
What is the difference between Enzyme and React Testing Library and which one should I use for testing in React project?
Enzyme: https://www.npmjs.com/package/enzyme
React Testing Library: https://www.npmjs.com/package/#testing-library/react
In Enzyme, we test the component using the state and props of the component. This generally means that the tests are brittle. Let's say we have already written tests for a component and it is running fine. But what if someone changes the variable name of a state or props in the component, then even if the functionality of the component hasn't changed, our test fails. This kind of behavior demonstrates the brittleness of the test.
Whereas in React Testing Library, we test the component from the user's perspective. Let's say we want to test a drop-down component, we won't test the component according to its state and props. Instead, we use the DOM elements to test it, just how the user interacts with it.
The primary purpose of React Testing Library is to increase confidence in your tests by testing your components in the way a user would use them. Users don't care what happens behind the scenes, they just see and interact with the output. Instead of accessing the components' internal APIs or evaluating their state, you'll get more confidence by writing your tests based on the component output.
At some point, React Testing Library became more widely used than Enzyme.
When I inspect component structure in React dev tools, I can see that there is a forwardRef mark. I am perplexed because there is no sign of it being used in the source code. How is it that it is there and how can I use it?
The forwardRef calls aren't in your own code, they are in the packages that you are using.
styled.button appears to be from styled-components. This package uses forwardRef to forward any ref that you set on your styled button component to the underlying button component. You can see it in their source code right here:
WrappedStyledComponent = ((React.forwardRef(forwardRef): any): IStyledComponent);
Usage of forwardRef began with styled-components v4 -- see step #2 on this migration guide:
Make sure your application is using react >= 16.3; internally we are using the new React.forwardRef API and new context APIs if you wish to try and polyfill for older React version support
It is also explained on this Tips and Tricks page:
Refs to DOM nodes
styled-components makes use of the new React 16.3 API forwardRef. Thus, set refs like you would on any other component and they will automatically resolve to the underlying DOM element or wrapped component class instance.
I'm trying to create a Chrome Extension that changes the way a React app behaves. I want to patch a render function of a specific Component.
I thought that the best way would be to Patch the createElement function of React, and once I detect that the component that I want to change is being created, I will patch its render function with my own rendering.
The problem is that this application was built using webpack, and I don't have access to its React instance...
How can I get the React instance?
Thanks!
I have been using enzyme and love it a lot. It works with react 16 until I wanted to test my new project that uses react’s new context api.
If I render only my basic component using shallow and console log the debug of the component I can see its content but when I use the new context api with provider and consumer, I get <undefined /> as a render out. Enzyme does not render the component but react does.
Can someone please provide some guidance.
Thank you.
Support for this and other React 16.3 features are going to be included in the next enzyme release which is going to happen in midst summer, this year (as said here).
For now, here's a workaround:
const outer = shallow(<SimpleComp />);
const Children = outer.props().children({ /* context */ });
const wrapper = shallow(Children);
To use mount() with new Context API use this enzyme patch.
I'm pretty new to React Native and Javascript, I'm currently trying to test methods inside my components, I've seen this being done with Enzyme like
const wrapper = shallow(<Component/>);
wrapper.instance().methodIwannaCall();
Coming from the iOS Dev world, I'm having a hard to understanding why it seems to be so complicated to get an instance of a class and call a method on it.
Unfortunately I'm using React 16.0.0-alpha.12 which means I can't for now use Enzyme, which seems to be the library everyone is using to accomplish what I need.
Also notice I'm not using Redux, I suspect this would be less of a pain if I'd use Redux, since that way all my business logic would be within actions and hence would be easier to test.
Any comments/help are greatly appreciated.
Cheers
You can use pure ReactTestUtils to get instance of your component, for example using renderIntoDocument method:
import ReactTestUtils from 'react-dom/test-utils';
const wrapper = ReactTestUtils.renderIntoDocument(<Component/>);
wrapper.methodIwannaCall();