Jact-тестирование

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

Я хочу проверить, правильно ли эти значения контекста отображаются в другом компоненте.

Здесьмой компонент сопоставления:

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 рендеринг, но я получаю ошибку, говорящую «не могу прочитать карту свойств неопределенного».

IЯ пробовал несколько различных комбинаций приведенного ниже кода, используя <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Библиотека документов здесь и пытается все, что я могу придумать, чтобы соответствовать тому, что они сделали, но мне все еще не удалось.

Answer 1

Это должно быть прямолинейно, независимо от того, тестирует ли энзим или реагирует библиотека. Оберните ваш тестовый компонент в компонент поставщика.

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

Используя реагирующую библиотеку, вы проверяете, визуализировались ли нужные действия или элемент с нужными вам значениями контекста (например, изменился ли цвет, изменился ли рендеринг и т. Д.).

С ферментом (креплением) вы можете наблюдать то же самое. Но если вы хотите вручную проверить реквизиты компонента, вы не можете (так как фермент позволяет только проверять реквизиты корневого компонента, а не потомков), и вы не должны . После всего тестирования речь идет о том, как должен вести себя ваш компонент, а не о том, что требуется. (принцип реагирующей библиотеки тестирования)