Skip to content

Testing with testing-library #10

Open
@vassilvk

Description

@vassilvk

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions