Question

我是测试的新手，并且已经尝试解决此问题已有一段时间了。尽管我可以找到类似的帖子，但没有找到对我有用的东西。我认为问题可能是因为我的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", profile: {user: {first_name : '', last_name: ''}}}, 
        {role_type : "CFO or Finance Contact", profile: {user: {first_name : '', last_name: ''}}},
        {role_type : "OI & T Contact", profile: {user: {first_name : '', last_name: ''}}},
        {role_type : "Payroll Contact", profile: {user: {first_name : '', last_name: ''}}},
        {role_type : "Human Resources Contact", profile: {user: {first_name : '', 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", assigned: false},
    {name : "OI&T Contact", assigned: false},
    {name : "Payroll Contact", assigned: false},
    {name : "HR Contact", assigned: false}
]

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

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

Answer 1

无论是酶测试库还是反应测试库，都应该很简单。将测试组件包装在提供程序组件下。

const componentUnderTest = <AppContextProvider {..allPropsYouNeed}> <Foo /> </AppContextProvider>

使用react-testing-library，您可以测试所需的动作或元素是否已通过所需的传递的上下文值进行渲染（例如颜色是否更改或渲染是否不同等）。

使用酶（安装），您可以观察到同样的情况。但是，如果您想手动检查组件的属性，则不能（因为酶只允许检查根组件的属性，而不是子项），而您不应该。毕竟，测试是关于组件的行为方式而不是组件的功能。（反应测试库原则）

开玩笑地测试React上下文

1 个答案: