使用 Material UI 工具提示测试组件时发出警告
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 中得到修复。有关详细信息,请参阅 here。
我刚刚将我的项目从 React“16.8.6”更新为“16.9.0”,但控制台上仍然出现相同的错误...
更新:
要修复一些错误,我必须添加 act(() => { functionThatUpdateState(); })
对于其他错误,例如使用 Material Ui 工具提示时,我必须这样做:
beforeEach(() => {
jest.useFakeTimers();
})
it("should do something", () => {
act(() => {
const { getByText } = render(<MyComponent />);
jest.runAllTimers();
expect(getByText("hey")).toBeDefined();
})
});
这是 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 中得到修复。有关详细信息,请参阅 here。
我刚刚将我的项目从 React“16.8.6”更新为“16.9.0”,但控制台上仍然出现相同的错误...
更新:
要修复一些错误,我必须添加 act(() => { functionThatUpdateState(); })
对于其他错误,例如使用 Material Ui 工具提示时,我必须这样做:
beforeEach(() => {
jest.useFakeTimers();
})
it("should do something", () => {
act(() => {
const { getByText } = render(<MyComponent />);
jest.runAllTimers();
expect(getByText("hey")).toBeDefined();
})
});