Jest: компонент меню Testing Toolbar не имитирует событие нажатия

Question

У меня возникают проблемы при тестировании компонента панели инструментов меню, когда он щелкает, он имеет логическое значение open prop.

Итак, я пытаюсь выполнить следующее:

  beforeEach(() => {
    shallowWrapper = shallow(
      <Router>
        <Toolbar />
      </Router>).dive(styles);
    mountWrapper = mount(
      <Router>
        <Toolbar />
      </Router>);
  });

  it('should change state when Menu button is clicked', () => {
    expect(mountWrapper.find('Menu').props().open).toBe(false);
    mountWrapper.find('Menu').simulate('click');
    expect(mountWrapper.find('Menu').props().open).toBe(true);
  });

Мой компонент меню:

<Menu
  id="menu-appbar"
  anchorEl={anchorEl}
  anchorOrigin={{
  vertical: 'top',
  horizontal: 'right',
  }}
  transformOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}
  open={open}
  onClose={this.handleClose}>
  <MenuItem onClick={this.handleClose}>Profile</MenuItem>
  <MenuItem onClick={this.handleClose}>Log out</MenuItem>
</Menu>

Я пробовал оба, мелкий и монтировать, и никто не работает, я получил эту ошибку:

TypeError: Cannot read property '__reactInternalInstance$wcgrpuavu7' of null

Он нашел 'Меню' правильно, но это не так 'т имитировать щелчок, что я делаю не так?

Заранее спасибо.

Answer 1

Я думаю, что ваш фактический onClick находится внутри компонента меню.В модульном тестировании вы должны выполнить модульное тестирование компонентов, изолирующих другие компоненты.

Так что в этом случае ваш подход должен быть следующим:

it('should change state when Menu button is clicked', () => {
expect(shallowWrapper.find('Menu').props().open).toBe(false);
shallowWrapper.instance().handleClose();
// Now here check data modified from handleClose button
});

Не вижу ваш дескриптор.а также.