属性 'value' 在 React 测试库中的类型 'HTMLElement' 上不存在

Question

I am using React-testing-library and getting an error on the last line which is: expect (title.value).toBe("testtitle");})}) . The error message is Property 'value' does not exist on type 'HTMLElement'. How can I rectify this error message in order to write this code efficiently?

测试文件

  <Router history={history}>
            <Route render={(props) => 
            <NewQuestion {...props} onSave={jest.fn()}/>}/>
        </Router>)
    const title= getByPlaceholderText("What's your question? Be specific");
    fireEvent.change(title, {target: {value: "testtitle"}})
    expect (title.value).toBe("testtitle");})})

Answer 1

您应该将 title 变量转换为 HTMLInputElement 才能真正获得 value 属性。试试下面的代码：

const title = getByPlaceholderText("test") as HTMLInputElement;

Answer 2

转换的替代方法是使用 instanceof narrowing:

const title = getByPlaceholderText("test");
if (!(title instanceof HTMLInputElement)) {
  throw new AssertionError("expected title to be an HTMLInputElement");
}
// Now TypeScript knows title is an HTMLInputElement if we made it here.
expect(title.value).toBe("foo");

这是比转换更多的代码，但可以说是一个更好的测试，因为如果返回的元素不是 HTMLInputElement，我们将得到一个明确的失败。这种方法的灵感来自这个 dom-testing-library github issue comment.

如果您必须在多个地点进行此类检查，您可以制作一个 assertion function 以供重复使用：

function assertIsHTMLInputElement(
  val: unknown
): asserts val is HTMLInputElement {
  if (!(val instanceof HTMLInputElement)) {
    throw new AssertionError(`expected ${val} to be an HTMLInputElement`);
  }
}

Answer 3

就我而言，

  expect(
    screen.getByLabelText(/barInput/).value,
  ).toEqual('bar value');

抛出错误“属性 'value' 在类型 'HTMLElement' 上不存在。”

我通过添加泛型解决了它HTMLInputElement

  expect(
    screen.getByLabelText<HTMLInputElement>(/barInput/).value,
  ).toEqual('bar value');

属性 'value' 在 React 测试库中的类型 'HTMLElement' 上不存在

Property 'value' does not exist on type 'HTMLElement' in React Testing Library

unit-testing

typescript

reactjs

react-testing-library