How can I add a testId attribute to a React Native component for Testing Library when TypeScript prevents me?

Question

I'm writing a React Native components using TypeScript and testing them with React Native Testing Library.

I want to put a testId attribute on a React Native component like so:

<TextInput testId="foo" />

And then refer to it in a test like so:

it('receives a search string', () => {
  const { getByTestId } = render(<FooComponent />);;
  const textBox = getByTestId("foo");
  fireEvent.changeText(textBox,"some fake text");
  expect(textBox.value).toEqual("some fake text");
});

But TypeScript won't allow me to put a testId attribute on a component because of course, TypeScript is asking React Native about valid attributes and React Native knows nothing about a testId; testId is part of @testing-library/react-native.

How do I get TypeScript to recognize the added attributes like testId from @testing-library/react-native.

score 3 · Answer 1 · answered Dec 23 '20 at 22:05

Found the problem. testId should have been testID. Simple typo on my part.

If anyone finds this, the problem is not that that TypeScript isn't aware of the testID attribute at all. You don't need to npm install @types/whatever. They're already recognized as part of installing RNTL.

How can I add a testId attribute to a React Native component for Testing Library when TypeScript prevents me?

1 Answers1