Element that has been hidden after waiting is still visible

[bolivier]

• react-testing-library version: 6.1.2
• react version: 16.8.6
• node version: 11.13.0
• yarn version: 1.15.2

Relevant code or config:

class Hider extends React.Component {
  state = {
    visible: true
  };
  render() {
    return (
      <div>
        <span>{this.props.text || "hi"}</span>
        <button onClick={() => this.setState({ visible: false })}>hide</button>
        <div>{this.props.children}</div>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <Hider>
          <span>hello world</span>
        </Hider>
      </div>
    );
  }
}

it("should not work properly", async () => {
  const wrapper = render(<App visible={false} />);
  fireEvent.click(wrapper.getByText("hide"));
  await wait(() => {
    expect(wrapper.queryByText("hide")).not.toBeInTheDocument();
  });
});

What you did:

I was writing to test a modal component that hides children by returning null.

What happened:

Querying the container for the text of the button results in returning the button, even though that button isn't present in the DOM.

The error message is {"location": null} contains: <button />

A snapshot of that error:

Reproduction:

I created a reproduction of the issue here: https://github.com/bolivier/react-testing-library-reproduction

Problem description:

Event though the components are not present, they are found and the tests fail

Suggested solution:

I'm unsure of a solution. I did notice that everything behaves as expected if there's no component nesting. So if the App component handles the visibility, then the tests will pass.

[bcarroll22]

Very subtle, but your issue is this:

expect(wrapper.queryByText("hide")).not.toBeInTheDocument();

you're querying for the text "hide" which is the text of the button. the button never goes away. i think what you want is to query by text "hello world" 😉

[kentcdodds]

Hi @bolivier,

That code doesn't have any logic around hiding stuff based on the visible state: https://github.com/bolivier/react-testing-library-reproduction/blob/70a3b9ec7c4a741faf5a10c1139388d609c6c087/src/Hider.js#L5

Sure you can set the state, but it doesn't actually hide anything. This doesn't have to do with testing... The feature just doesn't work...

Here's it working: https://codesandbox.io/s/4q6lmnx4lx