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 的一部分。