Question

以下是示例代码，在以下代码<MyComponent />中有一个名为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>
  }
}

以下是测试，我想测试getHeader()方法

 const myComponent = shallow(<MyComponent />);
 const header = myComponent.instance().getHeader('hello');

 // the following code always fails. Any suggestion
 expect(shallow(header).instance()).to.be.instanceOf(Header);

Answer 1

可能有一种更好的方法，但这会通过：

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

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

注意：这完全不依赖于渲染组件，而是纯粹测试getter。

我确实质疑这个测试的价值，并建议你测试给定输入的组件的预期渲染，而不是担心它到底用于确切的吸气剂。从长远来看，这将使重构变得更容易。类似的东西：

let myComponent = shallow(<MyComponent />)

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

Answer 2

我做了很多次试验来弄清楚这一点。这是我的代码的样子，它成功了。

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

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

这里的关键是您必须执行yourComponent.type才能使相等性成为您想要的类。

如何通过其他React组件的方法测试React组件返回

2 个答案: