Return type of query methods don't align with fireEvent methods. #20
Description
react-nativeorexpo: react-nativenative-testing-libraryversion: 3.0.0jest-preset: native-testing-libraryreact-nativeversion: 0.59.2nodeversion: 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.