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

Answer 2

我已经编写了一段代码来帮助您，您可以在我的pull request（已经合并）中找到整个描述，以选择该div，现在您可以将.hasClass（）与regex表达式，例如，如果您使用material-ui，则在开发环境中，类遵循相同的模式，因此您可以选择以下方式：

expect(hasClassName(node, /(MyComponent)-(hide)-(\d+)/)).to.equal(true)

当类名不是静态时，如何为酶测试选择节点？

2 个答案: