I set up jest test to get certain element in this component and see if it’s there. That simple. The problem is that in component this element is conditionally rendered. There is a check like isLoaded && .
Here is the test:
import '@testing-library/jest-dom';
import { fireEvent, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import LikertChart from '~/components/charts/cards/LikertChart';
describe('Dashboard Tests', () => {
afterEach(() => {
jest.clearAllMocks();
});
it('clicking on attitude chart should add a new filter', async () => {
const { container } = render(<LikertChart />);
const spanWithText = await screen.findByTestId('attitude-chart');
console.log(container.innerHTML);
expect(spanWithText).toBeInTheDocument();
});
});
In the console I see that it renders only some HTML of component, which doesn’t have any rendering logic, so I get only:
<body>
<div>
<div
class="chart-container flex flex-col gap-4 p-4 items-center bg-white"
>
<h1
class="chart-title font-semibold flex w-full"
>
Attitude
</h1>
<svg
class="mx-auto my-12 w-[75%] h-auto"
fill="none"
height="67"
viewBox="0 0 94 67"
width="94"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M47 65.1727C72.9574 65.1727 94 60.7214 94 55.2304C94 49.7394 72.9574 45.2881 47 45.2881C21.0426 45.2881 0 49.7394 0 55.2304C0 60.7214 21.0426 65.1727 47 65.1727Z"
fill="#EFEFEF"
/>
<path
d="M10.8457 20.8848H83.1534V49.2309C83.1534 52.5446 80.4671 55.2309 77.1534 55.2309H16.8457C13.532 55.2309 10.8457 52.5446 10.8457 49.2309V20.8848Z"
fill="#EFEFEF"
stroke="#ADADAD"
stroke-linejoin="round"
/>
<path
d="M28.9226 1H46.9995H65.0765L83.1534 20.8846H65.438C63.6258 20.8846 62.04 22.103 61.5731 23.854L61.3491 24.6941C60.8821 26.4451 59.2963 27.6635 57.4841 27.6635H36.515C34.7028 27.6635 33.117 26.4451 32.65 24.6941L32.426 23.854C31.9591 22.103 30.3733 20.8846 28.5611 20.8846H10.8457L28.9226 1Z"
fill="white"
stroke="#ADADAD"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
</body>
But of course, this is incorrect. How to make jest consider the whole component HTML ?
Thank you!