在过去，我和我的同事通常会为主父组件编写 React 测试库 (RTL) 测试，这些父组件通常有许多嵌套的子组件。该测试很有意义并且效果良好。顺便说一句，所讨论的子组件非常专用于该父组件，而不是可重用的组件。
但现在我们正在尝试为每个组件编写 RTL 测试。今天我试图为一个Alerts组件构建测试，该组件是一个组件的父组件Alert，比顶级组件低大约 4 级。这是我的测试文件中的一些示例代码：
function renderDom(component, store) {
return {
...render(<Provider store={store}>{component}</Provider>),
store,
};
}
let store = configureStore(_initialState);
const spy = jest.spyOn(store, 'dispatch');
const { queryByTestId, queryByText, debug } = renderDom(
<Alerts question={store.getState().pageBuilder.userForm.steps[0].tasks[0].questions[1]} />,
store
);
然后我开始编写典型的 RTL 代码以使Alerts组件完成其任务。其中之一是单击将触发ADD_ALERT操作的按钮。我单步执行了所有代码，Redux 减速器显然在新警报下正常工作，正如我所预期的那样，但回到组件中Alerts，它question.alerts仍然存在null，而在生产代码中，它肯定是在新警报下正确更新的。
我与一位同事交谈，他说对于这种类型的测试，我需要人为地重新渲染组件，如下所示：
rerender(<Provider store={store}><Alerts question={store.getState().pageBuilder.userForm.steps[0].tasks[0].questions[1]} /></Provider>);
我尝试了这个，这似乎是一个解决方案。我不完全理解为什么我必须这样做，并认为我应该联系社区，看看是否有一种方法可以避免使用rerender.
这是我的 React 测试库测试中的一行：
expect(queryByTestId('tile-sample-service')).toHaveClass('regularTile-0-2-24', 'btn', 'btn-outline-secondary');
虽然它有效，但测试很脆弱，因为每次组件的结构发生变化时，我都需要返回并修复已更改的数字。
有没有一种方法可以toHaveClass与 RegEx 查询一起使用，或者是否有其他方法可以检查类是否存在但避免添加“0-2-24”之类的内容？
这是我编写的一些运行良好的示例代码：
useEffect(() => {
if (!rolesIsLoading && rolesStatus === 200) {
customer.roles = rolesData.roles;
}
}, [rolesIsLoading, rolesStatus]);
我在控制台中收到此警告：
React Hook useEffect 缺少依赖项：“customer.roles”和“rolesData.roles”。包括它们或删除依赖数组 react-hooks/exhaustive-deps
问题是，代码现在工作正常，在某些情况下，当我按照指示添加此类依赖项时，我最终会遇到无限循环或其他一些问题。
如果您遇到类似情况时如何解决此问题，我将不胜感激。
通过 Javascript 函数 JSDocs，我看到了两种不同的语法来记录可为空的返回值。
假设我们有这个函数：
const getTitle = () => { // Can return string or null };
为此，以下 JSDocs 中哪一项是正确的：
我和我的同事已成功使用React-JSS：https：//cssinjs.org/react-jss
但是，迄今为止，样式已嵌入到React组件文件中。随着样式数量的增加，我们希望将样式移到文件styles.js或styles.css文件中（我们不在乎）。
到目前为止，尝试此操作尚未成功。
可能有人做过，可以提供一些提示吗？
我已经构建了几个模态作为 React 功能组件。它们通过isModalOpen模态关联上下文中的布尔属性显示/隐藏。这非常有效。
Now, for various reasons, a colleague needs me to refactor this code and instead control the visibility of the modal at one level higher. Here's some sample code:
import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import { UsersProvider } from '../../../contexts/UsersContext';
import AddUsers from './AddUsers';
const AddUsersLauncher = () => {
const [showModal, setShowModal] = useState(false);
return (
<div>
<UsersProvider>
<Button onClick={() => setShowModal(true)}>Add Users</Button>
{showModal && <AddUsers />}
</UsersProvider>
</div> …