Enzyme: wrapper.instance() is always undefined

[brunolm]

Looking at the source (Shallow)

  instance() {
    if (this.root !== this) {
      throw new Error('ShallowWrapper::instance() can only be called on the root');
    }
    return this.renderer._instance ? this.renderer._instance._instance : null;
  }

For me this.renderer._instance is defined, however this.renderer._instance._instance is not.

I'm using it like this

  const mockStore = configureMockStore();
  const store = mockStore(initialState);

  wrapper = shallow(
    <Component store={ store } { ...props } />,
  );

  const connectWrapper = wrapper;

  // fix instance
  connectWrapper.instance = () => connectWrapper.renderer._instance;

  wrapper = wrapper.dive();

  // fix instance
  wrapper.instance = () => wrapper.renderer._instance;


  return {
    connectWrapper,
    wrapper,
  };

packages

    "enzyme": "^2.9.1",
    "react": "16.0.0-alpha.12",
    "react-native": "https://github.com/expo/react-native/archive/sdk-19.0.0.tar.gz",

[ljharb]

You're using react 16, which enzyme doesn't support yet. You'll see that npm ls exits unsuccessfully; when that happens, nothing can be expected to work.

Now that #1007 has landed, once v3 is released, you'll be able to use react 16; for now you have to stick to 15.

[archy-bold]

So I experienced this issue today after following the instructions here to install react-test-renderer and react-dom. Basically it got the latest version v15 releases and also upgraded react itself. Probably it makes sense to specify the version of those packages to install, which should match the react version.

ie

npm i --save-dev [email protected] [email protected]

[ljharb]

@archy-bold would you want to submit a PR improving the docs?

[archy-bold]

Actually, I just realised I followed the wrong instructions on the docs and they're already updated. I followed it from a link on this issue https://github.com/airbnb/enzyme/issues/875

[javidjamae]

If anybody else runs across this and wants to know how to get enzyme to work with React 16, read this:

http://airbnb.io/enzyme/docs/installation/react-16.html

[mateutek]

I have

"react": "16.2.0",
"react-dom": "16.2.0",
....
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "1.1.1",

In my test file i want to check componentWillReceiveProps() in which i change the state
this.setState({ notificationsList:nextProps.notificationsList });

In my test i want to check if component has one notification

const props:INotificationComponentProps = {
    removeNotification:removeNotification,
    notificationsList:[
      {
        message: 'Test Message',
        type: NotificationTypes.info,
        created_at: new Date(),
      },
    ],
  };

describe('Check if', () => {
    it('has one notification', async () => {
      const wrapper = shallow(<NotificationComponent {...props}/>);
      wrapper.setProps(props);
      await wrapper.instance().componentWillReceiveProps(props,{});
      expect(wrapper.find('.notification').length).toBe(1);
      wrapper.unmount();
    });
  });

but the wrapper.instance() throws TS2722

I used the async because of the setState()

[ljharb]

What is TS2722? Are you perhaps using TypeScript with incorrect types?

[mateutek]

TS2722 is typescript error that the instance() is probably undefined
Managed to fix this with
const instance = wrapper.instance() as NotificationComponent;