Take the following React component. It renders some text and an accordion.

```
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>
`

```

I'm trying to test that the className of 'fa-chevron-right' is present. I've looked at several Stackoverflow posts as well as documentation for React Testing Library, Enzyme, and Jest and nothing seems to work. Below is my test file.

```
   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);

  });

```

How can I test that the component renders `fa-chevron-right`?