How to access prop value in react-testing-library

Question

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
});

});

Cuman

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. – Sherris

What I mean is, How can I know whether it rendered severity prop properly or not. – Cuman

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. – Sherris

Basically, I want to test the severity level. But, I can't test it until I have severity prop value. – Cuman

You do have the severity prop value, because you're passing the severity prop. It's "error". – Sherris

I really appreciate for your support. But, what I meant, whether we can access props value like enzyme in react-testing-library or not. If, we can then how? – Cuman

It's not clear why you think you need to. What are you actually trying to test here?! Assert on what your component actually displays. – Sherris

Using a third-party library like material makes it tougher to test. As you can see, there is no direct way to test severity. Therefore, If I would be getting severity prop. it will give me confidence that everything ok. – Cuman

I am in the same situation as this guy. In our project we have to remove enzyme because we are upgrading to React 17. All the enzyme tests are being replaced with Testing Library, and we have these weird tests that are testing a property in the component... I understand they are not with the philosophy of testing library, but we need to replace them somehow. Is there not some back door to the react component we can have access to? – Junta

Answer 1

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.

Ascender

Answer 2

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

Moonset

Please help me with checking severity in alert-message – Cuman

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'; – Moonset

I tried to get the HTML by screen.debug(). But, I couldn't find severity anywhere. – Cuman

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 – Moonset

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 – Moonset

Not useful. Also, sad, last time I checked I was a human being. – Barometrograph