React-testing-library: Material UI components not rendering

[AirborneEagle]

• react-testing-library version: 5.2.3
• react version: 16.4.0
• node version:
• npm (or yarn) version: 6.4.1

Relevant code or config:

import React from "react";
import PropTypes from "prop-types";
import SweetAlert from "react-bootstrap-sweetalert";
import withStyles from "@material-ui/core/styles/withStyles";
import styles from "../../assets/jss/material-dashboard-pro-react/components/buttonStyle.jsx";


export const ActionAlert = ({...props}) => {
    const {
        type,
        message,
        onConfirm,
        onCancel,
        classes
    } = props;

    let alert = 'NA';
    const errorAlert = <SweetAlert
        danger
        style={{marginTop: "-200px"}}
        title="Error"
        onConfirm={onConfirm}
        confirmBtnCssClass={
            classes.button + " " + classes.success
        }
        confirmBtnText="OK"
    >
        {message}
    </SweetAlert>;

    const successAlert = <SweetAlert
        success
        style={{display: "block", marginTop: "-200px"}}
        title={"Success!"}
        onConfirm={onConfirm}
        showConfirm={false}
    >
        {message}
    </SweetAlert>;

    const confirmAlert = <SweetAlert
            warning
            style={{display: "block", marginTop: "-200px"}}
            title="Are You Sure?"
            onConfirm={onConfirm}
            onCancel={onCancel}
            confirmBtnCssClass={
                classes.button + " " + classes.success
            }
            cancelBtnCssClass={
                classes.button + " " + classes.danger
            }
            confirmBtnText="Yes, Leave"
            cancelBtnText="Cancel, Stay"
            showCancel
        >
            Unsaved changes will be lost
        </SweetAlert>;

    switch (type) {
        case 'error':
            alert = errorAlert;
            break;
        case 'success':
            setTimeout(onConfirm, 1500);
            alert = successAlert;
            break;
        case 'confirm':
            alert = confirmAlert;
            break;
        default:
            break;
    }
    return <div>{alert}</div>
};

ActionAlert.propTypes = {
    type: PropTypes.oneOf(['confirm', 'error', 'loading', 'success']).isRequired,
    message: PropTypes.string,
    onConfirm: PropTypes.func.isRequired,
    onCancel: PropTypes.func,
    classes: PropTypes.object
};

export default withStyles(styles)(ActionAlert);

import React from 'react';
import PropTypes from "prop-types";
import SweetAlert from "react-bootstrap-sweetalert";
import withStyles from "@material-ui/core/styles/withStyles";
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import CardHeader from "../../components/Card/CardHeader.jsx";
import CardText from "../../components/Card/CardText.jsx";

import createRecordStyles from "../../assets/jss/material-dashboard-pro-react/views/createRecordStyle"
import {invertCamelCase} from "../../util/UtilFunctions";
import DialogActions from "@material-ui/core/DialogActions/DialogActions";
import CircularProgress from "@material-ui/core/CircularProgress/CircularProgress";
import ActionAlert from "./ActionAlert";

export const ActionDialog = ({...props}) => {
// class ActionDialog extends React.Component {
    // constructor(props) {
    //     super(props);
    //     this.state = {
    //
    //     };
    // }
    //
    //
    // areYouSure = () => {
    //
    // };
    //
    // render() {
        const {
            classes,
            content,
            actions,
            actionState,
            label,
            isOpen
        } = props;

        switch (actionState) {
            case "error":
                break;
            case "loading":
                break;
            default:
                break;
        }
        return (
            <div>
                <Dialog
                    PaperProps={{
                        classes: {
                            root: classes.overflowing
                        }
                    }}
                    style={{backgroundColor: 'transparent', overflow: 'visible'}}
                    fullWidth={true}
                    maxWidth={'md'}
                    open={isOpen}
                    onClose={() => {}}
                    aria-labelledby="form-dialog-title"
                    disableBackdropClick={true}
                >
                    <CardHeader
                        style={{overflow: 'visible'}}
                        color="primary" text>
                        <CardText color="primary">
                            <h4 className={classes.cardTitle}>{label}</h4>
                        </CardText>
                    </CardHeader>
                    <DialogContent>
                        {content}
                    </DialogContent>
                    <DialogActions>
                        {actions}
                    </DialogActions>
                    <ActionAlert type={"error"} onConfirm={() => {
                    }}/>
                </Dialog>
            </div>
        );
    // }
};

ActionDialog.propTypes = {
    isOpen: PropTypes.bool.isRequired,
    content: PropTypes.node.isRequired,
    actions: PropTypes.array,
    actionState: PropTypes.oneOf(['error', 'loading', 'success', '']),
    label: PropTypes.string,
    classes: PropTypes.object,
};
export default withStyles(createRecordStyles)(ActionDialog)



md5-b72776ce3cb6ca8ee1a0778afee9fb17



import ActionAlert from "./ActionAlert";
import React from "react";
import {render, fireEvent} from "react-testing-library";

describe('ActionAlert', () => {

    describe('Type Confirm', () => {
        const mockOnConfirm = jest.fn(() => {
        });
        const mockOnCancel = jest.fn(() => {
        });
        // const {getByText} = render(<ActionAlert type={"confirm"} onConfirm={mockOnConfirm} onCancel={mockOnCancel}/>);
        it('should load buttons on confirm type', function () {
            const {getByText} = render(<ActionAlert type={"confirm"} onConfirm={mockOnConfirm} onCancel={mockOnCancel}/>);
            getByText('Yes, Leave');
            getByText('Cancel, Stay');
        });
        it('should cancel when clicked', function () {
            const {getByText} = render(<ActionAlert type={"confirm"} onConfirm={mockOnConfirm} onCancel={mockOnCancel}/>);
            getByText('Cancel, Stay').click();
            expect(mockOnCancel).toHaveBeenCalledTimes(1);
        });
        it('should confirm when clicked', function () {
            const {getByText} = render(<ActionAlert type={"confirm"} onConfirm={mockOnConfirm} onCancel={mockOnCancel}/>);
            getByText('Yes, Leave').click();
            expect(mockOnConfirm).toHaveBeenCalledTimes(1);
        });
    });

    describe('Type Error', () => {
        const mockOnConfirm = jest.fn(() => {
        });
        it('should load buttons on confirm type', function () {
            const {getByText} = render(<ActionAlert type={"error"} onConfirm={mockOnConfirm} />);
            getByText('OK');
        });
        it('should confirm when OK is clicked', function () {
            const {getByText} = render(<ActionAlert type={"error"} onConfirm={mockOnConfirm} />);
            getByText('OK').click();
            expect(mockOnConfirm).toHaveBeenCalledTimes(1);
        });
    });
    describe('Type Success', () => {
        const mockOnConfirm = jest.fn(() => {
        });
        it('should load buttons on success type', function () {
            const {getByText} = render(<ActionAlert type={"success"} onConfirm={mockOnConfirm} />);
            getByText('Success!');
        });
    });
});



md5-b85dd2c931b2558f4cadf2d940f36709



import ActionDialog from "./ActionDialog";
import React from "react";
import {render, waitForElement} from 'react-testing-library';

describe("ActionDialog", () => {
    it('should display the given label', () => {
        const {getByText} = render(<ActionDialog label={'Testing Label'} content={'test content'} isOpen={false}/>);
        getByText('Testing Label');
    });
});



md5-bae532dafe837c78c93110ffaef86016



 FAIL  src\components\PI\ActionDialog.test.js
  ● ActionDialog › should display the given label

    Unable to find an element with the text: Testing Label. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    <body>
      <div>
        <div />
      </div>
    </body>

      at getElementError (node_modules/dom-testing-library/dist/query-helpers.js:30:10)
      at getAllByText (node_modules/dom-testing-library/dist/queries.js:336:45)
      at firstResultOrNull (node_modules/dom-testing-library/dist/query-helpers.js:38:30)
      at getByText (node_modules/dom-testing-library/dist/queries.js:346:42)
      at Object.it (src/components/PI/ActionDialog.test.js:8:9)
          at new Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:189:7)

 PASS  src\components\PI\ActionAlert.test.js

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 6 passed, 7 total
Snapshots:   0 total
Time:        2.733s, estimated 3s
Ran all test suites related to changed files.

Reproduction:

Sandbox
https://codesandbox.io/s/81r863j30l

Ok,
So everyone know, I am SO super new to testing. so please be kind.

Thank you for your help, and I am sorry if I am just missing something simple.

[royGil]

The dialog is not in the DOM so getByText can't find the label..
Try changing isOpen={false} to isOpen={true} in your failing test :)

[AirborneEagle]

face-palm *

Right. The component is not rendering at all. For some reason I was thinking that it would render with display:none

What is proper protocol to dealing with dumb issues like this one?
Should I just delete it, or leave it up in case some other person should need this?

[kentcdodds]

No need to delete it. Closing it is fine 👍