reactjs - 如何从屏幕上获取渲染的 HTML 元素，从 react 测试库？

Question

在 react 测试库中，我想从屏幕上获取整个呈现的 HTML，并检查它是否正确呈现并存在于 dom 中。

我看到屏幕有查询 DOM 的方法，但是如何访问呈现的完整 HTML。

import React from 'react';
import {render, screen} from '@testing-library/react';
import '@testing-library/jest-dom';
import {server} from '../__mock__/server.mock';
import InfoBar from '../Components/infoBar';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('InfoBar renders correctly.', async () => {
    render(<InfoBar/>);
    expect(screen).toBeInTheDocument();
});

expect(screen).toBeInTheDocument(); 这行不通。

Answer 1

如果你想获得整个 HTML，你可以尝试使用

const { container } = render(<InfoBar />);
expect(container).toMatchSnapshot()

这将保存一个快照文件，您可以查看该文件。

或者要获取 HTML 本身的快照，您可以使用:

expect(container).toMatchInlineSnapshot()

然后运行测试，然后用 HTML 填充 toMatchInlineSnapshot() 的括号，如下所示:

expect(container).toMatchInlineSnapshot(`
  <div>
    <p>Hello World</p>
  </div>
`)

有关更多信息，请参阅此处:Snapshot Testing