Typings for *ByDisplayValue and *ByTitle queries

[mateusz1913]

• react-native or expo: react-native
• native-testing-library version: 4.0.6
• jest-preset: @testing-library/react-native
• react-native version: 0.59.9
• node version: 12.4.0

Relevant code or config:

import React from 'react';
import { fireEvent, render } from '@testing-library/react-native';

import Form from '../src/components/Form';

describe('Form', () => {
  it('should render 1 <TextInput /> and 1 <TouchableOpacity />', () => {
    const { getByPlaceholderText, getByTestId } = render(<Form />);
    const input = getByPlaceholderText('Type some text'); // We are searching for <TextInput />;
    expect(input).toHaveProp('value', '');
    const button = getByTestId('SubmitButton'); // We are searching for <TouchableOpacity />;
    expect(button).toHaveTextContent('Save text');
  });
  it('should call onSubmit prop after pressing <TouchableOpacity />', () => {
    const onSubmit = jest.fn();
    const { getByTestId } = render(<Form onSubmit={onSubmit} />);
    const button = getByTestId('SubmitButton');
    fireEvent.press(button);
    expect(onSubmit).toBeCalledTimes(1);
  });
  it('should change <TextInput /> value after typing some text', () => {
    const { getByPlaceholderText, getByDisplayValue } = render(<Form />);
    const input = getByPlaceholderText('Type some text');
    const textValue = 'SomeTextValue';
    fireEvent.changeText(input, textValue);
    getByDisplayValue(textValue);
  });
});

What you did:

I tried to use GetByDisplayValue in project with Typescript

What happened:

Typescript shows error:
Property 'getByDisplayValue' does not exist on type 'RenderResult<typeof import("e:/reactnative/submitTextApp/node_modules/@testing-library/react-native/typings/queries")>'

Reproduction:

Repository: https://gitlab.com/Mateusz_Medrek/reactnativewithnativetestinglibrary

Example code is from tests/Form.spec.tsx

Problem description:

I can't use *ByDisplayValue in Typescript project. In typings directory there is no type for any of ByDisplayValue queries, similar problem is for *ByTitle queries. Instead, there are types for *ByA11yStates and ByA11yTraits queries, which are not present in package since version 3.x.x

Suggested solution:

I would suggest changing typings/queries.d.ts, to include *ByDisplayValue and *ByTitle queries, and remove *ByA11yStates and *ByA11yTraits

example for GetByDisplayValue

export const getByDisplayValue: GetByBoundProp;
export const getByHintText: GetByBoundProp;
export const getByLabelText: GetByBoundProp;
export const getByRole: GetByBoundProp;
export const getByPlaceholderText: GetByBoundProp;
export const getByTestId: GetByBoundProp;
export const getByText: GetByText;
export const getByTitle: GetByBoundProp;

[bcarroll22]

Hi! Thanks so much for pointing this out. I won't be available for the rest of the week to fix this, any chance you could submit a PR for it?

[mateusz1913]

Yes, I will try