React测试库，如何从元素获取文本

Question

React测试库，如何从元素获取文本

lom*_*ine 5 reactjs react-testing-library

我正在尝试测试使用反应测试库构建的表

我正在使用 debug 输出

<body>
    <div>
      <div
        class="table-wrapper"
      >
        <div
          class="table-component__header"
        />
        <table
          class="test-table"
        >
          <tbody>
            <tr>
              <td
                class="text-grid-item"
                data-testid="text-grid-item"
              >
                test table data
              </td>
            </tr>
          </tbody>
          <tfoot
            class="table_footer"
          >
            <tr>
              <td />
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

我试图断言test table data那里有

expect(findByTestId('text-grid-item')).toHaveTextContent('test table dat')

Run Code Online (Sandbox Code Playgroud)

但它失败了

received value must be a Node.
Received has type:  object
Received has value: {}

Run Code Online (Sandbox Code Playgroud)

我怎样才能断言文本test table data在那里

import React from 'react'
import { render } from '@testing-library/react'
import { Table } from './table'

const givenTableWithElement = (test: Array<TableElement>) => {
    const table = {
        tableEntries: [{ tableElements: test }],
        type: 'table',
        tableType: 'test'
    }
    return table
}

describe('Components should render depending on their prop type', () => {

    test('Given table element is text, when rendered, text table class should be returned', () => {
        const imageTableTest: TableProps = givenTableWithElement([
            {
                text: 'test table data',
                display: {
                    mobile: true,
                    wrap: false
                }
            }
        ])

        const { debug } = render(<Table {...imageTableTest} />)
        debug()

        const { getByTestId } = render(<Table {...imageTableTest} />)

        expect(findByTestId('text-grid-item')).toHaveTextContent('test table dat')
    })

})

Run Code Online (Sandbox Code Playgroud)

Answer 1

Avi*_*Avi 5

你可以不断getByText('test table data')言任何事情。

getByText如果找不到它要查找的文本，测试就会失败。如果文本在那里并且您的测试通过，那么即使您没有expect()明确使用断言，您实际上也断言它在那里。尽管在使用（或以开头的queryByText任何其他方法）时要小心，但使用它将返回，因此如果它找不到它正在寻找的文本，它不会使您的测试失败，并且您会得到误报。react-testing-libraryquerynull

如果您仍然想使用，expect您可以尝试执行以下操作：

const gridItemText = getByTestId('text-grid-item').innerHTML
expect(gridItemText).toBe('test table data')

Run Code Online (Sandbox Code Playgroud)

归档时间：	3 年，8 月前
查看次数：	15227 次
最近记录：	1 年，11 月前