Having the following testing file:
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import TaskModal from './task-modal';
describe('TaskModal', () => {
const title = 'title';
const selectedOption = { id: '1', name: 'test' };
const options = [{ id: '1', name: 'test' }];
it('should render successfully', () => {
const { baseElement, getByText } = render(
<TaskModal
title={title}
open={true}
toggle={jest.fn()}
initialScriptNameSelectedOption={selectedOption}
scriptNameOptions={options}
/>
);
expect(baseElement).toBeTruthy();
expect(getByText(title)).toBeTruthy();
});
it('should check if TaskModal renders Textarea successfully', () => {
const { getByTestId } = render(
<TaskModal
hasTextarea
title={title}
open={true}
toggle={jest.fn()}
initialScriptNameSelectedOption={selectedOption}
scriptNameOptions={options}
/>
);
const textarea = getByTestId('has-textarea');
expect(textarea).toBeInTheDocument();
});
});
When I run each test separately they pass, when I run the whole file, the second test fails with the following message:
Error: Uncaught [ReferenceError: IntersectionObserver is not defined]
Why is this happening?