Как выбрать узлы для тестирования ферментов, когда имена классов не являются статичными?

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

Я написал фрагмент кода, чтобы помочь этому, вы можете найти полное описание в моем запросе на получение (он уже был объединен), чтобы выбрать этот div, теперь вы можете использовать .hasClass () с выражением регулярного выражения, например, если вы используете material-ui, в среде dev классы следуют одному и тому же шаблону, поэтому вы можете выбрать этот способ:

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

Answer 2

Мне нравится использовать 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>
        );
    }
}

И селекторв ферменте будет выглядеть так:

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

подробнее: https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html