开玩笑测试反应上下文答案

【问题标题】：Jest Testing React Context开玩笑测试反应上下文
【发布时间】：2020-03-02 05:12:48
【问题描述】：

我是测试新手，一段时间以来一直在尝试解决这个问题。虽然我可以找到类似的帖子，但我没有找到任何对我有用的东西。我认为这个问题可能是因为我的 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 并尝试了我能想到的一切来匹配他们所做的事情，但我仍然没有成功。

【问题讨论】：

标签： javascript reactjs unit-testing jestjs enzyme

【解决方案1】：

这应该是直截了当的，无论是酶还是反应测试库。将您的测试组件包装在提供程序组件下。

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

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

使用酶（安装），您可以观察到相同的情况。但是，如果您想手动检查组件的 props，则不能（因为酶只允许检查根组件的 props 而不能检查子组件）并且您不应该。毕竟测试是关于你的组件应该如何表现而不是它需要什么。（react-testing-library原理）

【讨论】：

这不太行。我不完全确定“..allPropsYouNeed”会在这里。我需要传入数组 predefinedRoles 并让该数组作为组件上的道具通过。