reactjs - Jest + enzyme 访问连接组件的实例

Question

我在使用 Jest 和 enzyme 进行 react 单元测试时遇到问题。我有一个连接到 redux 的组件，我想测试组件中更新状态的方法。这是我的组件:

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

我遇到的错误:TypeError:instance.renderRoleForm不是一个函数

我尝试过安装、潜水，但遇到同样的问题。 如果你有任何想法:) 谢谢

Answer 1

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