ReactJS с диалогом MaterialUI: тестирование с использованием поверхностного текста Jest Enzyme возвращает пустое значение - PullRequest
Новая
       17

ReactJS с диалогом MaterialUI: тестирование с использованием поверхностного текста Jest Enzyme возвращает пустое значение

0 голосов
/ 03 мая 2019

У меня есть этот компонент React с диалогом Material UI

Использование полноэкранного диалога здесь https://material -ui.com / demos / dialogs / 

import React from 'react';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import withMobileDialog from '@material-ui/core/withMobileDialog';

class Template extends React.Component {
  render() {
    const { fullScreen } = this.props;
    return (
      <div>
        <p>count: 0</p>
        { <Dialog
          fullScreen={fullScreen}
          open={true}
          aria-labelledby="responsive-dialog-title"
        >
          <DialogTitle id="responsive-dialog-title">
            Title Here
          </DialogTitle>
          <DialogContent>
            <DialogContentText>Text Here</DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button id='cnfbtn'>Confirm</Button>
            <Button id='closebtn' autoFocus>Cancel</Button>
          </DialogActions>
        </Dialog> }
      </div>
    );
  }
}

Template.propTypes = {
  fullScreen: PropTypes.bool.isRequired,
};

export default withMobileDialog()(Template);

и пытается запустить этот тест на нем 

    import React from 'react'; // eslint-disable-line no-unused-vars
    import { shallow } from 'enzyme';
    import Template from '../common/template';

    describe('template.js', () => {
      it('Renders template success ', () => {
        const wrapper = shallow(<Template />);
        console.log('wrapper:::::', wrapper);
        console.log('wrapper.text:::::', wrapper.text());
        const text = wrapper.find('p').text();
        expect(wrapper.length).toEqual(1);
        expect(text).toContain('count: 0');
      });
    });

Получение следующей ошибки. 

     ● Console

    console.log src/components/__tests__/template.js:8
      wrapper::::: ShallowWrapper {}
    console.log src/components/__tests__/template.js:9
      wrapper.text::::: <WithWidth(WithMobileDialog) />

  ● template.js › Renders template success

    Method “text” is meant to be run on 1 node. 0 found instead.

       8 |     console.log('wrapper:::::', wrapper);
       9 |     console.log('wrapper.text:::::', wrapper.text());
    > 10 |     const text = wrapper.find('p').text();
         |                                    ^
      11 |     expect(wrapper.length).toEqual(1);
      12 |     expect(text).toContain('count: 0');
      13 |   });

Выполнение теста с использованием этой команды 

eslint src && react-scripts test --env=jsdom --coverage

Приложение создано с помощью приложения create response https://github.com/facebook/create-react-app

"@types/jest": "^23.3.12",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"react-scripts": "2.1.3",
"react": "^16.7.0",

попробуйте использовать https://airbnb.io/enzyme/docs/api/ShallowWrapper/dive.html, но не помогло

...