时间戳

首页 > 解决方案 > 开玩笑测试反应上下文

javascript - 开玩笑测试反应上下文

问题描述

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

标签： javascriptreactjsunit-testingjestjsenzyme

解决方案

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

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

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

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

推荐阅读