splitter
splitter copied to clipboard
Published
20 hours ago •
devbookhq
devbookhq
Testing with testing-library
Is it possible to run testing-library tests against components which use the splitter?
For example, consider the following test:
import { render, screen } from "@testing-library/react";
import Splitter, { SplitDirection } from '@devbookhq/splitter'
// ResizeObserver is required by DevbookHQ's Splitter component.
// Mock it by using the resize-observer-polyfill installed here as a dev dependency.
global.ResizeObserver = require("resize-observer-polyfill");
describe("Splitter", () => {
it("works as expected", () => {
render(
<Splitter direction={SplitDirection.Vertical}>
<div>Tile 1</div>
<div>Tile 2</div>
</Splitter>
);
expect(screen.getByText(/Tile 1/i)).toBeInTheDocument();
});
});
When the above test is executed, it fails as the render function generates the following HTML, which is missing the two tile divs:
<body>
<div>
<div
class="__dbk__container Vertical"
/>
</div>
</body>
Hey, I haven't tried any testing library with Splitter. Personally, I don't have experience with the testing-library so I cannot really answer your question well.
The behavior you are seeing might be caused by the fact the Splitter won't render its children unless it's able to get the size of Splitter's parent element.
I'd have to look into the specifics of testing-library to fix this. I can't really promise you how soon I'll have free time to do that.
