ReduxアクションでのJest play

Question

jestとsnapshotsを実装しようとしていて、問題が発生しました。解決策はおそらく単純ですが、私はそれを見つけることができません。

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アクションで素晴らしいプレーすることができますか？

Answer 1

私はredux機能を別々にテストし、startSpinnerを模擬関数として渡します。

例えば：

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

Answer 2

ユニットテストで小道具としてstartSpinnerを渡すのを忘れました。レンダリング機能をテストする必要がある場合は、noopのような関数を渡す必要があります（lodashは1つを提供します）。

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

reduxアクションの場合、私はそれらを別々にテストします（ジストスナップショットも素晴らしいです）。

Answer 3

私はあなたが適切にテストを適用していないと信じています。

LoginFormコンポーネントがプロバイダによってラップされずに接続機能を使用しようとしているため、テストが失敗しているため、非アクセスストアにアクセスしようとしています。

あなたが最初の店を模擬する必要があり、あなたのテストでsnapsotsを実装するには、素敵なモックはそこに既に存在している、あなたはここでそれを見つけることができます： https://github.com/arnaudbenard/redux-mock-store

を次に、あなたはあなたの店を設定する必要があり、私のプロジェクトでI 、このような何かをあなたの意志でそれを変更します。

// 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(); 
    }) 
    }); 
});