React-testing-library: Debug Returning Empty `<Body />` in second test suite

Created on 15 May 2019 · 3Comments · Source: testing-library/react-testing-library

react-testing-library version: 7.0.0
react version: 16.8.3
node version: 11.14
npm (or yarn) version: 1.15.2

Relevant code or config:

import React from "react";
import { render, cleanup } from "react-testing-library";

export const Parent = ({ children }) => {
  return <div>{children}</div>;
};

describe("<Parent />", () => {
  const childElement = <div>Child</div>;
  const { debug } = render(<Parent>{childElement}</Parent>);

  describe("<Parent /> Rendering", () => {
    afterEach(cleanup);

    it("should return HTML Snapshot", () => {
      debug();
    });

    it("should have its child rendered", () => {
      debug();
    });
  });

  // Other Irrelevant Tests
});

What you did:

Testing with two different test specs. Debugging returned two different baseEl renders. Avoiding beforeEach to keep small.

What happened:

First Test Suite printed

<body>
      <div>
        <div>
          <div>
            Child
          </div>
        </div>
      </div>
    </body>

The second Test Suite

 <body />

Reproduction:

https://codesandbox.io/s/j2pl0j5z93

See __test__/hello.js and console log.

Problem description:

Expecting the same body to be printed on the second tests as of the first, unless if I did something wrong, I'd like some docs so I can correct my self next time :)

Source

joshvillahermosa

Most helpful comment

You shouldn't render outside of a test()/it() block. The JSDOM env is global (shared between tests) and the cleanup in the inner describe() is cleaning up the DOM.

alexkrolick on 15 May 2019

👍3

All 3 comments

You shouldn't render outside of a test()/it() block. The JSDOM env is global (shared between tests) and the cleanup in the inner describe() is cleaning up the DOM.

alexkrolick on 15 May 2019

👍3

Learn more: https://kentcdodds.com/blog/test-isolation-with-react/