如何测试我的组件是否具有特定的类名？答案

【问题标题】：How do I test that my component has a specific className?如何测试我的组件是否具有特定的类名？
【发布时间】：2021-12-30 22:19:55
【问题描述】：

采用以下 React 组件。它呈现一些文本和手风琴。

const AccountDetails = ({


accountNumber,
  accountType,
  accordionOpen,
  accordionState,
  productName,
  toggle,
}) => {

  if (accordionState) {
    return (
      <div className="transaction-card-account-info">
        <div className={`icon ${accountTypeIcons[accountType]}`} />
        <div className="account-details">
          <div className="account-name">{productName}</div>
          {accountNumber && <div>{`Account ${accountNumber}`}</div>}
        </div>
      </div>
    );
  } else {
    return (
      <div className="transaction-card-account-info">
        <div className={`icon ${accountTypeIcons[accountType]}`} />
        <div className="account-details">
          <div className="account-name">
            {productName}
            <ToggleAccordionButton
              onClick={toggle}
            >
              {accordionOpen ? <CloseAccordionIcon /> : <OpenAccordionIcon />}
            </ToggleAccordionButton>
          </div>
          {accountNumber && <div>{`Account ${accountNumber}`}</div>}
        </div>
      </div>
    );
  }

};
AccountDetails.propTypes = AccountDetailsPropTypes;

export default AccountDetails;


 `openAccordionIcon` renders the following HTML

`
  <button type="button" class="sc-hBURRC jZGdVy">
      <i class="sc-fotPbf bdlDTo fas fa-chevron-right"></i>
  </button>
`

我正在尝试测试“fa-chevron-right”的类名是否存在。我查看了几个 Stackoverflow 帖子以及 React 测试库、酶和 Jest 的文档，但似乎没有任何效果。下面是我的测试文件。

   describe('<AccountDetails />', () => {
  let defaultProps;

  beforeEach(() => {
    defaultProps = {
      accountNumber: '4571184999',
      accountType: 'generic',
      accordionOpen: true,
      accordionState: false,
      productName: 'Alex Credit',
      toggle: PropTypes.func,
    };
  });

  test('should render correctly', () => {
    const { getAllByText } = render(<AccountDetails {...defaultProps} />);
    expect(getAllByText('Alex Credit').length).toBe(1);
  });

  test('should call toggle correctly', () => { 
    // this test fails
     const wrapper = render(<AccountDetails {...defaultProps} />);
     expect(wrapper.getElementsByClassName("fa-chevron-right").length).toBe(1);

  });

如何测试组件呈现fa-chevron-right？

【问题讨论】：

标签： reactjs jestjs enzyme react-testing-library

【解决方案1】：

您可以通过将 jest-dom 添加到您的项目中来使用。

变成：

expect(container).toHaveClass('fa-chevron-right');

【讨论】：

这不起作用。您能否编辑我的测试以向我展示您希望它如何工作？
我在 jest-dom 文档中的任何地方都没有看到 toHaveClass。你确定这是正确的吗？
github.com/testing-library/jest-dom#tohaveclass

【解决方案2】：

我通过在我的组件中添加data-testid='down' 解决了这个问题。我不喜欢我需要添加一个属性来测试它，但这是我可以解决它的唯一方法。我使用了 React 的测试库。

return (
<div className="transaction-card-account-info">
  <div className={`icon ${accountTypeIcons[accountType]}`} />
  <div className="account-details">
    <div className="account-name">
      {productName}
      <ToggleAccordionButton
        onClick={toggle}
      >
        {accordionOpen ? <CloseAccordionIcon data-testid="down" /> : <OpenAccordionIcon />}
      </ToggleAccordionButton>
    </div>
    {accountNumber && <div>{`Account ${accountNumber}`}</div>}
  </div>
</div>
);

// 测试

test('should call toggle correctly', () => {
  const { container } = render(<AccountDetails {...defaultProps} />);
  expect(getByTestId(container, 'down')).toBeTruthy();
});

【讨论】：