농담을 사용한 Redex 폼 테스트

농담을 사용한 Redex 폼 테스트

나는 이 파일과 비슷한 코드에 대해 redensx 양식 제출을 테스트하려고 한다.

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. 둘째, 기대조항이 실패한다.내 코드의 userLogin 기능이 호출되었는지 확인하는 방법

   예상되는 모의 함수가 호출됨.

JEST 스냅샷 테스트를 사용하여 Redex 폼을 테스트하는 방법.

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

참조URL: https://stackoverflow.com/questions/46932791/redux-form-test-using-jest