How to find a nested connected component using enzyme mount?

Question

I have a React Login, connected component:

class Login extends React.Component<ComponentProps, ComponentState> {

  public constructor(props: ComponentProps) {
    super(props);

    this.state = {
      username: '',
      password: '',
    };
  }
  ...
}

export default connect(
  null,
  mapDispatchToProps,
)(withRouter(withStyles(styles)(Login)));

I would like to test that the state is populated properly as the user enters his credentials:

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { mount, ReactWrapper } from 'enzyme';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import { state } from 'tests/fixtures';
import Login, { ComponentState } from './Login';

const mockStore = configureStore();
const store = mockStore(state);

let wrapper: ReactWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;

beforeEach(() => {
  wrapper = mount(<Provider store={store}><Router><Login /></Router></Provider>);
});

it('should populate the state with credentials', () => {
  const loginInstance = wrapper.find('* > * > * > * > * > * > * > Login').instance();

  const inputUsername = wrapper.find('.testUsername input');
  inputUsername.simulate('change', { target: { value: 'someusername' } });
  expect((loginInstance.state as ComponentState).username).toEqual('someusername');

  const inputPassword = wrapper.find('.testPassword input');
  inputPassword.simulate('change', { target: { value: 'mySecretPassword' } });
  expect((loginInstance.state as ComponentState).password).toEqual('mySecretPassword');
});

wrapper.debug() looks as follow:

<Provider store={{...}}>
  <BrowserRouter>
    <Router history={{...}}>
      <ConnectFunction>
        <withRouter(WithStyles(Login)) dispatchLogin={[Function: dispatchLogin]}>
          <Route>
            <WithStyles(Login) dispatchLogin={[Function: dispatchLogin]} history={{...}} location={{...}} match={{...}} staticContext={[undefined]}>
              <Login...

The tests are passing, but I would like to improve my component finding method. I tried wrapper.find(Login) as shown on the enzyme doc, but the Component is not found. The only way it can be found is doing it as shown above. https://airbnb.io/enzyme/docs/api/ReactWrapper/find.html

How can I find connected components with enzyme mount?

if you only want to test the state of the Login component, why don't you export the Login component (with named export) : export class Login extends React and test it outside of react-redux, react-router etc.. You just need to import {Login} from './Login'; in your test — Olivier Boissé
I did that for some other tests. In this case I'm manipulating text fields (Material UI components) and need to have them rendered. That wouldn't work with a shallow wrapper, any tip? Thanks! — Vincent Peres

Vincent Peres Vincent Peres · Accepted Answer · 2019-05-09T08:37:55

'Login' was my connected component but it should be your component (not connected), as in:

export class Login extends React.Component<ComponentProps, ComponentState> {
  ...
}

So your tests will look like:

// Import the connected components (to mount) and the component
import ConnectedLogin, { Login } from './Login';

// Wrap the connected component
const wrapper = mount(<Provider store={store}><Router><ConnectedLogin /></Router></Provider>);

// Find the component that is NOT connected
const loginInstance = wrapper.find(Login).instance();

How to find a nested connected component using enzyme mount?

1 Answers