testing - 使用 Enzyme(和 sinon？)监视 React 组件以检查参数

Question

我想断言一个组件是从另一个组件中使用正确的参数调用的。

所以在我正在测试的组件中有一个 Title 组件，它被调用时带有属性 title 和 url。我试图断言它是用正确的参数调用的。

我很确定我想使用 sinon spy 并做这样的事情

const titleSpy = sinon.spy(Title, render)
expect(titleSpy).to.be.calledWith( '< some title >' )

但是关于 React 和 Enzyme，我不太确定我应该监视什么。 (因为显然它不是 render!)

在我的 spec 文件中，我正在导入 Title 和 console.log 寻找一个函数来监视它是有值(value)的，我得到:

function _class() {
  _classCallCheck(this, _class);
  return _possibleConstructorReturn(this, Object.getPrototypeOf(_class).apply(this, arguments));
}

关于如何执行此操作的任何想法？是否需要遍历并找到元素并检查其属性？如果是这样的话，那看起来有点……困惑并且似乎违反了浅渲染的原则(“浅渲染有助于约束自己将组件作为一个单元进行测试”)。 p>

Answer 1

如果您只是检查传递给组件的属性值，则不需要 sinon。例如，给定以下组件:

export default class MyComponent extends React.Component {

    render() {
        return (
            <MyComponent myProp={this.props.myProp} />)
    }
}

您的测试可能如下所示:

describe('MyComponent ->', () => {

    const props = {
        myProp: 'myProp'
    }

    it('should set myProp from props', () => {          
        const component = shallow(<MyComponent {...props} />)
        expect(component.props().myProp).to.equal(props.myProp)
    })
})