Return type of query methods don't align with fireEvent methods.

[lewie9021]

• react-native or expo: react-native
• native-testing-library version: 3.0.0
• jest-preset: native-testing-library
• react-native version: 0.59.2
• node version: 10.13.0

Relevant code or config:

import * as React from "react";
import { Button, Text, View } from "react-native";
import { fireEvent, render } from "native-testing-library";

function Example() {
  const [ visible, toggleVisibility ] = React.useState(false);

  return (
    <View>
      <Button
        testID="button"
        title="Press Me"
        onPress={() => toggleVisibility(!visible)}
      />
      {visible
        ? <Text testID="text">Hello World!</Text>
        : null
      }
    </View>
  );
}

test("example", () => {
  const { getByTestId } = render(<Example />);

  const button = getByTestId("button");

  fireEvent.press(button);

  const text = getByTestId("text");

  expect(text.props.children).toEqual("Hello World!");
});

What you did:

Followed the documentation and code examples for firing events and accessing props but found TypeScript errors.

What happened:

TypeScript error for fireEvent.press call:

Error:(28, 19) TS2345: Argument of type 'ReactTestRenderer' is not assignable to parameter of type 'Pick<ReactTestInstance, "type" | "props" | "parent" | "children" | "find" | "findAll">'.

TypeScript error when accessing element props:

Error:(32, 15) TS2339: Property 'props' does not exist on type 'ReactTestRenderer'.

Reproduction:

See full code example above.

Problem description:

The TypeScript error suggest that I'm using the library wrong even though I'm following exactly as the documentation states. The only way to run the tests is to use @ts-ignore comments above each line potentially suppressing other issues TypeScript may find with my tests.

Suggested solution:

I found that modifying the return type of the exported methods in typings/queries.d.ts from ReactTestRenderer to NativeTestInstance seemed to solve the issue, but I'm not exactly sure if that's correct. My knowledge of react-test-renderer is rather limited.

[bcarroll22]

Thanks for reporting this! Your fix of changing the type to NativeTestInstance is correct. I won’t be able to get to this tonight but I’d be able to merge a PR to fix it if you have the chance? Thanks again for filing!

[lewie9021]

Thanks for the speedy response and clarification. I'm happy to create a PR :)

[bcarroll22]

🎉 This issue has been resolved in version 3.1.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀