Unit testing 在创建Jest快照时，如何停止redux表单或对更改htmlFor和id作出反应？

我有一个用redux forms v6制作的向导表单，它看起来像：

--

index.js-保存本地状态的页码，连接到应用程序级状态

PageOne-用reduxForm装饰器包装（形式：“wizForm”）

第二页-用reduxForm装饰器包装（形式：“wizForm”）

--

第1页和第2页都包含呈现表单各部分（初始字段、车辆信息、驾驶员信息…）的附加组件，这些部分中的每个部分都为该部分中的每个问题呈现各自的组件

因为有很多嵌套组件，我想测试PageOne和PageTwo调用index.js传递的props，所以我求助于使用带有假存储的Enzyme的mount（）函数。我想将snapshot（）与Jest相匹配，以比较index.js是呈现PageOne还是PageTwo，然后单击某些按钮从页面来回切换

问题是，当我创建快照时，除了创建16000行快照之外，即使我不做任何更改，快照也永远不会与上一个快照匹配。我不确定是redux表单在做这件事还是做出反应，但htmlFor和id在快照之间不断变化，测试一次又一次

我们也使用css模块，但我不认为这是问题的根源，我们也配置了Jest来处理css模块，将“moduleNameWrapper”修改为mock.css文件。有人知道如何解决这个问题吗？或者我应该去哪里找

测试：

describe('<VehicleAddition />', () => {
  let props;
  beforeEach(() => {
    props = {
      ...,
    };
  });

it('Renders initially', () => {
    const component = shallow(<VehicleAddition {...props} />);
    expect(toJson(component)).toMatchSnapshot();
  });

  it('Renders <PageTwo> when <PageOne> form is submitted', () => {
    const component = shallow(<VehicleAddition {...props} />);
    expect(toJson(component)).toMatchSnapshot();
    component.find('ReduxForm') // reduxForm HOC wraps the <form> in a <ReduxForm> component
      .first()
      .simulate('submit');
    expect(toJson(component)).toMatchSnapshot();
    expect(component.state().page).toEqual(2);
  });

  it('PageTwoStuffs', () => {
    // Render the form, click 'next', assert it's page two
    // click 'previous'
    jest.enableAutomock();
    const store = createStore(
      combineReducers({
        route: jest.fn(() => Immutable.fromJS({})),
        language: jest.fn(() => Immutable.fromJS({})),
        global: jest.fn(() => Immutable.fromJS({})),
        form: formReducer,
      }),
      Immutable.fromJS({}),
    );
    const component = mount(
      <Provider store={store}>
        <VehicleAddition {...props} />
      </Provider>
    );

    // CAN'T check the state of <VehicleAddition /> because it can only be done on root component, says the error message.
    expect(toJson(component)).toMatchSnapshot();

描述（“”，（）=>{
让道具；
在每个之前（（）=>{
道具={
...,
};
});
它（'最初呈现'，（）=>{
常量分量=浅（）；
expect（toJson（component））.toMatchSnapshot（）；
});
它（'提交表单时呈现'，（）=>{
常量分量=浅（）；
expect（toJson（component））.toMatchSnapshot（）；
find（'ReduxForm'）//ReduxForm HOC将
.first（）
.模拟（“提交”）；
expect（toJson（component））.toMatchSnapshot（）；
expect（component.state（）.page）.toEqual（2）；
});
它（'PageTwoStuff'，（）=>{
//呈现表单，单击“下一步”，断言它是第二页
//单击“上一步”
jest.enableAutomock（）；
const store=createStore(
组合传感器({
路由：jest.fn（（）=>Immutable.fromJS（{}）），
语言：jest.fn（（）=>Immutable.fromJS（{}）），
全局：jest.fn（（）=>Immutable.fromJS（{}）），
形式：formReducer，
}),
Immutable.fromJS（{}），
);
常量组件=挂载(
);
//“无法检查的状态，因为它只能在根组件上执行，”错误消息说。
expect（toJson（component））.toMatchSnapshot（）；

index.js：

export class VehicleAddition extends React.Component { // eslint-disable-line
  constructor(props) {
    super(props);
    this.state = {
      page: 1,
    };
  }

nextPage = () => {
    this.setState({ page: this.state.page + 1 });
  }

previousPage = () => {
    this.setState({ page: this.state.page - 1 });
}


render() {
    return (
      <div>
        {page === 1 &&
          <PageOne
            {...this.props}
          />
        }
        {page === 2 &&
          <PageTwo
            {...this.props}
          />
        }
      </div>
    );
  }
}

导出类VehicleAddition扩展React.Component{//eslint禁用行
建造师（道具）{
超级（道具）；
此.state={
页码：1，
};
}
下一页=（）=>{
this.setState（{page:this.state.page+1}）；
}
上一页=（）=>{
this.setState（{page:this.state.page-1}）；
}
render（）{
返回(
{page==1&&
}
{page==2&&
}
);
}
}

PageOne.js

class PageOne extends React.Component { // eslint-disable-line

render() {
    const {
       ...
    } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <InitialFields
            autoPolicies={autoPolicies}
            changeField={this.changeField}
            getFormValues={getFormValues}
            policies={policies}
            primary={primary}
          />
          <VehicleBeingAddedFields
            changeField={this.changeField}
            getFormValues={getFormValues}
            fetchVehMakes={fetchVehMakes}
            fetchVehModels={fetchVehModels}
            policies={policies}
            vehMakes={vehMakes}
            vehModels={vehModels}
          />
...
    <div className="btn-group btn-group-float-right">
          <button
            type="submit"
            onClick={this.handleClick}
            disabled={pristine || submitting}
            className="btn-primary"
          >
            Next
          </button>
        </div>
      </form>
    );
  }
}

class PageOne扩展了React.Component{//eslint禁用行
render（）{
常数{
...
}=这是道具；
返回(
...
下一个
);
}
}

PageTwo.js：

class PageTwo extends React.Component { // eslint-disable-line
  render() {
    const {
      ...
    } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        ...
        <div className="btn-group btn-group-float-right">
          <button type="button" className="btn" onClick={previousPage}>Previous</button>{' '}
          <button type="submit" disabled={pristine || submitting} className="btn-primary">Submit</button>
        </div>
      </form>
    );
  }
}

class PageTwo扩展了React.Component{//eslint禁用行
render（）{
常数{
...
}=这是道具；
返回(
...
以前的{'}
提交
);
}
}

快照中不断更改的部分示例：

---

我通过从测试用例中传递一个硬编码的id值来解决这个问题

import React from 'react';
import renderer from 'react-test-renderer';
import { reduxForm } from 'redux-form';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { mount } from 'enzyme'
import TodoItem from './TodoItem';
import injectTapEventPlugin from 'react-tap-event-plugin';

function setup() {
    const spy = jest.fn();
    const store = createStore(() => ({}));

    const Decorated = reduxForm({ form: 'testForm' })(TodoItem);
    const props = {
        remove: jest.fn(),
        TodoItemReduxFormInitialName: "fullName",
        snapshotTestId:"4"
    }
    const mockedComponent = <Provider store={store}>
                                <Decorated {...props} />
                            </Provider>;

    const enzymeWrapper = mount(mockedComponent)

    injectTapEventPlugin();

    return {
        props,
        mockedComponent,
        enzymeWrapper
    }
}
describe('TodoItem Component', () => {
    it('should render the snapshot', () => {
        const {mockedComponent} = setup()
        const tree = renderer.create(
            mockedComponent
        ).toJSON();
        expect(tree).toMatchSnapshot();
    });


    //not required as snapshot testing covers it
    it('should render Number', () => {
        const {enzymeWrapper} = setup()
        const fieldProps = enzymeWrapper.find('Field').at(0).props();
        expect(fieldProps.hintText).toEqual('Item Number');
        expect(fieldProps.name).toEqual('fullName.itemNumber');
    });


    //not required as snapshot testing covers it
    it('should render remove button', () => {
        const {enzymeWrapper} = setup()
        const button = enzymeWrapper.find('RaisedButton').at(0).props();
        expect(button.label).toEqual("remove")
    });
});

从“React”导入React；
从“反应测试渲染器”导入渲染器；
从'redux form'导入{reduxForm}；
从“redux”导入{createStore}；
从'react redux'导入{Provider}；
从“酶”导入{mount}
从“/TodoItem”导入TodoItem；
从“react-tap事件插件”导入injectTapEventPlugin；
函数设置（）{
const spy=jest.fn（）；
conststore=createStore（（）=>（{}））；
const decorded=reduxForm（{form:'testForm'}）（TodoItem）；
常量道具={
删除：jest.fn（），
TodoItemReduxFormInitialName:“全名”，
快照测试：“4”
}
常量mockedComponent=
;
const enzymeWrapper=mount（mockedComponent）
injectTapEventPlugin（）；
返回{
道具，
模拟组件，
酶包装
}
}
描述（'TodoItem组件'，（）=>{
它（'应该呈现快照'，（）=>{
const{mockedComponent}=setup（）
const tree=renderer.create(
模拟组件
).toJSON（）；
expect（tree.toMatchSnapshot（）；
});
//不需要，因为快照测试涵盖了它
它（'应该呈现数字'，（）=>{
const{enzymeWrapper}=setup（）
const fieldProps=enzymeWrapper.find（'Field'）.at（0.props（）；
expect（fieldProps.hintText）.toEqual（“项目编号”）；
expect（fieldProps.name）.toEqual（'fullName.itemNumber'）；
});
//不需要，因为快照测试涵盖了它
它（'应该呈现删除按钮'，（）=>{
const{enzymeWrapper}=setup（）
const button=enzymewapper.find（'RaisedButton'）。位于（0.props（）；
expect（按钮标签）。toEqual（“删除”）
});
});