Question

我想要声明一个组件是从具有正确参数的另一个组件中调用的。

因此，在我测试的组件中，有一个Title组件被调用，其属性为title＆amp; url。我试图断言用正确的参数调用它。

我很确定我想使用sinon间谍并做类似的事情

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

但是关于React和Enzyme，我并不确定我应该监视什么。（因为显然它不是render！）

在我的规范文件中，我正在导入Title和console.log的值，以找到要监视的函数，我得到：

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

关于我如何做到这一点的任何想法？这是一个经历并找到元素并检查它的属性的情况？如果这样看起来有点......凌乱，似乎违背了浅层渲染的原则（＆＃34;浅层渲染对于限制自己将组件作为一个单元进行测试非常有用＆＃34; ）。

Answer 1

您可以在.contains()方法的帮助下实现它，而不会弄乱间谍。

如果你有一个组件：

<Foo>
  <Title title="A title" url="http://google.com" />
</Foo>

你可以做出这样的断言：

const wrapper = shallow(<Foo />);
expect(wrapper.contains(<Title title="A title" url="http://google.com" />)).to.equal(true);

这样会失败：

const wrapper = shallow(<Foo />);
expect(wrapper.contains(<Title title="A wrong title" url="http://youtube.com" />)).to.equal(true);

Answer 2

如果您只是检查传递给组件的属性值，则不需要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)
    })
})

Answer 3

这是一个较旧的问题，但我的方法与现有答案略有不同：

我正在测试的组件中有一个Title组件，它被调用属性title＆amp;网址。我试图断言用正确的参数调用它。

即。您想要检查正在测试的组件是否会渲染另一个组件，并将正确的道具传递给它。

因此，如果正在测试的组件看起来像：

const MyComp = ({ title, url }) => (
  <div>
    <Title title={title} url={url} />
  </div>
)

然后测试看起来像：

import Title from 'path/to/Title';, u

it('renders Title correctly', () => {
  const testTitle = 'Test title';
  const testUrl = 'http://example.com';
  const sut = enzyme.shallow(<MyComp title={testTitle} url={testUrl} />);

  // Check tested component rendered
  expect(sut.exists).toBeTruthy(); 

  // Find the Title component in the subtree
  const titleComp = sut.find(Title); // or use a css-style selector string instead of the Title import

  // Check that we found exactly one Title component
  expect(titleComp).toHaveLength(1);

  // Check that the props that were passed were our test values
  expect(titleComp.prop('title')).toBe(testTitle);
  expect(titleComp.prop('url')).toBe(testUrl);
});

我通常发现Enzyme的功能对于各种组件检查非常有用，而不需要其他库。创建Sinon模拟可以作为道具传递到组件，以（例如）测试单击按钮时调用回调道具。

使用Enzyme（和sinon？）监视React组件以检查参数

3 个答案: