所以我只是偶然發(fā)現(xiàn)了這個問題。我想問一下解決這個問題的最佳方法。這是我的App.js代碼的相關(guān)部分:addTask = (text) => { const {tasks} = this.state; tasks.push({text}); this.setState({tasks});};<AddTaskConfirmBtn text={ this.state.newTaskValue // This is just a simple state string } addTask={ this.addTask }/>AddTask 測試it('should addTask', function () { wrapper .instance() .addTask('testing'); expect( wrapper .state('tasks') ).toEqual([ {text: 'make todo with hooks'}, {text: 'write tests'}, {text: 'do the daily'}, {text: 'testing'}, ])});AddTaskConfirmBtn 代碼:render() { return ( <button onClick={ this.props .addTask // This is the issue. This adds an object to the array. It is solved below }> Add task </button> );}// 僅供參考。這是我解決問題的方法render() { return ( <button onClick={ () => { this.props .addTask(this.props.text) } }> Add task </button> );}這是我的測試:describe('<AddTaskConfirmBtn/>', function () { let wrapper; let addTaskMock = jest.fn(); beforeEach( function () { wrapper = shallow( <AddTaskConfirmBtn addTask={addTaskMock}/> ); } ); it('should addTaskToTasks onClick', function () { wrapper .find('button') .simulate('click'); expect(addTaskMock).toHaveBeenCalledTimes(1); } ); })首先我正在學(xué)習(xí)單元測試和TDD,所以請對我的愚蠢感到溫柔。現(xiàn)在我的問題。我正在以上面看到的方式測試我的代碼。所以添加正確的值并將其推送到狀態(tài),然后進(jìn)行比較。AddTaskConfirmBtn 只是檢查該方法是否被調(diào)用。但我剛剛意識到我的測試中沒有考慮到一個錯誤。我將錯誤的東西推入數(shù)組(我相信這是我推入狀態(tài)的事件對象)。我修復(fù)了它,但有趣的是測試沒有發(fā)現(xiàn)它。顯然是因?yàn)槲也皇沁@樣寫的。所以我的問題是,我應(yīng)該擔(dān)心嗎?我應(yīng)該在測試中考慮這樣的情況嗎?或者這只是發(fā)生的事情?或者我應(yīng)該在方法本身中加入保護(hù)措施?喜歡
為 React 編寫測試的正確方法
MMTTMM
2021-09-04 14:58:13