CODEWITHSUNDEEP
reactjsjestjsreact-testing-library
VishwaKumar
VishwaKumar

Reputation: 3433

React Testing Library: Objects are not valid as a React child

I am trying to write test using jest and I hit this error

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
        in td (created by TableCell)
        in TableCell (created by DataTable)
        in tr (created by TableExpandRow)
        in TableExpandRow (created by DataTable)
        in tbody (created by TableBody)
        in TableBody (created by DataTable)
        in table (created by Table)
        in Table (created by DataTable)
        in div (created by DataTable)
        in div (created by TableContainer)
        in TableContainer (created by DataTable)
        in div (created by DataTable)
        in DataTable
        in Unknown
        in Unknown (created by EnhancedDataTable)
        in EnhancedDataTable (created by MyPage)
        in div (created by MyPage)
        in MyPage


  27 | 
  28 |     it('renders', () => {
> 29 |         const { container } = render(<MyPage />);

MyPage is a functional component which returns

<React.Fragment>
    <MyHeader title={'Page Header'} />
    <div className="page-content">
        <EnhancedDataTable
            actions={actions}
            rowActions={rowActions}
            headers={rowHeaders}
            rowDetail={rowDetail}
            rows={rowsData}
            className='my-table'
        />
    </div>
</React.Fragment>

What am i missing here ?

Upvotes: 0

Views: 2267

Answers (1)

Arthur Bruel
Arthur Bruel

Reputation: 673

You are trying to render an object (promise) as a child. From your code it's hard to know where, but, assuming that your table works like rc-components table, it could be something like this:

Lets say I have an array and want to render it to a table

const arr = [
  {
    company: 'XYZ',
    owner: {
      name: 'Julius'
    }
  }
]

Now, i want to render it in a table with columns: | company | owner |, so I create a headers array:

const arr = [
  {
    dataIndex: 'company'
  },
  {
    dataIndex: 'owner'
  }
]

Now, this wont work, because my table will try to render the object {name: 'Julius'}, and objects are not valid as react children.

The fix would be changing my headers to something like:

const arr = [
  {
    dataIndex: 'company'
  },
  {
    dataIndex: ['owner', 'name']
  }
]

Now it should work, because the colum will be row['owner']['name'], a string.

Without more code, it's hard to tell exactly where the problem is, but hopefully the exemple gave you an idea o what react means with that error. all i know is that the error is somewhere in the cells of your table, since the stack shows in Unknown (created by EnhancedDataTable) and the last (or first, i guess) item is a td, a common element for table data.

Upvotes: 1

Related Questions