Джест / Фермент |Не удалось проанализировать data-test = "basic-render"

Question

У меня есть два метода рендеринга в моем компоненте 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.log(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 от реактивного маршрутизатора. Что я и сделал, и это напечатало меня на отладке:

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

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

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