测试异常——unstable_flushDiscreteUpdates

Question

我有一个使用 Jest 和 react-testing-library 和 .tsx 测试文件 (TypeScript) 的测试：

import React from "react";
import { Provider } from 'react-redux';
import { render, screen } from "@testing-library/react";
import Home from "./Home";
describe('Home', () => {
    test("renders Programs without crashing", async () => {
        const storeFake = (state: any) => ({
            default: () => { },
            subscribe: () => { },
            dispatch: () => { },
            getState: () => ({ ...state })
        });
        const store = storeFake({}) as any;
        const { getByAltText } = render(<Provider store={store}>
                                            <Home />
                                        </Provider>);
        // render should show the title
        expect(getByAltText(/Great State/)).toBeInTheDocument();
    });

测试通过但抛出异常：

console.error node_modules/react-dom/cjs/react-dom.development.js:88
  Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.
      in video (at Home.tsx:10)
      in div (at Home.tsx:9)
      in Home (created by ConnectFunction)
      in ConnectFunction (at Home.test.tsx:15)
      in Provider (at Home.test.tsx:14)

首先，有谁知道如何解决异常。其次，我知道这是一个警告，但看起来很严重，测试不应该失败吗？

Answer 1

正如错误消息所述，它是一个 React 警告，与 React 测试库无关。根据这个线程https://github.com/facebook/react/issues/10389，这实际上是一个 React 问题。当您使用具有 muted 属性的 <video /> 元素时，您可能会遇到此警告。

您可以在beforeAll 块内或在执行测试用例之前尝试以下代码。

   Object.defineProperty(HTMLMediaElement.prototype, "muted", {
       set: jest.fn(),
   });

假设您在组件中使用<video /> 标签，它应该可以工作，如下所示。

<video src={videoPath} muted />

Answer 2

属性与属性

由于 React 设置了静音 property 而不是正确地将 attribute 传递给元素，因此出现此错误：第一个反映当前值，而后者反映 >组件的初始状态。因此，将muted 设置为道具会错误地触发事件。

解决方案：您也可以在 useEffect 挂钩中设置“静音”属性。

function VideoComponent() {
    const videoRef = createRef<HTMLVideoElement>()
    const source = '/path/to.mp4'

    useEffect(() => {
        const { current: video } = videoRef
        video && (video.muted = true)
    }, [])

    return (
        <video 
            ref={videoRef} 
            src={source}
            autoPlay loop playsInline  
            />
    )

}