Question

我正在尝试测试一个组件，但我的测试总是失败，因为它们在组件呈现之前开始，我的测试只在几秒钟后识别组件元素。

我尝试使用 setTimeOut 并且它有效，但这是不好的做法，因为我不知道组件完成渲染的确切时间，所以我想找到一个解决方案来改变它。我正在使用 react 测试库。

我的测试：

import { render } from '@testing-library/react';
import Component from '../components/Component/Component';
import React from 'react'
import ReactTestUtils from 'react-dom/test-utils';

let props = {
    reorderList: jest.fn(),
}

const setup = () => {
    const utils = render(<Component {...props} />)

    const reorder = utils.queryByTestId("reorder")
    return {
        reorder,
        ...utils,
    }
}

describe('Example Component', () => {

    test('Test', async () => {
            const { reorder } = setup()
            ReactTestUtils.Simulate.click(reorder)
            expect(props.reorderList).toBeCalled()
    })
});

我的组件

const [isLoaded, setIsLoaded] = useState(false);

...

useEffect(() => {
    fetchData() //Set isLoaded to true after the data is fetched
}, [])

...

if (error) {
    return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
    return <div>Loading...</div>;
} else {
    return (
        <>
            <div className="rows">
                <div className="filter">
                   <button id="reorder" onClick={(e) => { reorderList() }}>Reorder</button>
                </div>
                <div className="main">
                    {render()}
                </div>
            </div>
        </>
    );
}

如何在组件渲染后开始测试？

0 个答案: