Question

我有一个具有render方法的简单组件，如下所示，我正在尝试测试标题文本是否正确显示。

render() {
  const headerText = 'Header';
  const AppHeader = () => (
    <div className='Header-Text'>{headerText}</div> 
  );
  if (this.state.token) {
    return (
     <div>
       <AppHeader/>
       <div>Some Content</div> 
       <Link to="/hello"/>hi<?Link>
     </div>
  );
} else {
    return (
     <div>Some Text</div>
     <Link to="/hello"/>hi<?Link>
    );
}

如下测试

  it('should render Header Text', () => {
    const props = {};
    let wrapper = shallow(<MemoryRouter><App {...props}/></MemoryRouter>);
    wrapper = wrapper.find(App).dive().setState({ token: 'ok'});
  });

但是我发现我的报道仍然无法实现。

  const AppHeader = () => (
    <div>{headerText}</div> 
  );

我不使用mount的原因是它不允许setState用于子级，在这种情况下，我需要将其包装在Router中，以克服与Link使用相关的错误。我该如何解决这个问题？

开玩笑地测试带有箭头功能的JSX元素

0 个答案: