如何使用react-testing-library测试react-select

如何使用react-testing-library测试react-select

这一定是关于RTL的最常见的问题：D

最好的策略是使用

jest.mock

（或测试框架中的等效方法）模拟选择并呈现HTML选择。

有关为什么这是最佳方法的更多信息，我也写了一些适用于这种情况的内容。OP询问了Material-UI中的选择，但是想法是一样的。

原始问题和我的答案：

因为您无法控制该UI。它在第3方模块中定义。

因此，您有两种选择：

您可以找出材质库创建的HTML，然后使用container.querySelector查找其元素并与之交互。这需要一段时间，但应该可行。完成所有这些 *** 作后，您必须希望在每个新发行版中，它们不要过多地更改DOM结构，否则您可能必须更新所有测试。

另一个选择是相信Material-UI将使组件能够正常工作并且用户可以使用。基于这种信任，您只需在测试中替换该组件即可。

是的，选项一测试用户看到的内容，但是选项二更易于维护。

以我的经验，第二种选择很好，但是当然，您的用例可能有所不同，您可能必须测试实际的组件。

这是一个如何模拟选择的示例：

jest.mock("react-select", () => ({ options, value, onChange }) => {  function handleChange(event) {    const option = options.find(      option => option.value === event.currentTarget.value    );    onChange(option);  }  return (    <select data-testid="select" value={value} onChange={handleChange}>      {options.map(({ label, value }) => (        <option key={value} value={value}>          
        </option>      ))}    </select>  );});

您可以在这里阅读更多内容。