Question

我使用带有--typescript选项的create-react-app生成了一个项目。

这是我的应用程序

import React from 'react';

const App: React.FC = () => {
  return (
    <div className="App">
        <div>
            <h1 id="pageHeader">Home page</h1>
            <p>This is the Home page</p>
        </div>
    </div>
  );
};

export default App;

我当前的测试是：

import React from 'react';
import ReactDOM from 'react-dom';
import {render} from '@testing-library/react';
import "@testing-library/jest-dom/extend-expect";
import App from './App';

test('Verify page header', () => {
    const {getByText} = render(<App/>);
    expect(getByText('Home page')).toBeInTheDocument;
});

问题： 我想再测试一点。除了测试“主页”是否出现在我页面的任何位置之外，我还要确保文本“主页”位于h1元素中。如何从react-testing-library中获取完整元素（最好通过getElementById），以便可以用Jest对其进行断言？

Answer 1

根据您自己的回答，有两点：

您应避免在测试中进行任何逻辑分支。测试中的逻辑可能会导致不稳定的测试，因为未测试中的逻辑。对于您而言，if块是不必要的，因为如果文本内容不存在，则测试将已经失败。
有两种简单的方法可以测试文本“主页”是否位于h1中：

找到文本并期望元素为h1：

test('Verify page header', () => {
    const {getByText} = render(<App/>);
    expect(getByText('Home page').tagName).toBe('H1');
});

或者给h1一个data-testid并使用getByTestId：

<h1 data-testid="pageHeader">Home Page</h1> // <-- In your component

test('Verify page header', () => {
    const {getByTestId} = render(<App/>);
    expect(getByTestId('pageHeader').textContent).toBe('Home Page');
});

Answer 2

我设法这样解决：

test('Verify page header', () => {
    const {container} = render(<App/>);
    const pageHeaderElement = container.querySelector('#pageHeader');
    if (pageHeaderElement) {
        const pageHeaderElementContent = pageHeaderElement.firstChild;
        if (pageHeaderElementContent) {
            // You can either do:
            expect(pageHeaderElementContent.textContent).toMatch('Home page');
            // Or:
            expect(pageHeaderElementContent).toMatchInlineSnapshot('Home page');
        } else {
            fail('Should have existed.');
        }
    } else {
        fail('Should have existed.');
    }
});

我在react-testing库的文档中找到了关于此toMatchInlineSnapshot方法的信息： https://testing-library.com/docs/react-testing-library/api#render

带有新的TypeScript可选链接的更短版本：

test('Verify page header', () => {
    const {container} = render(<App/>);
    const pageHeaderContent = container.querySelector("#pageHeader")?.firstChild?.textContent;
    expect(pageHeaderContent).toMatch('Home page');
});

如何使用React测试库测试Create-React-App（在TypeScript中）的特定元素

2 个答案: