Шутка/Фермент | Не удалось разобрать data-test="basic-render"

У меня есть два метода рендеринга в моем компоненте React. Все зависит от того, что возвращает эта функция.

  validateUserExists = username =>
    listUsers().then(({ data }) => {
      if (Array.isArray(data) && data.includes(username)) {
        return true;
      }
      return false;
    });

Он берет имя пользователя из API и, если оно существует в listUsers(), возвращает true или false. В зависимости от этого компонент отображает либо NoUser, либо BasicRender.

Вот тест:

  describe('User does not exist', () => {
    let match;
    let validateUserExistsFn;
    let fetchUserFn;
    beforeEach(() => {
      match = { params: { username: 'testUser' }, isExact: true, path: '', url: '' };
      validateUserExistsFn = jest.fn();
      fetchUserFn = jest.fn();
    });

    it('should render NoResource Component when user', () => {
      const wrapper = shallow(
        <UserDetailsScreen
          match = {match}
          fetchUsers = {fetchUserFn}
          validateUserExists = {validateUserExistsFn}
        />,
        {
          disableLifecycleMethods: true
        }
      );
      console.info(wrapper.debug());
      const BasicRender = wrapper.find(`[data-test = "basic-render]`);
      expect(BasicRender).toHaveLength(1);
    });

Вот код компонента:

class UserDetailsScreen extends Component {
  static propTypes = {
    match: PropTypes.shape({
      isExact: PropTypes.bool,
      params: PropTypes.object,
      path: PropTypes.string,
      url: PropTypes.string
    }),
    // eslint-disable-next-line react/forbid-prop-types
    history: PropTypes.object,
    label: PropTypes.string,
    actualValue: PropTypes.string,
    callBack: PropTypes.func
  };

  state = {
    user: {}
  };

  componentDidMount() {
    this.fetchUser();
  }

  getUserUsername = () => {
    const { match } = this.props;
    const { params } = match;
    return params.username;
  };

  fetchUser = () => {
    getUser(this.getUserUsername()).then(username => {
      this.setState({
        user: username.data
      });
    });
  };

  validateUserExists = username =>
    listUsers().then(({ data }) => {
      if (Array.isArray(data) && data.includes(username)) {
        return true;
      }
      return false;
    });

  redirectToUsers = () => {
    const { history } = this.props;
    // eslint-disable-next-line no-restricted-globals
    history.push('/management/users');
  };

  renderNoResourceComponent = () => (
    <div className = "center-block" data-test = "no-resource-component">
      <NoResource
        icon = "exclamation-triangle"
        title = "Ooops"
        primaryBtn = "Back to Users"
        primaryCallback = {this.redirectToUsers}
      >
        <span className = "font-weight-bold">404: User does not exist</span>
        <br />
        Please choose from one in the usersLists
      </NoResource>
    </div>
  );

  render() {
    const { user } = this.state;
    const { callBack, actualValue, label } = this.props;
    return (
      <div className = "container-fluid">
          </Fragment>
        ) : (
            <div className = "container-fluid">
              {this.renderNoResourceComponent()}
            </div>
          )}
      </div>
    );
  }
}

export default withRouter(UserDetailsScreen);

А вот что такое wrapper.debug()возвращается, которого я никогда раньше не видел:

      <Route>
        [function children]
      </Route>

В процессе я узнал, что мне нужно обернуть свой тест моим BrowserRouter из react-router-dom. Что я и сделал, и он напечатал мне это при отладке:

    <Router history = {{...}}>
        <UserDetailsScreen match = {{...}} fetchUsers = {[Function: mockConstructor]} />
        };
      </Router>

После этого не повезло. я получаю ту же ошибку, снова и снова.

Я имею в виду, что какой бы атрибут проверки данных я ни искал, он всегда возвращает это. Я занимаюсь этим более 5 часов. Может ли кто-нибудь помочь мне решить эту проблему? Спасибо!!