如何从屏幕上从反应测试库中获取呈现的 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()

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

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

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

如何从屏幕上从反应测试库中获取呈现的 HTML 元素？

how to get the rendered HTML element from the screen, from react testing library?

reactjs

react-testing-library