使用 jest 进行 Redux 表单测试

Posted 2023-02-22

【中文标题】使用 jest 进行 Redux 表单测试

【英文标题】：Redux form test using jest

【发布时间】：2018-04-06 13:34:02

【问题描述】：

我正在尝试测试一些类似于此文件的代码的 redux 表单提交。

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();
);

我面临两个问题。

当我打印用户名时，我看不到通过模拟更新的更新值。

其次，expect 子句失败。如何确保我的代码中的 userLogin 函数被调用。

预期的模拟函数已被调用。

【参考方案1】：

这就是我使用 JEST 快照测试来测试我的 redux-forms 的方式。

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

【讨论】：

感谢您的意见。有没有办法使用 mockStore 来模拟 redux-form？

你的意思是，你想模拟一个 redux-form 来测试一个容器？我认为使用浅我猜是可能的。但是，shallow 不会测试我认为的表单的内部组件。我还没试过。如果您在旅途伙伴中找到更好的方法，请告诉我！

谁有酶的解决方案？