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

Question

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?

Answer 1

You could use by adding jest-dom to your project.
It becomes:
expect(container).toHaveClass('fa-chevron-right');

Answer 2

I solved it by adding a data-testid='down' to my component. I don't love that I need to add an attribute just to test it, but it's the only way I could solve it. I used React's Testing-library.
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
test('should call toggle correctly', () => {
const { container } = render(<AccountDetails {...defaultProps} />);
expect(getByTestId(container, 'down')).toBeTruthy();
});