Reactjs 如何通过其他React组件测试React组件返回'；s法

下面是示例代码，在下面的代码中

有一个名为

getHeader

的方法。我正在尝试测试

getHeader

方法

const Header = ({title})=> {
  return <Header> {title} </Header>
}

export class MyComponent extends React.Component {
  getHeader(title) {
    return <Header title={title} />
  }
  render() {
    return <div>{ this.getHeader()}</div>
  }
}

---

也许有更好的方法，但这是过去的：

let header = new MyComponent().getHeader('test')

expect(header).to.deep.equal(<Header title="test" />)

let header=new MyComponent（）.getHeader（'test'））
expect（header.to.deep.equal）（）

注意：这根本不依赖于呈现组件，它只是测试getter

我确实怀疑这个测试的价值，并建议您测试给定输入的组件的预期呈现，而不是担心它使用哪些getter来实现。从长远来看，这将使重构更容易。比如：

let myComponent = shallow(<MyComponent />)

expect(myComponent.find(Header).exists()).to.be.true
expect(myComponent.find(Header).props()).to.deep.equal({ title: undefined })

让myComponent=shallow（）
expect（myComponent.find（Header.exists（））.to.be.true
expect（myComponent.find（Header.props（））.to.deep.equal（{title:undefined}）

为了解决这个问题，我做了很多尝试。下面是我的代码的样子，它成功了

const component = shallow(<MyComponent {...props}/>);

let yourComponent = (component.instance() as MyComponent).getYourComponent(); 
expect(yourComponent).not.toBeNull();
expect(yourComponent.type).toEqual(YourComponent);

const component=shallow（）；
让yourComponent=（component.instance（）作为MyComponent.getYourComponent（）；
expect（您的组件）.not.toBeNull（）；
expect（yourComponent.type）.toEqual（yourComponent）；

---

这里的关键是您必须执行

yourComponent。键入
以获得与您希望的类相等的值
 我认为您不需要再次装载它-
expect（header）.to.be.instanceOf（header）
workShould
header
是否应该尝试渲染更多的
Headers
组件？另外，
this.getHeader（）
是否应该传递参数？
const component = shallow(<MyComponent {...props}/>);

let yourComponent = (component.instance() as MyComponent).getYourComponent(); 
expect(yourComponent).not.toBeNull();
expect(yourComponent.type).toEqual(YourComponent);