Testing with testing-library

vassilvk commented 2 years ago

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>

mlejva commented 2 years ago

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.

vassilvk commented 2 years ago

Thanks for the quick response!

devbookhq / splitter

Testing with testing-library #10