Как проверить редукционную форму в шутку - PullRequest
Новая
       22

Как проверить редукционную форму в шутку

0 голосов
/ 18 июня 2019

Я использую компонент без сохранения состояния, в котором есть избыточная форма. Я пытаюсь написать модульный тест для формы входа в систему, чтобы получить входные данные, а также смоделировать форму при нажатии. но я не знаю с чего начать, так как я новичок в шутке.

Я пытался создать моментальный снимок, а также создать фиктивный магазин.

Компонент формы входа: 

import logo from 'assets/img/logo/logo_200.png';
import LoadingButton from 'components/LoadingButton';
import ReduxFormInput from 'components/ReduxFormInput';
import { password } from 'lib/normalize';
import React from 'react';
import { Form } from 'reactstrap';
import { Field, reduxForm } from 'redux-form';
import validate from './validate';

const SignInForm = (props: any) => {
  const { handleSubmit, isLoading } = props;
  return (
    <Form onSubmit={handleSubmit}>
      <div className="text-center pb-4">
        <img src={logo} className="rounded" style={{ width: 60, height: 60 }} alt="logo" />
      </div>
      <Field
        name="email"
        component={ReduxFormInput}
        placeHolder="your@email.com"
        label="Email"
        type="email"
      />
      <Field
        name="password"
        component={ReduxFormInput}
        placeHolder="your password"
        label="Password"
        type="password"
        normalize={password}
      />
      <hr />
      <LoadingButton
        text="Login"
        loadingText="Logging in"
        isLoading={isLoading}
        size="lg"
        block={true}
      />
    </Form>
  );
};

export default reduxForm({
  form: 'signIn',
  validate,
})(SignInForm);

Компонент ввода формы Redux: 

import React from 'react';
import { FormGroup, Input, Label } from 'reactstrap';
import 'styles/splash-scripts.css';

const ReduxFormInput: React.FC = (field: any) => (
  <FormGroup>
    <Label>{field.label}</Label>
    <Input {...field.input} type={field.type} placeholder={field.placeHolder} />
    {field.meta.touched && <p className="text-danger">{field.meta.error}</p>}
  </FormGroup>
);

export default ReduxFormInput;

Тестовый файл: 

import React from 'react';
import { shallow, mount, render } from 'enzyme';
import { Provider } from "react-redux";
import renderer from 'react-test-renderer';
import configureMockStore from "redux-mock-store";

import SignInForm from '../../src/pages/Public/SignIn/SignInForm';

const mockStore = configureMockStore();
const store = mockStore({});


const defaultProps = {
  submitting: false,
  handleSubmit: () => {},
  invalid: false,
  initialValues: {},
};
describe("Login Component", () => {

  it('should match the snapshot', () => {
      const wrapper = renderer.create(
        <Provider store={store}>
            <SignInForm />
        </Provider>
    ).toJSON();
      expect(wrapper).toMatchSnapshot();
  });

  it('it renders a <form /> element', () => {
    const wrapper = shallow(
      <Provider store={store}>
         <SignInForm {...defaultProps} />
      </Provider>
    ).dive();
  });
});

Я пытался использовать 

    const emailState = wrapper.state().email;
    const passwordState = wrapper.state().password;
    expect(emailState).toEqual('');
    expect(passwordState).toEqual('');

но я получил ошибку 

error: reactwrapper::state() can only be called on class components

1 Ответ

1 голос
/ 18 июня 2019

Как говорит ошибка, вы не можете позвонить state() на reactWrapper. Из вашего комментария кажется, что вы пытаетесь проверить тип и содержимое пустых полей электронной почты и пароля. Если это так, вы можете find по имени, например: 

const emailField = wrapper.find('[name="email"]')
const passwordField = wrapper.find('[name="password"')

Затем можно при необходимости проверить значения и типы.

...