jestを使用したReduxフォームテスト

Question

私はこのファイルと類似のコードでreduxフォーム送信をテストしようとしています。

https://github.com/marmelab/admin-on-rest/blob/master/src/mui/auth/Login.js

私のコードは、私は二つの問題に直面しているこの

const middlewares = []; 
    const mockStore = configureMockStore(middlewares); 

    it("submit button",() => { 
    userLogin = jest.fn(); 
    const initialState = { 
     admin: { 
     notification: { 
      text: "", 
      type: "info" 
     } 
     }, 
    }; 
    store = mockStore(initialState); 
    tn = label => label; 

    const props = { 
     submitting: false, 
     theme: customTheme, 
     translate: tn, 
     store, 
     location: { 
     state: { 
      nextPathname: "/" 
     } 
     }, 
     userLogin: userLogin 
    }; 
    container = mount(
     <Provider store={store}> 
      <TranslationProvider locale="en"> 
      <Login {...props} /> //Login is connected component 
      </TranslationProvider> 
     </Provider> 
     , 
     { 
     context: { store: mockStore(initialState) } 
     } 
    ); 
    const username = container.find("TextField").first(); 
    username.simulate("change", { target: { value: "admin" } }); 
    const password = container.find("TextField").last(); 
    password.simulate("change", { target: { value: "Superuser" } }); 

    const form = container.find("form"); 
    form.simulate("submit"); 
    console.log(username.debug()); 

    expect(userLogin).toHaveBeenCalled(); 
}); 

のようなものです。

1. ユーザー名を印刷すると、シミュレーションで更新する更新値が表示されません。

2. 第2に、expect句が失敗します。私のコード内のuserLogin関数が呼び出されたことをどうやって確認するのですか？

   呼び出された疑似モック関数が必要です。

Answer 1

これはJESTのスナップショットテストを使用してredux-formsをテストする方法です。

import React from 'react' 
import renderer from 'react-test-renderer' 
import { createStore } from 'redux' 
import { Provider } from 'react-redux' 
import YourReduxFormComponent from 'path where it sitting in your project' 
import { reduxForm } from 'redux-form' 

jest.mock('react-dom') 

const spy = jest.fn() 
const initialStateValues = {/* initial state values that your form component expects */} 
const Decorated = reduxForm({ 
    form: 'testForm', onSubmit: { spy } 
})(YourReduxFormComponent) 

const formFieldValues = {/*Form field values*/} 

it('YourReduxFormComponent renders correctly',() => { 
    const store = createStore((state) => state, initialStateValues) 
    const tree = renderer.create(
    <Provider store={store}> 
     <Decorated 
     {...formFieldValues} 
     /> 
    </Provider> 
).toJSON() 
    expect(tree).toMatchSnapshot() 
}) 

//Make your own tests like above to test the values