reactjs - 带有 MaterialUI 对话框的 ReactJS：使用 Jest Enzyme 浅文本进行测试返回空

Question

我有这个具有 Material UI 对话框的 React 组件

从这里使用全屏对话框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

应用程序是使用创建反应应用程序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但没有帮助

标签： reactjsjestjsmaterial-uienzyme