Нарушение инварианта: недопустимый тип элемента: ошибка при попытке протестировать компонент React с использованием Jest / Enzyme.

Question

Я нашел эти проблемы в другом месте, но не совсем в той же ситуации, что и я, и поэтому изо всех сил пытаюсь найти решение этой проблемы.В моем случае компонент работает нормально, но я получаю эту ошибку при попытке смонтировать его:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `RepoDropdown`.

Я хочу смонтировать его, чтобы я мог протестировать часть onChange созданного мной выбранного компонента.Компонент выглядит следующим образом:

const SelectRepo = styled.select`
  // CSS rules here
`;

export class RepoDropdown extends PureComponent {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    // Logic here
  }

  render() {
    if (!this.props.repoList) {
      return null;
    }

    const repoItems = this.props.repoList.map(repo => (
      <RepoDropdownItem repo={repo.name} key={repo.id} />
    ));

    return (
      <SelectRepo onChange={this.handleChange}>
        {repoItems}
      </SelectRepo>
    );
  }
}

RepoDropdown.propTypes = {
  // Required propTypes here
};

export const mapStateToProps = state => ({
  repoList: getAllRepos(state),
});

export default connect(
  mapStateToProps,
  { getRepoInfo, updateCurrentUrl, updateWrongRepo }
)(RepoDropdown);

Это способ, которым я пытаюсь смонтировать компонент:

it('SHOULD call onChange function when new repo is selected', () => {
  const middlewares = [thunk];
  const mockStore = configureStore(middlewares);
  const initialState = {
    repos: {
      repoList: [{ name: 'sample1', id: 1 }, { name: 'sample2', id: 2 }],
    },
  };
  const store = mockStore(initialState);

  const component = mount(
    <DefaultThemeProvider>
      <Provider store={store}>
        <RepoDropdown
          getRepoInfo={getRepoInfo}
          repoList={[
            { name: 'the-value', id: 1 },
            { name: 'not-the-value', id: 2 },
          ]}
          updateCurrentUrl={updateCurrentUrl}
          updateWrongRepo={updateWrongRepo}
        />       
      </Provider>
    </DefaultThemeProvider>
  );

  component
    .find('select')
    .simulate('change', { target: { value: 'sample1' } });
  expect(component.find('select').prop('onChange')).toHaveBeenCalled();
});

Я пробовал различные операции с импортом и экспортом, чтобы попытаться исправитьэто было предложено в другом месте, но безрезультатно.Я чувствую, что это как-то связано с отображаемыми дочерними компонентами, но я не смог найти решение, чтобы решить эту проблему.