Jest + Enzyme：测试 Redux 形式

Question

我的应用程序有很多 redux-form。我正在使用 Jest 和 Enzyme 进行单元测试。但是，我无法测试 redux-form。我的组件是一个登录表单，如：

import { login } from './actions';
export class LoginForm extends React.Component<any, any> {

  onSubmit(values) {
    this.props.login(values, this.props.redirectUrl);
  }

  render() {
    const { handleSubmit, status, invalid } = this.props;

    return (
      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
        <TextField label="Email" name="email">
        <TextField type="password" label="Password" name="password" autoComplete/>
        <Button submit disabled={invalid} loading={status.loading}>
          OK
        </Button>
      </form>
    );
  }
}

const mapStateToProps = (state) => ({
  status: state.login.status,
});

const mapDispatchToProps = { login };

const form = reduxForm({ form: 'login' })(LoginForm);

export default connect(mapStateToProps, mapDispatchToProps)(form);

模拟商店，导入连接组件

redux-form使用 store 来维护表单输入。然后我使用redux-mock-store：

import ConnectedLoginForm from './LoginForm';

const configureStore = require('redux-mock-store');
const store = mockStore({});
const spy = jest.fn(); 

const wrapper = shallow(
  <Provider store={store}>
    <ConnectedLoginForm login={spy}/>
  </Provider>);

wrapper.simulate('submit');
expect(spy).toBeCalledWith();

但是这样，submit没有模拟，我的测试用例失败了：

预期模拟函数已被调用：[] 但它没有被调用。

模拟商店，仅导入 React 组件。

我尝试从测试代码创建 redux 表单：

import { Provider } from 'react-redux';
import ConnectedLoginForm, { LoginForm } from './LoginForm';

const props = {
  status: new Status(),
  login: spy,
};
const ConnectedForm = reduxForm({
  form: 'login',
  initialValues: {
    email: 'test@test.com',
    password: '000000',
  },
})(LoginForm);

const wrapper = shallow(
  <Provider store={store}>
    <ConnectedForm {...props}/>
  </Provider>);

console.log(wrapper.html());

wrapper.simulate('submit');
expect(spy).toBeCalledWith({
  email: 'test@test.com',
  password: '000000',
});

在这种情况下，我仍然收到function not called. 如果我添加console.log(wrapper.html())，则会出现错误：

不变违规：无法在“Connect(ConnectedField)”的上下文或道具中找到“store”。要么将根组件包装在 a 中，要么将“store”作为道具显式传递给“Connect(ConnectedField)”。

我无法在 redux-form 或 redux 或 jest/enzyme 的官方网站上找到文档，甚至在 Google 上也找不到文档。请帮忙，谢谢。

Answer 1

我使用了真实的商店（因为redux-mock-store不支持减速器）和 redux-form 的减速器，它对我有用。代码示例：

import { createStore, Store, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({
  form: formReducer,
});

let store;

describe('Redux Form', () => {

  beforeEach(() => {
    store = createStore(rootReducer);
  });

  it('should submit form with form data', () => {
    const initialValues = {...};
    const onSubmit = jest.fn();
    const wrapper = mount(
      <Provider store={store}>
        <SomeForm
          onSubmit={onSubmit}
          initialValues={initialValues}
        />
      </Provider>
    );

    const form = wrapper.find(`form`);
    form.simulate('submit');

    const expectedFormValue = {...};
    expect(onSubmit).toHaveBeenCalledTimes(1);
    expect(onSubmit.mock.calls[0][0]).toEqual(expectedFormValue);
  });

});

Answer 2

我有类似的问题。答案可以在这里找到https://github.com/airbnb/enzyme/issues/1002。长话短说，您应该将 store 作为道具传递到表单中，并在包装​​器上使用 .dive() 函数。

问候

帕维尔