Блог

У меня возникла небольшая проблема, связанная с тем, почему enzyme mount рендерит несколько элементов, когда существует только один.

У меня есть панель закусок из пользовательского интерфейса Material с идентификатором data-test-id, показанным ниже:

          <MySnackbar
                open={true}
                variant="error"
                message={"Test message"}
                onClose={this.handleRequestClose}
                data-test-id="snackbar_isErrorWhileCheckingUpdates"
            />
  

Я протестировал это, как показано ниже:

 it("Should render notification snackbars for information", () => {
        const wrapper = mount(
    <Provider store={mockStore(initialState)}>
        <Updates.WrappedComponent location={location} history={history} match={match} {...props} path={path}/>
    </Provider>;

        expect(wrapper.find('[data-test-id="snackbar_isErrorWhileCheckingUpdates"]')).toHaveLength(1);
    })
  

Приведенный выше тест завершается неудачей, поскольку он находит 2 элемента.
Когда я использую hostNodes() , он возвращает 0 элементов.

Мне интересно, что происходит, и enzyme рендерит несколько компонентов.

РЕДАКТИРОВАТЬ Ниже приведено содержимое when debug() is called

  <WithStyles(MySnackbar) open={false} variant="error" message="There was a network problem whilst checking for updates" onClose={[Function]} data-test-id="snackbar_isErrorWhileCheckingUpdates">
  <MySnackbar classes={{...}} open={false} variant="error" message="There was a network problem whilst checking for updates" onClose={[Function]} data-test-id="snackbar_isErrorWhileCheckingUpdates">
    <WithStyles(ForwardRef(Snackbar)) open={false} autoHideDuration={5000} onClose={[Function]} message={{...}} action={{...}}>
      <ForwardRef(Snackbar) classes={{...}} open={false} autoHideDuration={5000} onClose={[Function]} message={{...}} action={{...}} />
    </WithStyles(ForwardRef(Snackbar))>
  </MySnackbar>
</WithStyles(MySnackbar)>


<MySnackbar classes={{...}} open={false} variant="error" message="There was a network problem whilst checking for updates" onClose={[Function]} data-test-id="snackbar_isErrorWhileCheckingUpdates">
  <WithStyles(ForwardRef(Snackbar)) open={false} autoHideDuration={5000} onClose={[Function]} message={{...}} action={{...}}>
    <ForwardRef(Snackbar) classes={{...}} open={false} autoHideDuration={5000} onClose={[Function]} message={{...}} action={{...}} />
  </WithStyles(ForwardRef(Snackbar))>
</MySnackbar>
  

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

Сделайте аналогично :

 wrapper.find('#yourSelector').hostNodes().text();