Querying elements does provide unexpected behavior

[HafizAhmedMoon]

• react-testing-library version: 5.3.2
• react version: 16.6.0
• node version: 8.12.0
• yarn version: 1.12.3

Relevant code or config:

const renderer1 = render(<div data-testid="first-render"></div>); // first render
const renderer2 = render(<div data-testid="second-render"></div>); // second render

console.log(renderer1.queryByTestId('first-render') !== null) // true
console.log(renderer1.queryByTestId('second-render') === null) // should true (but getting false)

console.log(renderer2.queryByTestId('first-render') === null) // should true (but getting false)

What you did:

I'm testing two components at same time.

What happened:

I have two separate components and when I rendered both at same time and querying elements does not provide expected behavior.

Reproduction:

Here is online a demo: https://stackblitz.com/edit/react-ts-dixecs?file=index.tsx

Problem description:

Querying elements searches from baseElement instead of container element, this makes elements available from another render.

Suggested solution:

The solution is, needs to generate queries on container element instead of baseElement (https://github.com/kentcdodds/react-testing-library/blob/master/src/index.js#L50).

[alexkrolick]

baseElement defaults to the container in https://github.com/kentcdodds/react-testing-library/blob/master/src/index.js#L8, so there may be some other issue

[HafizAhmedMoon]

@alexkrolick baseElement defaults to document.body in https://github.com/kentcdodds/react-testing-library/blob/master/src/index.js#L13 if container is undefined and container is a child node of document.body

[kentcdodds]

generate queries on container element instead of baseElement

The queries are based on the baseElement so that testing portals is straightforward. It should normally work fine because you should be rendering your element on a clean HTML document so it shouldn't make any difference. Typically you will not be calling render in a single test (just like you wouldn't typically do ReactDOM.render twice in your app). Is there a reason you're calling render twice?

[HafizAhmedMoon]

@kentcdodds yes and no :)
it is being called twice, the component is rendering in beforeEach at the first time and I have one special case that needs to render the element with different props as freshly. The second render with different props change some nodes and when I'm expecting that nodes to be null the query function is finding that nodes from the previous render giving me a not null value.

It should not happen if I'm getting query methods from renderer like this:
const {getByTestId} = render(<MyComponent />);
this does not make sense to me when it gets the element from other renders.

[jakobsandberg]

If you are doing a render in beforeEach, you can include an afterEach that cleans up the DOM after each test:

import { cleanup } from 'react-testing-library'
afterEach(cleanup);

https://github.com/kentcdodds/react-testing-library#cleanup

[kentcdodds]

I recommend against using beforeEach in general, and certainly wouldn't recommend calling render in beforeEach.

If you'd like to ensure that your queries are scoped down to your container, you can do that a few different ways. Here's one:

import {within} from 'dom-testing-library'

// ...

const {getByTestId} = within(render(<MyComponent />).container)

I'm going to close this as working as designed with a strong recommendation that you do not run render twice in one test (without calling cleanup between them).

[HafizAhmedMoon]

I'm using cleanup in afterEach but in this case I have to use cleanup before creating new render in my special case which resolves my problem.

Just to let you know, I noticed sometimes when I forget to add cleanup it gives me the same problem.

It makes more sense to me to scope queries to each new render which I can achieve by custom render within your provided example.

BTW, thanks for help.