Question

如果路径为/search，我正在尝试测试我的组件是否呈现搜索组件。

这是我的测试：

it('renders Search when the correct URL is provided', () => {
  const wrapper = mount(
    <MemoryRouter initialEntries={['/search']} initialIndex={1}>
      <App />
    </MemoryRouter>
  ).find(App);
  expect(wrapper.find(Search)).toHaveLength(1);
});

App.js渲染功能：

render() {
  const { loading } = this.state;
  let content;

  if (loading) {
    content = <Loading />;
  } else {
    content =
      <div>
        <Switch>
          <Route exact path="/" render={() => (<BookList data={this.state} onHandleChange={this.handleChange.bind(this)} onStarClick={this.starClick.bind(this)} />)} />
          <Route path="/search" render={() => (<Search data={this.state} onHandleChange={this.handleChange.bind(this)} onStarClick={this.starClick.bind(this)} />)} />
          <Route component={NotFound} />
        </Switch>
        <Footer />
      </div>;
  }
  return (
    <div className="App">
      {content}
    </div>
  );
}

我在搜索解决方案时遇到的问题是：

使用浅：我可以更新App的状态。 Switch抛出一个错误，说它没有路由器，但确实如此，它就是MemoryRouter。
使用mount：我无法更新App的状态。 Switch识别MemoryRouter。

应用的state.loading默认值为true，当false运行时，它会更新为componentDidMount()。

如何使用mount或使用Search访问shallow的方式更新应用的状态？

Answer 1

我设法通过重构我的代码并将else内的内容传递给它自己的组件来找到解决这个问题的方法：

const MainContent = (props) => {
  const { data, onHandleChange, onStarClick } = props;
  return(
    <Switch>
      <Route exact path="/" render={() => (<BookList data={data} onHandleChange={onHandleChange} onStarClick={onStarClick} />)} />
      <Route path="/search" render={() => (<Search data={data} onHandleChange={onHandleChange} onStarClick={onStarClick} />)} />
      <Route component={NotFound} />
    </Switch>
  )
};

然后我在MainContent.test.js测试了我的路线：

it('renders <Search /> when path is `/search`', () => {
  const wrapper = mount(
    <MemoryRouter initialEntries={['/search']}>
      <MainContent data={body} onHandleChange={handleChange} onStarClick={starClick}/>
    </MemoryRouter>
  ).find(MainContent);
  expect(wrapper.find(Search)).toHaveLength(1);
});

希望这可能有助于遇到同样问题的人。

如何使用mount（）更新嵌套组件的状态？

1 个答案: