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

Question

采用以下 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' 的类名是否存在。我查看了几篇 Whosebug 帖子以及 React Testing Library、Enzyme 和 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？

Answer 1

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

变成：

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

Answer 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();
});

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

How do I test that my component has a specific className?

reactjs

jestjs

enzyme

react-testing-library