reactjs - 当类名不是静态时，如何选择用于 enzyme 测试的节点？

Question

我想使用 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。)

Answer 1

我在这里喜欢做的是使用 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