如何使用 mount() 更新嵌套组件的状态？答案

【问题标题】：How can I update my nested component's state using mount()?如何使用 mount() 更新嵌套组件的状态？
【发布时间】：2018-07-24 12:16:19
【问题描述】：

如果路径是/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>
  );
}

我在寻找解决方案时已经遇到的问题是：

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

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

有什么想法可以在使用mount 或使用shallow 访问Search 时更新应用程序的状态吗？

【问题讨论】：

标签： reactjs react-router enzyme jestjs react-dom

【解决方案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);
});

希望这可以帮助遇到同样问题的人。

【讨论】：