如何从屏幕、反应测试库获取渲染的 HTML 元素？

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()

然后运行 ​​test，它将toMatchInlineSnapshot()用 HTML 填充括号，如下所示：

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

有关更多信息，请参阅此处：快照测试