在DOM测试库或反应测试库中测试输入值的最佳方法 [英] Best way to test input value in dom-testing-library or react-testing-library

问题描述

测试dom-testing-library/react-testing-library中<input>元素的值的最佳方式是什么？

我采取的方法是通过closest()方法获取原始输入元素本身，然后使我可以直接访问value属性：

const input = getByLabelText("Some Label")
expect(input.closest("input").value).toEqual("Some Value")

我希望有一种方法可以在不必直接访问HTML属性的情况下实现这一点。这看起来并不符合测试库的精神。可能类似于jest-dom toHaveTextContent matcher匹配器：

const input = getByLabelText("Some Label")
expect(input).toHaveTextContent("Some Value")

---

更新

根据注释中的请求，下面是一个代码示例，显示了我觉得需要测试输入框中的值的情况。

这是我在应用程序中构建的一个模式组件的简化版本。Like，非常简化。这里的整个想法是，模式的输入预先填充了一些文本，基于字符串道具。用户可以自由编辑该输入并通过按下按钮来提交它。但是，如果用户关闭模式，然后重新打开它，我希望将文本重置为原始字符串道具。我为此编写了一个测试，因为以前版本的模式未重置输入值。

我是用打字稿写的，这样每个道具的类型都很清楚。

interface Props {
  onClose: () => void
  isOpen: boolean
  initialValue: string
}

export default function MyModal({ onClose, isOpen, initialValue }) {
  const [inputValue, setInputValue] = useState(initialValue)

  // useEffect does the reset!
  useEffect(() => {
    if (!isOpen) {
      setNameInput(initialValue)
    }
  }, [isOpen, initialValue])

  return (
    <SomeExternalLibraryModal isOpen={isOpen} onClose={onClose}>
      <form>
        <input
          value={inputValue}
          onChange={(e: ChangeEvent<HTMLInputElement>) =>
            setInputValue(e.target.value)
          }
        />
        <button onClick={onClose}>Cancel</button>
      </form>
    </SomeExternalLibraryModal>
  )
}

推荐答案

关于此测试库希望您进行测试的方式，您对您的测试方法的怀疑是正确的。这个问题的最简单答案是使用getByDisplayValue查询。它将搜索输入textarea，或选择具有您试图查找的值的输入。例如，以您的组件为例，如果我试图验证inputValue = 'test'，我将搜索如下

expect(screen.getByDisplayValue('test')).toBeInTheDocument();

这就是您需要做的全部工作。我假设您的测试只呈现MyModal组件。即使您有多个输入，对于测试原理来说也无关紧要。只要getByDisplayValue找到任何具有该值的输入，它就是一个成功的测试。如果您有多个输入，并且想要测试确切的输入是否具有该值，则可以深入研究元素以确定它是正确的输入：

注意：您需要jest-dom才能正常工作。

expect(screen.getByDisplayValue('test')).toHaveAttribute('id', 'the-id');

或(不含jest-dom)：

expect(screen.getByDisplayValue('test').id).toBe('the-id');

您当然可以搜索您喜欢的任何属性。

测试值的最后一个替代方法是按角色查找输入。这在您的示例中是行不通的，除非您添加一个标签并通过htmlFor属性将其关联到您的输入。然后您可以像这样测试它：

expect(screen.getByRole('input', { name: 'the-inputs-id' })).toHaveValue('test');

或(不含jest-dom)：

expect(screen.getByRole('input', { name: 'the-inputs-id' }).value).toBe('test');

我认为这是测试值的最佳方式，同时确保正确的输入具有值。我建议使用getByRole方法，但同样，您需要在示例中添加标签。

这篇关于在DOM测试库或反应测试库中测试输入值的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！