时间戳

首页 > 解决方案 > 当类名不是静态的时，如何选择节点进行酶测试？

reactjs - 当类名不是静态的时，如何选择节点进行酶测试？

问题描述

我想使用 Enzyme 测试以下组件：

export class Header extends React.Component {
    render() {
        const { classes, numOrders } = this.props;

        return (
            <header>
                <div className={classes.numOrders}>
                    {numOrders}
                </div>
                ...
            </header>
        );
    }
}

选择div显示订单数量的最佳方法是什么。请注意，类名是动态生成的（使用 JSS），所以这不是一个好的选择。有没有其他合理的方法/最佳实践来做到这一点？（我不想在这些节点上添加 CSS #id。）

标签： reactjsenzyme

解决方案

我喜欢在这里做的是使用data属性进行测试，然后在 Enzyme 中使用属性选择器。

它看起来像这样：

export class Header extends React.Component {
    render() {
        const { classes, numOrders } = this.props;

        return (
            <header>
                <div className={classes.numOrders} data-testid="SomeName">
                    {numOrders}
                </div>
                ...
            </header>
        );
    }
}

Enzyme 中的选择器如下：

wrapper.find('[data-testid="SomeName"]');

更多信息：https ://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html

推荐阅读