Closed damienrobson-sage closed 3 months ago
Investigated further and it looks like we need to mock the bounding rectangle in the test setup. See below for an example of how to test Select in RTL, we should use this ticket to update our docs and consider whether we should export some form of setup function for this.
import React from "react";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { Select, Option } from "carbon-react/lib/components/select";
import { setupMatchMediaMock } from "carbon-react/lib/__spec_helper__/mock-match-media";
import setupScrollToMock from "carbon-react/lib/__spec_helper__/mock-element-scrollto";
setupMatchMediaMock();
beforeAll(() => {
global.window.ResizeObserver = jest.fn().mockImplementation(() => ({
disconnect: jest.fn(),
observe: jest.fn(),
unobserve: jest.fn(),
}));
setupScrollToMock();
Element.prototype.getBoundingClientRect = () => ({
width: 100,
height: 100,
top: 100,
left: 100,
right: 100,
bottom: 100,
x: 100,
y: 100,
toJSON: jest.fn(),
});
Element.prototype.scrollIntoView = jest.fn();
});
test("renders a select component", async () => {
const user = userEvent.setup();
render(
<Select onChange={jest.fn()} value="" label="foo" data-testid="select">
<Option value="1" text="foo option" />
</Select>
);
const select = screen.getByRole("combobox");
await user.click(select);
expect(screen.getByText("foo option")).toBeVisible();
});
FE-6646
Description
When running unit tests with React Testing Library,
Select
components no longer render their childOption
values when clicking, either throughfireEvent
or throughuserEvent
. The list container is rendered, but it has no option entries.Reproduction
https://carbon.sage.com/?path=/docs/select--docs
Steps to reproduce
Create the following test file:
Running it will produce HTML output, in amongst which is the following which demonstrates that there are no options rendered:
JIRA ticket numbers (Sage only)
No response
Suggested solution
No response
Carbon version
135.1.2
Design tokens version
No response
Relevant browsers
Chrome
Relevant OSs
MacOS
Additional context
No response
Confidentiality