最佳玩回覆操作

我試圖執行snapshots與jest，我遇到了一個問題。解決方案可能很簡單，但我找不到它。最佳玩回覆操作

LoginForm.js

class LoginForm extends React.Component { 
    constructor(props) { 
     super(props) 
     } 
    } 
    componentWillMount(){ 
     this.props.startSpinner() 
    } 
    render(){ 
     return(....) 
    } 
}

LoginForm.spec.js

it('should render snapshot',() => { 
    const component = renderer.create(
      <LoginForm /> 
    ) 
    const tree = component.toJSON() 
    expect(tree).toMatchSnapshot() 
})

startSpinner動作

export function startSpinner() { 
    return (dispatch) => { 
     dispatch({ 
      type: 'WINDOW_START_SPINNER', 
     }) 
    } 
}

W¯¯如果我運行測試，它會拋出此錯誤，不僅會出現此操作，而且會調用所有稱爲redux操作的函數。

TypeError: this.props.startSpinner is not a function

我怎樣才能讓jest發揮好這個redux行動？

來源

2017-10-06 Cristian Muscalu

我會單獨測試redux功能，並將startSpinner作爲模擬函數傳入。

e.g：

const mockFn = jest.fn() 
const component = renderer.create(
    <LoginForm startSpinner={mockFn} /> 
) 
expect(mockFn.toHaveBeenCalled()).toBe(true)

來源

2017-10-06 09:15:37 Morleee

你忘了在單元測試中通過startSpinner作爲道具。如果你只需要測試渲染功能，你應該通過一個像noop函數（lodash提供一個）。

it('should render snapshot',() => { 
    const component = renderer.create(
      <LoginForm startSpinner={_.noop} /> 
    ) 
    const tree = component.toJSON() 
    expect(tree).toMatchSnapshot() 
})

對於redux行動，我會單獨測試它們（開玩笑快照對他們來說也很棒）。

來源

2017-10-06 09:13:55 momsse

如果你想確保startSpinner （）被調用，你可以通過模擬：'const mockStartSpinner = jest.fn（）; '。否則（）=> {}是一個非常好的noop，不需要爲此引入整個lodash庫！ – stone

我相信你沒有正確應用試驗。您必須分別測試動作，縮減器和組件，

測試失敗，因爲LoginForm組件試圖使用connect函數而未被提供程序包裝，因此它試圖訪問未知存儲區。

要在您的測試snapsots你應該首先嘲笑商店，有一個很好的模擬已經在那裏，你可以在這裏找到： https://github.com/arnaudbenard/redux-mock-store

然後，你必須配置你的店，在我的項目我做這樣的事情，在你的意志改變：

// Import your actions and their names (I separate the names in a 
// different file to avoid typos. 
import * as actions from '../../src/actions'; 
import * as types from '../../src/actions'; 

// You must import an Initial state or create one, I usually import 
// the one I have in the reducer. 
import { INITIAL_STATE } from '../../src/reducers/AuthReducer' 
// Import your middleware and redux mock store 
import configureMockStore from 'redux-mock-store'; 
import thunk from 'redux-thunk'; 
import MockAdapter from 'axios-mock-adapter'; 

// --- Mocking config --> Crete your store 
const middlewares = [thunk]; 
const mockStore = configureMockStore(middlewares); 
let store = mockStore(INITIAL_STATE); 

// Clear actions before each time 
beforeEach(() => { 
    store.clearActions(); 
});

現在只是測試你的行動：

describe('[ ScannerActions ]',() => { 
    describe('*** toggleCamera()',() => { 
    it('Should dispatch TOGGLE_CAMERA action',() => { 
     store.dispatch(actions.toggleCamera()); 
     expect(store.getActions()).toMatchSnapshot(); 
    }) 
    }); 
});

來源

2017-10-06 09:20:44 EnriqueDev

最佳玩回覆操作

回答

相關問題