反應/通量+茉莉花 - 預期的間諜被稱爲失敗

Question

我不太確定爲什麼發生這種情況，我有一個非常簡單的組件和測試，但是，它在✖ should call getState on TestStore失敗。但是作爲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> 
    ) 
    } 

} 

測試：

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') 
    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() 
    }) 

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

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

}) 

Answer 1

TestStore.getState()應該從TestComponent.getStateFromStores()叫，但你刺探TestComponent.getStateFromStores()：

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

所以實際執行未在您的測試調用。窺視功能，也有叫，你可以改變爲：

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

Documentation for 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); }) 
    }) 

現在，你可以自由地改變實現和正在測試的內容是很重要的：TestComponent後，它的狀態被初始化。