typescript - 当 TypeScript 阻止我时，如何将 testId 属性添加到用于测试库的 React Native 组件？

Question

我正在使用 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 识别testId来自 @testing-library/react-native 的添加属性。

Answer 1

发现了问题。testId应该是testID。我的一个简单的错字。

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