Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Testing with testing-library #10

Open
vassilvk opened this issue Feb 2, 2022 · 2 comments
Open

Testing with testing-library #10

vassilvk opened this issue Feb 2, 2022 · 2 comments
Labels
enhancement New feature or request

Comments

@vassilvk
Copy link

vassilvk commented Feb 2, 2022

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
Copy link
Contributor

mlejva commented Feb 2, 2022 •
edited
Loading

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.

@mlejva mlejva added the enhancement New feature or request label Feb 2, 2022
@vassilvk
Copy link
Author

vassilvk commented Feb 2, 2022

Thanks for the quick response!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@vassilvk @mlejva