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. 두 번째로 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