Javascript 反应/通量+；茉莉花-被称为间谍的预期失败了

我不确定为什么会发生这种情况，我有一个非常简单的组件和测试，但是，它在

✖ 应在TestStore上调用getState

。但是当

getStateFromStores

被调用时，它也应该被调用，对吗？我不懂自动取款机

import React, { PropTypes } from 'react'
import TestStore from '../stores/TestStore'

export default class TestComponent extends React.Component {

  static propTypes = {
  }

  static getStateFromStores() {
    return TestStore.getState()
  }

  constructor(props) {
    super(props)
    this.state = TestComponent.getStateFromStores()
  }

  render() {

    return (
      <div>
        <img src='' alt=''/>
      </div>
    )
  }

}

TestStore.getState（）

应该从

TestComponent.getStateFromStores（）

调用，但您正在监视

TestComponent.getStateFromStores（）

：

因此，在测试期间不会调用实际实现。要监视函数并调用它，您可以更改为：

spyOn(TestComponent, 'getStateFromStores').and.callThrough();

这就是说，测试方法是否在您正在测试的模块内被调用，可能是实现特定的。最好让测试更加面向因果关系。因此，我建议的解决方案是进行以下调整：

var React = require('react')

    var TestUtils = require('react/lib/ReactTestUtils')
    var Immutable = require('immutable')

    const mockTestStoreData = Immutable.fromJS({
      one: {
        foo: 'bar'
      },
      two: {
        bar: 'baz'
      }
    })

    describe('TestComponent.jsx', () => {

      var TestStore
      var TestComponent
      var TestComponentEl
      var renderedRootElement
      var renderedDOMNode

      beforeEach(() => {
        TestStore = require('../../stores/TestStore')
        spyOn(TestStore, 'getState').and.returnValue(mockTestStoreData);
        TestComponent = require('../TestComponent.jsx')
        // don't spyOn(TestComponent, 'getStateFromStores')
        TestComponentEl = React.createElement(TestComponent)
        renderedRootElement = TestUtils.renderIntoDocument(TestComponentEl)
        renderedDOMNode = React.findDOMNode(renderedRootElement)
      })

      it('should be rendered within a div', () => {
        expect(renderedDOMNode.tagName.toUpperCase()).toEqual('DIV')
      })

      it('should have a static getStateFromStores function', () => {
        expect(TestComponent.getStateFromStores).toBeDefined()
      })

      // don't
      //it('should call getStateFromStores on construction', () => {
      //  expect(TestComponent.getStateFromStores).toHaveBeenCalled()
      //})

      // don't
      //it('should call getState on TestStore', () => {
      //  expect(TestStore.getState).toHaveBeenCalled()
      //})

      // instead
      it( 'should get its initial state from TestStore', () => {
        expect(TestStore.getState).toHaveBeenCalled(); // I'd say optional
        expect( TestComponent.state ).toEqual( mockTestStoreData );
      })
    })

var React=require（'React'））
var TestUtils=require（'react/lib/ReactTestUtils'）
var Immutable=require（'Immutable'）
const mockTestStoreData=Immutable.fromJS({
一:{
福：“酒吧”
},
二:{
酒吧：“巴兹”
}
})
描述（'TestComponent.jsx'，（）=>{
var测试库
var测试组件
var测试组件
var renderedRootElement
变量renderdomnode
在每个之前（（）=>{
TestStore=require（“../../stores/TestStore”）
spyOn（TestStore，'getState'）。和.returnValue（mockTestStoreData）；
TestComponent=require（“../TestComponent.jsx”）
//不使用spyOn（TestComponent，'getStateFromStores'）
TestComponentEl=React.createElement（TestComponent）
RenderRootElement=TestUtils.renderIntoDocument（TestComponentEl）
RenderDedDomNode=React.findDOMNode（RenderDedRootElement）
})
它（'应该在div中呈现'，（）=>{
expect（renderedDOMNode.tagName.toUpperCase（））.toEqual（'DIV'）
})
它（'应该有一个静态getStateFromStores函数'，（）=>{
expect（TestComponent.getStateFromStores）.tobededefined（）
})
//不要
//它（'should call getStateFromStores on construction'，（）=>{
//expect（TestComponent.getStateFromStores）.toHaveBeenCalled（）
//})
//不要
//它（'应该调用TestStore上的getState'，（）=>{
//expect（TestStore.getState）.toHaveBeenCalled（）
//})
//反而
它（'应该从TestStore获取其初始状态'，（）=>{
expect（TestStore.getState）.tohavebeencall（）；//我认为是可选的
expect（TestComponent.state）.toEqual（mockTestStoreData）；
})
})

现在您可以自由地更改实现，并测试重要的内容：TestComponent初始化后的状态

spyOn(TestComponent, 'getStateFromStores').and.callThrough();

var React = require('react')

    var TestUtils = require('react/lib/ReactTestUtils')
    var Immutable = require('immutable')

    const mockTestStoreData = Immutable.fromJS({
      one: {
        foo: 'bar'
      },
      two: {
        bar: 'baz'
      }
    })

    describe('TestComponent.jsx', () => {

      var TestStore
      var TestComponent
      var TestComponentEl
      var renderedRootElement
      var renderedDOMNode

      beforeEach(() => {
        TestStore = require('../../stores/TestStore')
        spyOn(TestStore, 'getState').and.returnValue(mockTestStoreData);
        TestComponent = require('../TestComponent.jsx')
        // don't spyOn(TestComponent, 'getStateFromStores')
        TestComponentEl = React.createElement(TestComponent)
        renderedRootElement = TestUtils.renderIntoDocument(TestComponentEl)
        renderedDOMNode = React.findDOMNode(renderedRootElement)
      })

      it('should be rendered within a div', () => {
        expect(renderedDOMNode.tagName.toUpperCase()).toEqual('DIV')
      })

      it('should have a static getStateFromStores function', () => {
        expect(TestComponent.getStateFromStores).toBeDefined()
      })

      // don't
      //it('should call getStateFromStores on construction', () => {
      //  expect(TestComponent.getStateFromStores).toHaveBeenCalled()
      //})

      // don't
      //it('should call getState on TestStore', () => {
      //  expect(TestStore.getState).toHaveBeenCalled()
      //})

      // instead
      it( 'should get its initial state from TestStore', () => {
        expect(TestStore.getState).toHaveBeenCalled(); // I'd say optional
        expect( TestComponent.state ).toEqual( mockTestStoreData );
      })
    })