在React中创建包装UI库的通用UI

Question

我将举一个真实的例子来说明我要解决的问题。

我的团队负责使用语义UI 作为其UI库构建的React应用。这是编写的测试列表（请注意，我们对测试类型有自己的定义）

• 单元测试：使用酶对每个组件进行测试。
• 系统测试：主要在容器组件上进行。用于嘲笑的酶，正弦波和提取模拟。
• 端到端测试：与操纵up无关。

后来，我们的产品经理希望使用基于 Manerial UI 的主题。为了使其成为可能，我们需要

1. 用材料UI组件替换语义UI组件
2. 为我们的系统和部门编写新的测试助手。然后更新我们所有的测试以使用新的测试帮助器
3. 为端到端测试编写新的助手。

使它成为可能是一个痛苦的过程，但仍然部分完成了。我认为我们的错误之一不是定义更通用的组件并包装我们的UI逻辑。但是，在回顾了语义UI 和材料UI 的组件API之后，我想知道这是否有可能。由于：

1. 每个库对组件的实现方式不同
2. 组件具有不同的属性
3. HTML结构不同，因此在交换UI库时仍需要更改“端到端”测试。

现在我的问题是：有人遇到过同样的问题吗？您是如何解决这个问题的？