Reactjs 开玩笑+；访问已连接组件的实例

我在react单元测试中使用jest和酵素时遇到了一个问题。我有一个组件连接到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);

import React，{Component}来自'React'；
从“react jsonschema表单”导入表单；
从“lodash/pick”导入pick；
从“redux”导入{bindActionCreators}；
从“./fields”导入字段；
从“./widgets”导入小部件；
从“../../utils/actionHelper”导入{initContainerActions}；
从“/actions”导入{actions as modelActions}；
从“../../utils/connect”导入{connect}；
从“../reducerRegistry”导入reducerRegistry；
从“./reducer”导入减速机；
类型StateProperties={
roleModelSchema:对象，
roleUiSchema：对象
};
导出类型FormContainerProps={
模型：对象，
乌西玛：对象，
userModelLoad:函数，
isLoading:布尔值，
idContainer:字符串
};
导出类FormContainer扩展组件{
字段={…字段}；
widgets={…widgets}；
建造师（道具）{
超级（道具）；
const{idContainer}=props；
寄存器（idContainer，reducer（idContainer））；
此.state={
roleModelSchema:{}，
roleUiSchema:{}
};
}
componentDidMount=async（）=>{
const{userModelLoad}=this.props；
等待userModelLoad（）；
这个.renderRoleForm（）；
};
renderRoleForm=（）=>{
const{model，uiSchema}=this.props；
constmodelproperties=Object.keys（model.properties）；
const roleUiSchema=pick（uiSchema，modelProperties）；
这是我的国家({
roleUiSchema，
角色模型模式：模型
});
};
渲染=（）=>{
const{roleModelSchema，roleUiSchema}=this.state；
const{isLoading}=this.props；
如果（孤岛加载）{
返回…加载；
}
返回(
提交
取消
);
};
}
const mapDispatchToProps=（调度，道具）=>{
const initializedActions=initContainerActions（modelActions，props.idContainer）；
返回bindActionCreators（初始化操作、分派）；
};
导出默认连接(
（state，props）=>state[props.idContainer]|{}，
mapDispatchToProps
)（集装箱）；

以及测试：

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

const mockStore=configureMockStore（[]）；
const context=React.createContext（）；
description（'检查renderRoleForm更新状态'，（）=>{
它（'渲染而不崩溃'，（）=>{
//使用空状态初始化mockstore
常量initialState={roleUiSchema:{}；
常量存储=模拟存储（初始状态）；
常数包装=浅(
);
const instance=wrapper.instance（）；
renderRoleForm（）；
expect（wrapper.state（）.roleUiSchema）.not.toBeEmpty（）；
});
});

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

我尝试了坐骑，潜水和浅水，同样的问题。 如果你有任何想法：） 谢谢

const wrapper=mount(
);
//
wrapper.instance（）.renderRoleForm（）；

您可以共享整个FormContainer代码吗？请尝试

wrapper.dive（）.instance（）

我决定不使用提供程序，只测试组件，因为当您尝试测试连接的组件时，您需要导入与redux相关的所有内容！！因此，我没有只测试组件，而是测试了所有的redux流。我只是将渲染方法从浅层更改为mount。Mount调用React组件的所有生命周期，之后，我将查找包装器元素所包含的实例，并调用renderRoleForm。

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