![](/img/trans.png)
[英]Material UI Tooltip does not appear when rendered inside of a custom Modal component
[英]act warning when testing component with Material UI Tooltip
这是对https://github.com/mui-org/material-ui/issues/15726#issuecomment-507293766的跟进
我有一个组件Registration
,它有一个按钮,默认情况下是禁用的(通过单击复选框控制,接受条款和条件),如果将鼠标悬停在上面,则显示工具提示消息以接受条款和条件。 下面是测试结果和测试本身。
√ without consent, cannot go further (190ms)
console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: An update to ForwardRef(Popper) inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at ...
in ForwardRef(Popper) (created by Tooltip)
in Tooltip (created by WithStyles(Tooltip))
....
我的测试(使用@testing-library/react
):
jest.useFakeTimers()
it('without consent, cannot go further', () => {
const {getByText} = render(<Registration/>)
const loginButton = getByText(/Log in/)
act(() => {
fireEvent.mouseEnter(loginButton)
jest.runAllTimers()
})
expect(getByText(/Please accept our terms and conditions/)).toBeInTheDocument()
})
我按照 GitHub 问题的建议添加了假计时器,但没有帮助。
不要担心行为警告。 它会在下一个版本的 React 中得到修复。 请参阅此处了解更多信息。
我只是将我的项目从“16.8.6”更新为“16.9.0”,但在控制台上仍然出现相同的错误...
更新:为了修复一些错误,我必须添加act(() => { functionThatUpdateState(); })
对于其他错误,例如使用 Material Ui Tooltip 时,我必须执行以下操作:
beforeEach(() => {
jest.useFakeTimers();
})
it("should do something", () => {
act(() => {
const { getByText } = render(<MyComponent />);
jest.runAllTimers();
expect(getByText("hey")).toBeDefined();
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.