Как найти вложенный подключенный компонент, используя ферментное крепление?

Question

У меня есть React Login, подключенный компонент:

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)));

Я хотел бы проверить, правильно ли заполнено состояние, когда пользователь вводит свои учетные данные:

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 () выглядит следующим образом:

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

Тесты проходят, но я хотел бы улучшить метод поиска компонентов. Я пробовал wrapper.find (логин), как показано на энзимном документе, но компонент не найден. Единственный способ найти это - сделать это, как показано выше. https://airbnb.io/enzyme/docs/api/ReactWrapper/find.html

Как найти подключенные компоненты с помощью ферментного крепления?

Answer 1

'Логин' был моим подключенным компонентом, но это должен быть ваш компонент (не подключен), как в:

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

Таким образом, ваши тесты будут выглядеть так:

// 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();