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>