笑话/酶|无法解析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包装在react-router-dom中。我做了什么，并在调试时将其打印出来：

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

在那之后运气不高。我一遍又一遍地得到相同的错误。

我的意思是无论我要查看什么数据测试属性，它总会返回该值。我在这件事上待了5个多小时。有人可以帮我解决这个问题吗？谢谢！