我是测试的新手，并且已经尝试解决此问题已有一段时间了。尽管我可以找到类似的帖子，但没有找到对我有用的东西。我认为问题可能是因为我的AppContext设置与其他设置有所不同。

我有一个看起来像这样的AppContext：

const AppContext = React.createContext();

export class AppContextProvider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      predefinedRoles: [
        {role_type : "2nd Project Manager",profile: {user: {first_name : '',last_name: ''}}},{role_type : "Executive Sponsor",{role_type : "CFO or Finance Contact",{role_type : "OI & T Contact",{role_type : "Payroll Contact",{role_type : "Human Resources Contact",last_name: ''}}}
      ],};
  }
  render() {
    return (
      <AppContext.Provider
        value={{
          predefinedRoles: this.predefinedRoles,}}
      >
        {this.props.children}
      </AppContext.Provider>
    );
  }
}

export const withContext = Component => {
  return function AppContextComponent(props) {
    return (
      <AppContext.Consumer>
        {globalState => <Component {...globalState} {...props} />}
      </AppContext.Consumer>
    );
  };
};

我要做的是测试这些Context值是否已正确映射到另一个组件中。

这是我的映射组件：

export const AssignRoles = props => {
  const predefinedRoles = props
  return (
            <div classname={styles.rolesPage} id="assign-roles-roles-page">
          {predefinedRoles.map((roles,id)=> {
              return(<AssignRolesCard organizationRoles={roles} key={id} handleFormOpen={handleFormOpen} updateCreateOrEdit={updateCreateOrEdit}/>)
          })}
        </div>
  )
}

export default withContext(AssignRoles);

我一直在尝试编写一个测试，以检查AssignRoles是否正在渲染，但是却出现失败，提示“无法读取未定义的属性映射”。

我已经使用<AppContext> <AppContext.Provider> <AppContext.Consumer>尝试了以下代码的几种不同组合，但仍然无法使我的测试成功通过。

let predefinedRoles = [
    {name : "2nd Project Manager",assigned : false},{name : "Executive Sponser",assigned: false},{name : "CFO or Finance Contact",{name : "OI&T Contact",{name : "Payroll Contact",{name : "HR Contact",assigned: false}
]

it('renders without crashing',() => {
  const div = document.createElement('div');
  ReactDOM.render(<AppContext value={predefinedRoles}><AssignRoles /></AppContext>,div);
});

我一直在查看React测试库文档here，并尝试我能想到的一切来匹配他们所做的但我仍然没有成功。