如何在 react-testing-library 中访问 prop 值答案

【问题标题】：How to access prop value in react-testing-library如何在 react-testing-library 中访问 prop 值
【发布时间】：2020-10-17 12:55:05
【问题描述】：

我一直在为我的 alert.js 编写测试。我需要访问 prop 值来测试它的严重性。我尝试了很多东西。但每次都失败了。

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;

从'@testing-library/react'导入{渲染，清理}；从'../Alert'导入警报；

const mockFunc = jest.fn(); 常量 defaultProps = { 消息：'abc'，严重性：'错误'，开放：真实， onClose：模拟函数， };

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

});

【问题讨论】：

您将 defaultProps 作为道具传递，所以... defaultProps.severity？这与 React 或 props 无关，只是访问对象上的属性。
我的意思是，我怎么知道它是否正确渲染了严重性属性。
那么它应该用那个道具的价值做什么？！您期望显示的结果是什么？对此进行测试。只是测试 prop 的值是你传递的值，因为 prop 完全没有意义，测试 behaviour。
基本上，我想测试严重性级别。但是，在我获得严重性道具值之前，我无法对其进行测试。
您确实具有严重性属性值，因为您正在传递严重性属性。这是"error"。

标签： reactjs unit-testing react-testing-library

【解决方案1】：

您无法访问属性

React 测试库用于与您的 React 组件进行交互像人类一样。人类所看到的只是从你的 React 组件

您必须查找 HTML 元素来检查严重性

【讨论】：

请帮我检查警报消息中的严重性
这取决于渲染的HTML，渲染后添加screen.debug();检查你有什么，如果不是很多，添加到你的问题中，不要忘记导入它@987654322 @
我尝试通过 screen.debug() 获取 HTML。但是，我在任何地方都找不到严重性。
你不需要寻找severity prop，如果severity是error，你需要寻找你想要渲染的内容
我要做的是使用getByText 查找文本abc，然后检查其父级是否具有MuiAlert-standardError 类