9

I have been writing a test for my alert.js. I need to access prop value to test its severity. I tried lots of things. But failed every time.

import React from 'react';
import PropTypes from 'prop-types';
import { Snackbar } from '@material-ui/core';
import { Alert as MuiAlert } from '@material-ui/lab';

const Alert = (props) => {
    return (
        <Snackbar
            open={props.open}
            autoHideDuration={3000}
            onClose={props.onClose}
            data-testid='component-alert'
        >
            <MuiAlert
                onClose={props.onClose}
                severity={props.severity}
                data-testid='alert-message'
            >
                {props.message}
            </MuiAlert>
        </Snackbar>
    );
};

Alert.propTypes = {
    message: PropTypes.string.isRequired,
    severity: PropTypes.oneOf(['error', 'warning', 'info', 'success'])
        .isRequired,
    open: PropTypes.bool.isRequired,
    onClose: PropTypes.func.isRequired,
};

export default Alert;

import { render, cleanup } from '@testing-library/react'; import Alert from '../Alert';

const mockFunc = jest.fn(); const defaultProps = { message: 'abc', severity: 'error', open: true, onClose: mockFunc, };

test('render correct severity', () => {
    render(<Alert {...defaultProps}/>)
    //How to access severity prop value here
});

});

Improve this question
9
  • You're passing defaultProps as the props, so... defaultProps.severity? This is nothing to do with React or props, just accessing a property on an object. Commented Jun 26, 2020 at 21:16
  • What I mean is, How can I know whether it rendered severity prop properly or not. Commented Jun 26, 2020 at 21:27
  • Well what's it supposed to be doing with the value of that prop?! What are you expecting to be displayed as a result? Test for that. Just testing that the value of the prop is the value you're passing as the prop is totally pointless, test the behaviour. Commented Jun 26, 2020 at 21:28
  • Basically, I want to test the severity level. But, I can't test it until I have severity prop value. Commented Jun 26, 2020 at 21:35
  • You do have the severity prop value, because you're passing the severity prop. It's "error". Commented Jun 26, 2020 at 21:35

2 Answers 2

Reset to default
2

Following the react-testing-library principles:

The more your tests resemble the way your software is used, the more confidence they can give you.

So there is no point in testing which props your component is receiving. Instead, you should test how the component behaves when these props change.

The appropriate way to test this component would be to assert that the color of the alert is the correct one depending on the severity prop value. You might be able to do so by using getComputedStyles.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You can't access properties

React Testing Library is used to interact with your React components like a human being. What a human being sees is just rendered HTML from your React components

You will have to look up for an HTML element to check the severity

Improve this answer

6 Comments

Please help me with checking severity in alert-message
This depends on the rendered HTML, add screen.debug(); after you render to check what you have, if it is not a lot, add it to your question, don't forget to import it import { render, screen } from '@testing-library/react';
I tried to get the HTML by screen.debug(). But, I couldn't find severity anywhere.
You don't need to look for the severity prop, you need to look for what you want to be rendered if the severity is error
What I would do is to look up for the text abc using getByText and then checking that its parent has the class MuiAlert-standardError
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.