Non-visible modal content shows up in queries

Describe the bug

Hi, thanks for taking a look at this! I’m fairly new to react-native, but have a lot of experience with web testing-library variants and ran across some unexpected (to me) behavior. Query methods find nodes in non-visible modals.

I think this is what this user was getting at https://github.com/callstack/react-native-testing-library/issues/508

Steps to Reproduce

Here’s a simple example test I set up to test this out

// App.js
import React from "react";
import { Modal, Text, View } from "react-native";

const App = () => {
  return (
    <View>
      <Modal visible={false}>
        <View>
          <Text>Exciting content</Text>
        </View>
      </Modal>
    </View>
  );
};

export default App;

// App.test.js
import React from "react";
import { render, fireEvent } from "@testing-library/react-native";
import App from "./App";

it("shows the modal on button click", () => {
  const { queryByText } = render(<App />);

  expect(queryByText("Exciting content")).toBeNull(); // fails
});

Expected behavior

I’d expect this test to pass, since there’s no modal content visible to the user while the modal is not visible.

If this is expected behavior, is there a recommended way to test appearance/disappearance modals?

Versions

@testing-library/react-native@7.1.0

[AntoineDoubovetzky]

I just opened a PR on react-native repository to update the mock so the Modal doesn’t render its children when the visible prop is false. It should fix your issue 😃

[satya164]

For the modal from react-native, there is no accessibility prop according to the props given in the doc. Its prop visible sounds like the only option unfortunately.

The other option is to send a PR to React Native adding accessibility props for Modal.