React testing library - html container returing wihout mock values

Viewed 18

I have an react application with ant design, I'm trying to test a component that receives values from it's parent component, but when I mock those values into my test file, I just got a render of my html tags structure without the data values inside them.

Products.jsx

const Products = ({
   productsList
}) = {
   const [myProducts, setMyProducts] = useState(undefined)
  
   useEffect(() => {
      setMyProducts(productsList)
   }, [productsList])
   
   ...

   return 
     <>
      <OtherComponent />
      <Table 
         ...
         dataSource={myProducts}
      />
     </>
}

it('should render without errors', () => {
    const productsMock = [
      {
        name: 'sample_product',
        tag: 'a',
        date: '01/12/2012',
      },
      {
        name: 'sample_product',
        tag: 'b',
        date: '01/12/2012',
      }
    ]
    const { container } = render(
      <Products  
           productsList={productsMock}
      />
    )
    expect(container).toBeInTheDocument()
  })
})

The test works, but I'm wondering why those mocked values are not appearing when I tried to access them via element.container.innerHTML

what I got:

<tr><td><td/></tr>

what I needed:

<tr><td>sample_product<td/></tr>
0 Answers
Related