Модульное тестирование компонента React с использованием диалогового окна пользовательского интерфейса материала

просто столкнулся с той же проблемой. Я просмотрел исходный код, и метод рендеринга компонента Dialog фактически создает экземпляр компонента RenderToLayer. этот компонент ведет себя как портал и разбивает дерево DOM реакции, возвращая ноль в своей функции рендеринга и вместо этого добавляя непосредственно к телу.

К счастью, компонент RenderToLayer принимает опору render, которая, по сути, позволяет компоненту передать порталу функцию, которая будет вызываться, когда он находится в цикле рендеринга. Это означает, что мы можем сами вручную инициировать это событие. Я признаю, что это не идеально, но после нескольких дней копаний, пытающихся найти решение для этого взлома, я бросаю это полотенце и пишу свои тесты следующим образом:

var component = TestUtils.renderIntoDocument(<UserInteractions.signupDialog show={true}/>)
var dialog = TestUtils.renderIntoDocument(component.refs.dialog.renderLayer())
var node = React.findDOMNode(dialog)

и вот как выглядит мой UserInteractions.signupDialog:

exports.signupDialog = React.createClass({
...
  render: function() {
    var self = this;

    return (
      <div>
        <Dialog
          ref='dialog'
          title="Signup"
          modal={false}
          actions={[
            <Button
              label="Cancel"
              secondary={true}
              onTouchTap={self.__handleClose}
            />,
            <Button
              label="Submit"
              primary={true}
              keyboardFocused={true}
              onTouchTap={self.__handleClose}
            />
          ]}
          open={self.props.show}
          onRequestClose={self.__handleClose}
          >
          <div className='tester'>ham</div>
          <TextField id='tmp-email-input' hintText='email' type='text'/>
        </Dialog>
      </div>
    )
  }
})

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

Я определенно рекомендую настроить отладчик в вашем тестовом стеке, если вы собираетесь и дальше использовать Material ui. В таких вещах не так много помощи. Вот как выглядит мой сценарий отладки:

// package.json
{
  ...
  "scripts": {
    "test": "mocha --compilers .:./test/utils/compiler.js test/**/*.spec.js",
    "debug": "mocha debug --compilers .:./test/utils/compiler.js test/**/*.spec.js"
  }
}

и теперь вы можете использовать npm test для запуска тестов мокко и npm run debug для входа в отладчик. Оказавшись в отладчике, он немедленно остановится и будет ждать, пока вы введете точки останова. На этом этапе введите c, чтобы продолжить. Теперь вы можете размещать операторы debugger; в любом месте вашего кода, чтобы сгенерировать точку останова, на которую будет реагировать отладчик. Как только он обнаружит вашу точку останова, он остановится и позволит вам задействовать ваш код, используя локальную область видимости. На этом этапе введите repl, чтобы войти в локальную область действия вашего кода и получить доступ к вашим локальным переменным.

Возможно, вам не понадобился отладчик, но, возможно, кому-то это пригодится. Удачи, удачного кодирования!

Решил это следующим образом:

/*
* I want to verify that when i click on cancel button my showModal state is set * to false
*/

//shallow render my component having Dialog
const wrapper= shallow(<MyComponent store={store} />).dive();

//Set showModal state to true
wrapper.setState({showModal:true});

//find out cancel button with id 'cancelBtn' object from actions and call onTouchTap to mimic button click
wrapper.find('Dialog').props().actions.find((elem)=>(elem.props.id=='cancelBtn')).props.onTouchTap();

//verify that the showModal state is set to false
expect(wrapper.state('showModal')).toBe(false);

Я столкнулся с той же проблемой и решил ее так:

const myMock = jest.genMockFunction();
const matcherComponent = TestUtils.renderIntoDocument(
      <MatcherComponent onClickCancel={myMock} activAction/>
        );
const raisedButton = TestUtils.findRenderedComponentWithType(
            matcherComponent, RaisedButton);

TestUtils.Simulate.click(ReactDOM.findDOMNode(raisedButton).firstChild);

expect(myMock).toBeCalled();

Он отлично работает для меня. Однако я все еще борюсь с Simulate.change

Решение от avocadojesus отличное. Но у меня есть одно дополнение. Если вы попытаетесь применить это решение и получите сообщение об ошибке:

ОШИБКА: 'Предупреждение: сбойный тип контекста: контекст muiTheme помечен как требуемый в DialogInline, но его значение равно undefined.

Вы должны изменить его код следующим образом:

var component = TestUtils.renderIntoDocument(
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <UserInteractions.signupDialog show={true}/>
  </MuiThemeProvider>
);

var dialogComponent = TestUtils.findRenderedComponentWithType(component, UserInteractions.signupDialog);

var dialog = TestUtils.renderIntoDocument(
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    {dialogComponent.refs.dialog.renderLayer()}
  </MuiThemeProvider>
);

var node = React.findDOMNode(dialog);

Материальный интерфейс UI включает 2 ферментных метода. Вам необходимо использовать createMount или createShallow с опцией погружения https://material-ui.com/guides/testing/#createmount-options-mount