React testing library, how to get text from element

Question

I'm trying to test a table being built using react testing library

I'm using debug which outputs

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

I'm trying to assert test table data is there with

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

but it fails with

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

How can I assert the text test table data is there

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')
    })

})

can you show the HTML template(not debug output) also

Sanka Sanjeeva
– Sanka Sanjeeva

2022-02-12 13:31:59 +00:00
Commented Feb 12, 2022 at 13:31 — Sanka Sanjeeva
– Sanka Sanjeeva, Commented Feb 12, 2022 at 13:31

Avi · Accepted Answer · 2022-02-12 22:26:47Z

7

You can just do getByText('test table data') without asserting anything.

getByText will fail your test if it cannot find the text it is looking for. If the text is there and your test passes, you essentially asserted that it is there even if you haven't used expect() assertion explicitly. Though be careful when using queryByText (or any other react-testing-library method that starts with query), using that will return null, so if it can't find the text it is looking for it won't fail you test and you will get a false positive.

If you still want to use an expect you can try doing something like:

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

answered Feb 12, 2022 at 22:26

Avi

1,4991 gold badge10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ruchira Nawarathna · Accepted Answer · 2023-11-06 11:05:57Z

3

The issue is you are using findByTestId to query the element. Instead you need to use getByTestId. Because findByTestId returns promise and getByTestId returns matching node. You can refer the documentation here.

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

Even you can use findByTestId with waitFor

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

answered Nov 6, 2023 at 11:05

Ruchira Nawarathna

1,5271 gold badge23 silver badges37 bronze badges

Collectives™ on Stack Overflow

React testing library, how to get text from element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related