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

Posted 2023-02-22

【中文标题】如何在 react-testing-library 中访问 prop 值

【英文标题】：How to access prop value in react-testing-library

【发布时间】：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"。

【参考方案1】：

您无法访问属性

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

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

【讨论】：

请帮我检查警报消息中的严重性

这取决于渲染的HTML，渲染后添加screen.debug();检查你有什么，如果不是很多，添加到你的问题中，不要忘记导入它@987654322 @

我尝试通过 screen.debug() 获取 HTML。但是，我在任何地方都找不到严重性。

你不需要寻找severity prop，如果severity是error，你需要寻找你想要渲染的内容

我要做的是使用getByText 查找文本abc，然后检查其父级是否具有MuiAlert-standardError 类