Невозможно найти элемент в DOM, имеющий два класса, используя ожидаемую тестовую библиотеку с ферментом

Question

Есть ли способ найти элемент по второму имени класса aur или по элементу, имеющему два или более имен классов, во время тестирования компонентов React-Redux.

Например: у меня есть div

<div className="navigations active">
....
</div>

Хотя я могу найти его по имени первого класса

const wrapper = mount(
   <Provider store={store}>
       <TodoApp />
   </Provider>
);

expect(wrapper.find('.navigations ')).toHaveLength(4);

, но не могу найти его по имени второго класса, например:

expect(wrapper.find('.active')).toHaveLength(1);

Это всегда дает мне длину ноль, но активный класс привязан к DOM. Я просто хочу знать, есть ли способ получить к нему доступ?

Answer 1

Вы должны быть в состоянии сделать оба ... Я создал быстрый тест, чтобы проверить ваш пример:

import React from 'react';
import { mount } from 'enzyme';

const MyComp = ({active}) => <div className={`navigations${active ? ' active': ''}`} />;

describe('Name of the group', () => {
  it('should ', () => {
    const wrapper = mount(
      <>
        <MyComp />
        <MyComp active/>
        <MyComp />
        <MyComp />
      </>,
    );

    expect(wrapper.find('.navigations')).toHaveLength(4);
    expect(wrapper.find('.active')).toHaveLength(1);
  });
});