jest + доступ фермента к экземпляру подключенного компонента

Question

У меня проблема с использованием шуток и энзимов для моего юнит-тестирования на реакции.У меня есть компонент, связанный с Redx, и я хочу проверить метод в моем компоненте, который обновляет состояние.Вот мой компонент:

import React, {Component} from 'react';
import Form from 'react-jsonschema-form';
import pick from 'lodash/pick';
import {bindActionCreators} from 'redux';
import fields from './fields';
import widgets from './widgets';

import {initContainerActions} from '../../utils/actionHelper';
import {actions as modelActions} from './actions';
import {connect} from '../../utils/connect';
import reducerRegistry from '../ReducerRegistry';
import reducer from './reducer';

type StateProperties = {
  roleModelSchema: Object,
  roleUiSchema: Object
};

export type FormContainerProps = {
  model: Object,
  uiSchema: Object,
  userModelLoad: Function,
  isLoading: boolean,
  idContainer: string
};

export class FormContainer extends Component<FormContainerProps, StateProperties> {
  fields = {...fields};

  widgets = {...widgets};

  constructor(props) {
    super(props);
    const {idContainer} = props;
    reducerRegistry.register(idContainer, reducer(idContainer));

    this.state = {
      roleModelSchema: {},
      roleUiSchema: {}
    };
  }

  componentDidMount = async () => {
    const {userModelLoad} = this.props;
    await userModelLoad();
    this.renderRoleForm();
  };

  renderRoleForm = () => {
    const {model, uiSchema} = this.props;
    const modelProperties = Object.keys(model.properties);
    const roleUiSchema = pick(uiSchema, modelProperties);

    this.setState({
      roleUiSchema,
      roleModelSchema: model
    });
  };

  render = () => {
    const {roleModelSchema, roleUiSchema} = this.state;
    const {isLoading} = this.props;

    if (isLoading) {
      return <div>...Loading</div>;
    }
    return (
      <div className="container">
        <div className="columns">
          <div className="column col-12">
            <Form schema={roleModelSchema} uiSchema={roleUiSchema} liveValidate fields={this.fields} widgets={this.widgets}>
              <div>
                <button type="submit" className="btn btn-primary">
                  Submit
                </button>
                <button type="button">Cancel</button>
              </div>
            </Form>
          </div>
        </div>
      </div>
    );
  };
}

const mapDispatchToProps = (dispatch, props) => {
  const initializedActions = initContainerActions(modelActions, props.idContainer);
  return bindActionCreators(initializedActions, dispatch);
};

export default connect(
  (state, props) => state[props.idContainer] || {},
  mapDispatchToProps
)(FormContainer);

И тест:

const mockStore = configureMockStore([]);
const context = React.createContext();

describe('Check if renderRoleForm update state', () => {
it('renders without crashing', () => {
// Initialize mockstore with empty state
const initialState = {roleUiSchema: {}};
const store = mockStore(initialState);
const wrapper = shallow(
  <Provider store={store} context={context}>
    <FormContainer model={model} uiSchema={uiSchema} context={context}
/>
  </Provider>
);

const instance = wrapper.instance();
instance.renderRoleForm();

expect(wrapper.state().roleUiSchema).not.toBeEmpty();
});
});

У меня ошибка: Ошибка типа: instance.renderRoleForm не является функцией

Я пробовал с маунтом, нырял с мелким и той же проблемой.Если у вас есть идеи :) Спасибо

Answer 1

const wrapper = mount(
<Provider store={store} context={context}>
<FormContainer model={model} uiSchema={uiSchema} context={context} />
</Provider> );
//
wrapper.instance().renderRoleForm();