reactjs - 用 Enzyme 测试简单的 Redux-Form(值(value)在哪里？？)

Question

我有最简单的 redux-form 连接到 redux 示例:

import * as React from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';

class TestForm extends React.PureComponent {
    render() {
        return (
            <form>
                <Field component={Input} name={'testField'}/>
            </form>
        );
    }
}

class Input extends React.PureComponent {
    render(): React.Node {
        let { input } = this.props;
        // input = {name: 'testField', value: 'test value'};
        return (
                <input name={input.name} value={input.value} type='text' onChange={()=>1}/>
        );
    }
}

const mapStateToProps = ({ testForm }) => {
    return {
        initialValues: testForm,
    };
};

export const TestFormWithReduxForm = reduxForm({ form: 'test form'})(TestForm);

export default connect(mapStateToProps)(TestFormWithReduxForm);

请注意以下事项:

• 我有自己的自定义输入(称为输入)
• 我正在连接到 reduxForm，然后再连接到 redux。
• 传入的初始值应包含“名称”和“值”。

我有以下测试(Jest+Enzyme)

import React from 'react';
import { Provider } from 'react-redux';
import Enzyme, { mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import configureStore from 'redux-mock-store';

import TestForm from './TestForm';

Enzyme.configure({ adapter: new Adapter() });

describe('Redux Form Test', () => {
    let wrapper;

    let mockStoreData = {
        testForm: {
            testField: 'test value',
        },
    };

    const mockStore = configureStore();
    const store = mockStore(mockStoreData);

    beforeEach(() => {
        wrapper = mount(
            <Provider store={store}>
                    <TestForm />
            </Provider>
        );
    });

    it('Check Value', () => {
        let inputs = wrapper.find('input');
        expect(inputs.at(0).prop('name')).toBe('testField'); //OK!!!
        expect(inputs.at(0).prop('value')).toBe('test value'); //empty string!!
    });
});

Jest 测试将带有“testField”(及其值)的“testForm”对象传递到存储中。

正如预期的那样，第一个输入的名称是“testField”，但是“值”为空(即空字符串)。

这不是预期的，因为如果我要在普通页面中渲染组件，则会出现“测试值”。

所以这里似乎有什么东西坏了。我不确定它是否与 redux-form 或 enzyme 有关，但 redux-form Field 对象似乎正在拦截传递到 Input 对象中的属性。

我开始质疑是否可能测试redux形式。

Answer 1

我不确定为什么您想要也不需要测试 Redux Form 的功能，因为它已经被创建者/维护者测试过。然而，redux-mock-store似乎是为 unit 制作的仅测试(您将模拟 middlewares 并调用 store.dispatch(actionType) 并期望调用 action)。它不处理reducer副作用也不跟踪state中的变化。

在上述情况下，您只需对自定义 Input 进行单元测试即可。组件，因为这是唯一与标准 redux 表单不同的组件。

也就是说...对于 integration测试时，您需要使用真实的 store包含 redux-form 的 reducer和你的field状态。

工作示例:https://codesandbox.io/s/zl4p5w26xm (我已经包含了 Form 集成测试和 Input 单元测试 - 正如您所注意到的，Input 单元测试涵盖了您的大部分测试需求)

containers/Form/Form.js

import React, { Component } from "react";
import { Form, Field, reduxForm } from "redux-form";
import { connect } from "react-redux";
import Input from "../../components/Input/input";

const isRequired = value => (!value ? "Required" : undefined);

class SimpleForm extends Component {
  handleFormSubmit = formProps => {
    alert(JSON.stringify(formProps, null, 4));
  };

  render = () => (
    <div className="form-container">
      <h1 className="title">Text Field</h1>
      <hr />
      <Form onSubmit={this.props.handleSubmit(this.handleFormSubmit)}>
        <Field
          className="uk-input"
          name="testField"
          component={Input}
          type="text"
          validate={[isRequired]}
        />
        <button
          type="submit"
          className="uk-button uk-button-primary uk-button-large submit"
          disabled={this.props.submitting}
        >
          Submit
        </button>
        <button
          type="button"
          className="uk-button uk-button-default uk-button-large reset"
          disabled={this.props.pristine || this.props.submitting}
          onClick={this.props.reset}
          style={{ float: "right" }}
        >
          Clear
        </button>
      </Form>
    </div>
  );
}

export default connect(({ field }) => ({
  initialValues: { [field.name]: field.value }
}))(
  reduxForm({
    form: "SimpleForm"
  })(SimpleForm)
);

容器/Form/__test__/Form.js

import React from "react";
import { Provider } from "react-redux";
import { mount } from "enzyme";
import SimpleForm from "../Form";
import store from "../../../store/store";

const wrapper = mount(
  <Provider store={store}>
    <SimpleForm />
  </Provider>
);

describe("Redux Form Test", () => {
  it("renders without errors", () => {
    expect(wrapper.find(".form-container")).toHaveLength(1);
  });

  it("fills the input with a default value", () => {
    expect(wrapper.find("input").prop("name")).toBe("testField");
    expect(wrapper.find("input").prop("value")).toBe("Test Value");
  });

  it("updates input value when changed", () => {
    const event = { target: { value: "Test" } };
    wrapper.find("input").simulate("change", event);
    expect(wrapper.find("input").prop("value")).toBe("Test");
  });

  it("resets the input value to defaults when the Clear button has been clicked", () => {
    wrapper.find("button.reset").simulate("click");
    expect(wrapper.find("input").prop("value")).toBe("Test Value");
  });
});

stores/stores.js(为简单起见，我将 reducers 和 store 集中到一个文件中)

import { createStore, combineReducers } from "redux";
import { reducer as formReducer } from "redux-form";

const initialValues = {
  name: "testField",
  value: "Test Value"
};

const fieldReducer = (state = initialValues, { type, payload }) => {
  switch (type) {
    default:
      return state;
  }
};
const reducer = combineReducers({
  field: fieldReducer,
  form: formReducer
});

export default createStore(reducer);

注意:除了使用 initialValues ，隐藏在文档中，还有其他三种更新字段值的方法:利用 redux-form 的 reducer.plugin并调度一个操作来更新表单，或者使用 this.props.intialize({ testField: "Test Value" });与 enableReinitialize: true和keepDirtyOnReinitialize: true, ，或使用 this.props.change("SimpleForm", { testField: "Test Value" }); 。需要注意的是，有时 mapStateToProps是异步的。