Javascript 如何sinon间谍反应组件构造函数-单元测试？

我用的是酶，西农，希望能对我的反应成分进行单元测试

import React from 'react';
import expect  from 'expect.js';
import { shallow } from 'enzyme';

import ExampleComponent from './../../../src/js/components/example-component';

describe('Test <ExampleComponent />', function() {

beforeEach(function() {
    this._sandbox = sinon.sandbox.create();
    this.constructorSpy = this._sandbox.spy(ExampleComponent.prototype, 'constructor');
});

afterEach(function() {
    this._sandbox.restore();
    this.constructorSpy = null;
});

it('Should set the state with the correct data [constructor]', function() {
    const wrapper = shallow(<ExampleComponent />);
    console.log(' - callCount: ', this.constructorSpy.callCount);
    expect(this.constructorSpy.calledOnce).to.be(true);

    expect(Immutable.is(wrapper.state('shownData'), Immutable.Map())).to.be(true);
});

从“React”导入React；
从“expect.js”导入expect；
从“酶”导入{shall}；
从“/../../../src/js/components/example component”导入ExampleComponent；
描述（'Test'，function（））{
beforeach（函数（）{
此.u sandbox=sinon.sandbox.create（）；
this.constructorSpy=this._sandbox.spy（例如component.prototype，“constructor”）；
});
之后（函数（）{
此._sandbox.restore（）；
this.constructorSpy=null；
});
它（'应使用正确的数据[构造函数]设置状态'，函数（）{
常量包装器=浅（）；
log（'-callCount:'，this.constructorSpy.callCount）；
expect（this.constructorSpy.calledOnce）.to.be（true）；
expect（Immutable.is（wrapper.state（'shownData'）、Immutable.Map（））.to.be（true）；
});

我的组件构造函数中有一些逻辑，它根据我作为道具传入的内容设置状态。但是，此测试一直告诉我构造函数调用计数为0，它没有被调用

监视组件构造函数的正确方法是什么？我做错了什么

---

我之所以使用沙盒，是因为我想在沙盒中添加其他函数，以便在将来进行监视。

当我呈现测试时，构造函数（以及任何其他生命周期方法）应该自动调用。在测试中尝试覆盖它可能会非常复杂，并且对于您要检查的内容来说不是必需的

如果构造函数基于道具设置状态，为什么在测试中检查结果状态是不够的？（参见下面示例中的“非常重要”断言）

另一个选项：假设您正在将项目设置为组件渲染中使用的状态-在这种情况下，您可以在渲染元素中检查这些项目

最后，我还在构造函数中包含了一个函数调用，然后我在测试中监视它（使用sinon）以断言它被调用，以防有用

反应组件示例：

import React, { Component, PropTypes } from 'react'

export default class Post extends Component {
  static propTypes = {
    markRead: PropTypes.func.isRequired,
    postName: PropTypes.string.isRequired
  }

  constructor (props) {
    super(props)
    const { markRead, postName } = props

    markRead()
    this.state = {
      postName: 'Very Important: ' + postName
    }
  }

  render () {
    const { postName } = this.state

    return (
      <div className='post-info'>
        This is my post: {postName}!
      </div>
    )
  }
}

import React，{Component，PropTypes}来自“React”
导出默认类Post扩展组件{
静态类型={
markRead:PropTypes.func.isRequired，
postName:PropTypes.string.isRequired
}
建造师（道具）{
超级（道具）
常量{markRead，postName}=props
markRead（）
此.state={
postName:'非常重要：'+postName
}
}
渲染（）{
const{postName}=this.state
返回(
这是我的帖子：{postName}！
)
}
}

酶试验示例，全部通过：

import React from 'react'
import assert from 'assert'
import { shallow } from 'enzyme'
import { spy } from 'sinon'

import Post from 'client/apps/spaces/components/post'

describe('<Post />', () => {
  const render = (props) => {
    const withDefaults = {
      markRead: () => {},
      postName: 'MyPostName',
      ...props
    }
    return shallow(<Post {...withDefaults} />)
  }

  it('renders and sets the post name', () => {
    const markReadSpy = spy()
    const props = {
      markRead: markReadSpy
    }
    const wrapper = render(props)
    const postInfo = wrapper.find('.post-info')
    const postText = postInfo.text()

    assert.equal(wrapper.state('postName'), 'Very Important: MyPostName')
    assert(markReadSpy.calledOnce)
    assert.equal(postInfo.length, 1)
    assert(postText.includes('MyPostName'))
  })
})

从“React”导入React
从“assert”导入assert
从“酶”导入{shall}
从“sinon”导入{spy}
从“客户端/应用程序/空间/组件/帖子”导入帖子
描述（“”，（）=>{
常量渲染=（道具）=>{
常量带默认值={
markRead:（）=>{}，
postName:'MyPostName'，
…道具
}
返回浅（）
}
它（'呈现并设置帖子名称'，（）=>{
const markReadSpy=spy（）
常量道具={
markRead:markReadSpy
}
常量包装器=渲染（道具）
const postInfo=wrapper.find（“.post info”）
const postText=postInfo.text（）
assert.equal（wrapper.state（'postName'），'Very-Important:MyPostName'）
断言（markReadSpy.calledOnce）
assert.equal（postInfo.length，1）
断言（postText.includes（'MyPostName'））
})
})

注：此外，在上述示例中，您似乎没有导入sinon供参考