react-bootstrap-table / react-bootstrap-table2

Next Generation of react-bootstrap-table
https://react-bootstrap-table.github.io/react-bootstrap-table2/
MIT License
1.27k stars 431 forks source link

Bootstrap table UI code testing using JavaScript test libraries #1533

Open rakhis08 opened 3 years ago

rakhis08 commented 3 years ago

Question Hi Team,

I am looking/searching for Bootstrap table UI code testing using JavaScript test libraries. We used PaginationProvider and ToolkitProvider with Bootstrap table in reactJs Project. Could you please provide me some Bootstrap code test sample using JavaScript test libraries.

Thanks, Rakhi.

jeancochrane commented 3 years ago

I'm curious about this too! In particular I'd like to test a simple filtering operation using the Search component. I tried to test it with Jest and Enzyme utilities but the following test fails:

it('displays search box', () => {
  // Init a table with two rows
  const wrapper = mount(
    <Provider store={store}>
      <MyTable />
    </Provider>
  );
  expect(wrapper.find(SearchBar).length).toBe(1);
  expect(wrapper.find('tr')).toBe(3);  // This passes
  expect(wrapper.find(SearchBar).props().value).toBe('') // This passes

  // Try to simulate a search for a term that doesn't show up in either row
  wrapper.find(SearchBar).props().onSearch('foobarbaz');
  expect(wrapper.find(SearchBar).props().value).toBe('foobarbaz') // This passes
  // This fails; all 3 rows are still present in the table, even though the value has changed in the input
  expect(wrapper.find('tr')).toBe(1);  
});

It seems like I probably need to hook into the context provided by ToolkitProvider but there's no clear way to do that and no tests in this repo that I can learn from as far as I can tell.