expect（jest.fn（））.toHaveBeenCalled（）error

我正在使用Enzyme/Jest爲我的容器帽子上的函數編寫測試，它是通過複選框組件的onChange觸發的。我試圖模擬一個'改變'，但是，'改變'不會觸發onChange函數被調用。不知道這裏發生了什麼......我嘗試將模擬更改爲「點擊」，刪除了目標對象，但仍然無法工作。expect（jest.fn（））.toHaveBeenCalled（）error

集裝箱

export class Data extends React.PureComponent { 
    constructor(props) { 
    super(props); 

    this.state = { 
     data_list_api: [], 
     selected_data: this.props.dataForm, 
    }; 

    } 

handleCheck = (event) => { 
    const newSelectedData = Object.assign({}, this.state.selected_data); 
    if (newSelectedData[event.target.name]) { 
     delete newSelectedData[event.target.name]; 
    } else { 
     newSelectedData[event.target.name] = [true, event.target.id]; 
    } 
    this.setState({ selected_data: newSelectedData }); 
    } 

render() { 
    const dataOptions = this.state.data_list_api.map((val, index) => (
     <div className="form-group no-margin" key={index}> 
     <div className="col-md-12"> 
      <div className="checkbox"> 
      <Checkbox 
       name={val.data_name} 
       id={val.data_id} 
       onChange={this.handleCheck} 
       checked={this.state.selected_datas[val.data_name] ? true : false} 
       disabled={!this.state.selected_datas[val.data_name] && this.getObjectLength(this.state.selected_datas) > 3} 
      /> 
      </div> 
     </div> 
     </div> 
    )); 

    return (
     <div> 
     {dataOptions} 
     </div> 
    ) 
    } 
}

測試

import React from 'react'; 
import { shallow, mount, render } from 'enzyme'; 
import { fromJS } from 'immutable'; 
import { Data } from '../index'; 

function setup() { 
    const props = { 
    submitDataForm: jest.fn(), 
    } 
    const wrapper = shallow(<Data {...props} />); 
    return { props, wrapper }; 
} 

it('expects handleCheck to work',() => { 
const { wrapper, props } = setup(); 

wrapper.setState({ data_list_api: [ 
    { data_name: 'data1 name', 
    data_id: 123 }, 
    { data_name: 'data2 name', 
    data_id: 234 }, 
    { data_name: 'data2 name', 
    data_id: 345 }], 
}); 

wrapper.instance().handleCheck = jest.fn(); 

wrapper.update(); 

wrapper.find('.checkbox').first().simulate('change', { target: { checked: true } }); 

expect(wrapper.instance().handleCheck).toHaveBeenCalled(); 
expect(wrapper).toMatchSnapshot(); 


});

錯誤

expect(jest.fn()).toHaveBeenCalled() 

Expected mock function to have been called. 

    at Object.<anonymous> (app/containers/Schools/tests/index.test.js:95:44) 
     at Promise (<anonymous>) 
    at Promise.resolve.then.el (node_modules/p-map/index.js:42:16) 
     at <anonymous> 
    at process._tickCallback (internal/process/next_tick.js:169:7)

任何幫助將是非常讚賞d！

來源

2017-07-19 cssun25

爲什麼不只是測試狀態已經改變了嗎？ –

它也不適用於我，因爲onChange函數甚至沒有被調用。似乎有一個「模擬變化」部分的問題，我不明白爲什麼它不模擬變化（因此不會導致onChange函數運行，從而不會改變狀態）。 – cssun25

問題是您的選擇器wrapper.find('.checkbox').first()。這將觸發<div className="checkbox">上的事件。但是這個元素沒有事件監聽器，並且它的行爲不像真實事件，所以它不會傳播。來自文檔：

當前，淺呈現器的事件模擬不像那樣在實際環境中傳播。作爲結果，必須在設置了事件處理程序的實際節點上調用.simulate（）。儘管這個名字暗示這會模擬一個的實際事件，但是.simulate（）實際上會根據您給它的事件來定位組件的道具。例如，.simulate（'click'）會實際獲得onClick prop並調用它。

爲了解決這個問題，你必須選擇具有附着在單擊處理組件：

wrapper.find('Checkbox')

來源

2017-07-20 07:28:08

expect（jest.fn（））.toHaveBeenCalled（）error

回答

相關問題