Question

我正在使用其中包含reduxform的无状态组件。我正在尝试为登录表单编写单元测试以获取输入详细信息以及在单击时模拟表单。但是由于我是玩笑的新手，所以我不知道从哪里开始。

我试图创建快照以及创建模拟存储。

登录表单组件：

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

Answer 1

如错误所述，您无法在state()上调用reactWrapper。从您的评论看来，您似乎正在尝试检查空电子邮件和密码字段的类型和内容。如果是这样，您可以find这样命名：

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

然后您可以根据需要检查值和类型。

如何在Jest中测试Redux表单

1 个答案: