使用带有酶的期望测试库无法在具有两个类的 DOM 上找到元素

Question

在测试 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);
  });
});