当 TypeScript 阻止我时，如何为测试库的 React Native 组件添加 testId 属性？

问题描述

我正在使用 TypeScript 编写 React Native 组件并使用 React Native Testing Library 对其进行测试。

我想在 React Native 组件上放置一个 testId 属性，如下所示：

<TextInput testId="foo" />

然后像这样在测试中引用它：

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");
});

但是 TypeScript 不允许我在组件上放置 testId 属性，因为当然，TypeScript 会向 React Native 询问有效属性，而 React Native 对 testId 一无所知； testId 是@testing-library/react-native 的一部分。

如何让 TypeScript 识别来自 @testing-library/react-native 的添加属性，例如 testId。

解决方法

发现问题。 testId 应该是 testID。我的错别字很简单。

如果有人发现了这一点，问题不在于 TypeScript 根本不知道 testID 属性。你不需要npm install @types/whatever。它们已被视为安装 RNTL 的一部分。