Как остановить редукционную форму или отреагировать на изменение htmlFor и id при создании снимков Jest?

Question

У меня есть форма мастера сделали с Redux-форм v6 и это выглядит примерно так:

-

index.js - Вмещает номер страницы в локальном состоянии, подключен к состоянию прикладного уровня

PageOne - обернута с reduxForm декоратора (форма: 'wizForm')

PageTwo - обернута с reduxForm декоратора (форма: 'wizForm')

-

PageOne и PageTwo оба содержат дополнительные компоненты, которые отображают разделы формы (начальные поля, информация о транспортном средстве, информация о драйвере ...), и каждый из этих разделов создает свои собственные компоненты для каждого вопроса в этом разделе.

Поскольку существует множество вложенных компонентов, и я хочу проверить, что PageOne и PageTwo вызывают реквизит, переданный из index.js, я прибегал к использованию функции mount() фермента с фальшивым хранилищем. Я хочу, чтобы MatchSnapshot() с Jest сравнивал ли index.js рендеринг PageOne или PageTwo, после нажатия некоторых кнопок, чтобы вернуться назад и вперед со страниц.

Проблема заключается в том, что когда я создаю моментальные снимки, кроме создания моментального снимка в 16 000 строк, моментальный снимок НИКОГДА не будет соответствовать предыдущему, даже если я ничего не изменю. Я не уверен, что это редукционная форма, которая делает это, или React, но 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(); 

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

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

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

Пример частей снимка, который постоянно меняется:

Answer 1

я ее решил, передавая значение жестко запрограммированный идентификатор из тестов

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") 
    }); 
});