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

Question

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

我想在 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 不允许我在组件上添加属性，因为当然，TypeScript 会向 React Native 询问有效属性，而 React Native 对;testId一无所知。testIdtestId 是@testing-library/react-native 的一部分。

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

Answer 1

发现问题了。testId本来应该testID。我的简单错字。

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