我需要从电影列表组件中测试我的 ul 中的结果,但我一直无法找到元素 [data-testid=movieList]
我的电影列表组件
</section>
{isLoaded ? (
items.length === 0 ? (
<div>No Results Found</div>
) : (
<ul className="mt-50 styled" data-testid='movieList'>
{items.map((item) => (
<li className="slide-up-fade-in py-10" key={item.id}>
{item.Title}
</li>
))}
</ul>
)
) : (
<div className="mt-50 slide-up-fade-in" data-testid="no-result"></div>
)}
</div>
我的测试
import React from 'react';
import App from './App';
import { render, fireEvent, cleanup, waitFor , screen} from '@testing-library/react';
import fetchMock from 'fetch-mock';
import '@testing-library/jest-dom/extend-expect';
const renderApp = () => render(<App/>);
afterEach(() => {
fetchMock.restore();
cleanup()
});
test('initial UI is rendered as expected', () => {
let { getByTestId, queryByTestId } = renderApp();
expect(getByTestId('app-input')).toHaveValue(null);
expect(getByTestId('submit-button')).toHaveTextContent("Search");
expect(screen.getByTestId('movieList').childNodes).toHaveLength(0);
expect(queryByTestId('no-result')).toBe(null);
});