Adding Tests with React Testing Library Best Approach

Tags: #<Tag:0x00007fce6a28a6a0> #<Tag:0x00007fce6a28a538>
#1

Hi,

We have multiple instances where we want to test certain cells / columns with React Testing Library.

So for instance we might have a component something like

const Component => <HotTable columns={[{ data: 'test', title: 'Test' ]} data={[{ test: 'a' }, { test: 'b' }, { test: 'c' }]}   />

And then our test might be something like

const screen = render(<Component />)

I was thinking that this would render the whole of the table but it appears we can only access the first cell on the first column. Making it difficult to test other values.

Do you have any advise on how we either solve the issue above or how we could test handsontable

Thanks, James

#2

Hi @james.dale

We have no experience in testing Handsontable with React Testing Library. However, is this exactly how your code looks like?

const Component => <HotTable columns={[{ data: 'test', title: 'Test' ]} data={[{ test: 'a' }, { test: 'b' }, { test: 'c' }]}   />

I mean, what is exactly under the test key, because in current form it will indeed render only one cell.

#3

Hey,

I think the above would give you three cells? One columns and 3 Rows.

We headed down a different route in the end and are now using the handsontable instance in testing to test functionality. Using methods such as getDataAtCell etc… which is working fairly well. It does go off the RTL path a bit, but seems like an okay solution for now and helps us test + improves DX when testing which is the main thing.

#4

Hi @james.dale

Thank you for the update. I’m glad that you were able to find a suitable solution for your case.

#5