如何获取H1标签的值并使用Jest和RTL进行测试

Question

我正在尝试测试我的组件是否在 h1 中显示正确的值。

\n

下面是我将要测试的组件。

\n

  const Title = () => {\n  return (\n    <>\n      <h1 aria-label='Title of the project'>MY RTL PROJECT</h1>\n    </>\n  );\n};\n\nexport default Title;\n

\n

这是我的测试文件，尝试检查我的组件是否显示“MY RTL PROJECT”。

\n

import { render, } from '@testing-library/react';\nimport Title from '../Title';\n\n\n    describe('Checks the title component', () => {\n    \n        it('checks the value of the Title component', () => {\n            const { getByText } = render(<Title />);\n            const titleValue = getByText('MY RTL PROJECT')\n            expect(titleValue).toBe('MY RTL PROJECT')\n        })\n    })\n

\n

这是错误： “messageParent”只能在工作人员内部使用

\n

  \xe2\x97\x8f Checks the title component \xe2\x80\xba checks the value of the Title component\n\nexpect(received).toBe(expected) // Object.is equality\n\nExpected: "MY RTL PROJECT"\nReceived: <h1 aria-label="Title of the project">MY RTL PROJECT</h1>\n

\n

Answer 1

这行：

const titleValue = getByText('MY RTL PROJECT')

...返回一个元素，而不是该元素包含的文本。所以代替这一行：

expect(titleValue).toBe('MY RTL PROJECT')

...你可能想使用jest-dom toHaveTextContent()：

expect(titleValue).toHaveTextContent('MY RTL PROJECT')

也就是说，您通过文本获取一个元素，然后验证它包含您刚刚用于查询它的文本，因此该测试可能没有很高的价值。验证它是否存在可能更有意义：

const titleValue = getByText('MY RTL PROJECT')
expect(titleValue).toBeInTheDocument();

...这也来自jest-dom。

aria-label另外，虽然我不能肯定地说，但将与标题包含的文本不同的文本应用于标题的用法对我来说似乎是可疑的——您可能想验证这并不代表可访问性反模式。