FlexGrid unit test with Jest and RTL not rendering rows

FlexGrid unit test with Jest and RTL not rendering rows

Posted by: scott.chinn on 16 July 2020, 10:41 am EST

• 

  scott.chinn

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 16 July 2020, 10:41 am EST

  Hi, I have a simple Jest test (with React Testing Library). I get the grid to render, but the data rows never appear. Any idea why?

  import '@grapecity/wijmo.styles/wijmo.css';
  import React from 'react';
  import {
    FlexGrid,
    FlexGridColumn,
  } from '@grapecity/wijmo.react.grid';
  
  import {render, screen} from '@testing-library/react';
  
  const mockRowData = [{"pk":1,"shortName":"Burrito Short","longName":"Burrito Long"},
                       {"pk":2,"shortName":"Taco Short","longName":"Taco Long"}
                       ];
  
  it('should render data on the screen', () => {
      render(
          <FlexGrid itemsSource={mockRowData} >
              <FlexGridColumn header="Pri Key" binding="pk" width="*" />
              <FlexGridColumn header="Short Name" binding="shortName" width="*" />
              <FlexGridColumn header="Long Name" binding="longName" width="*" />
          </FlexGrid>
      );
      const node = screen.getByText(/Burrito Short/i);
      screen.debug();
  });
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 16 July 2020, 3:47 pm EST

  Hi Scott,

  FlexGrid uses virtualization to improve performance and decrease memory usage on large data sets. It means that HTML elements are created only for visible data items. During scrolling some data items become invisible and its corresponding html-elements are destroyed, some items become visible and its corresponding elements are created. This behavior is controlled by virtualizationThreshold property of FlexGrid (https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#virtualizationthreshold)

  Grid container height and width are zero during the test run. So no rows are visible and no corresponding html-elements are created.

  To get html-elements for all data items during test run you need to:

  1. Set the virtualizationThreshold property to value while testing.
  2. After rendering the grid in the test case, call the waitForDomChange method to wait for the grid to render properly.

  So your test case will become something like this:

  it('should render data on the screen', async () => {
      render(
          <FlexGrid itemsSource={mockRowData} virtualizationThreshold={100} >
              <FlexGridColumn header="Pri Key" binding="pk" width="*" />
              <FlexGridColumn header="Short Name" binding="shortName" width="*" />
              <FlexGridColumn header="Long Name" binding="longName" width="*" />
          </FlexGrid>
      );
      await waitForDomChange():
      const node = screen.getByText(/Burrito Short/i);
      screen.debug();
  });
  

  I have attached the sample for reference. Please make sure to add the async/await modifier to the test method.

  Regards,
  
  Ashwin

  react test.zip

• 

  scott.chinn

  • Post Options:
  • Link
    Copy

  Posted 3 August 2020, 10:45 am EST

  Hi, thanks for this, but I don’t think your sample actually renders the rows. If you search for “Doohickey” in the html (that is in the console), it’s not there. It renders the grid, the column headers, but no rows.

  I noticed you are also using Enzyme, I’m trying to use React Testing Library. Perhaps they have both have the same issue, but it would be great if you could help make it work with this simple react testing library example. I tried the various different ways it supports async operations ( https://testing-library.com/docs/dom-testing-library/api-async ) . None of them work.

  
  /**  * @jest-environment jsdom-sixteen  */
  
  import '@grapecity/wijmo.styles/wijmo.css';
  import React from 'react';
  import {
    FlexGrid,
    FlexGridColumn,
  } from '@grapecity/wijmo.react.grid';
  
  import {render, screen, waitFor, waitForDomChange} from '@testing-library/react';
  
  const mockRowData = [{"pk":1,"shortName":"Burrito Short","longName":"Burrito Long"},
                       {"pk":2,"shortName":"Taco Short","longName":"Taco Long"}
                       ];
  
  it('should render row data on the screen', async () => {
      render(
              <FlexGrid style={{height: '100%', width: '100%'}} itemsSource={mockRowData} virtualizationThreshold={1000} >
                  <FlexGridColumn header="Pri Key" binding="pk" width="*" />
                  <FlexGridColumn header="Short Name" binding="shortName" width="*" />
                  <FlexGridColumn header="Long Name" binding="longName" width="*" />
              </FlexGrid>
      );
  
     /* await waitFor(() => {
          expect(screen.getByText(/Burrito Short/i)).toBeInTheDocument();
  
        })*/
       //await waitForDomChange();
      //const node = screen.getByText(/Burrito Short/i);
      //screen.debug();
  
      const node = await screen.findByText(/Burrito Short/i);
  
  });
  
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 4 August 2020, 12:55 am EST

  Hi Scott,

  We are working on this and will update you as soon as possible.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 4 August 2020, 11:48 pm EST

  Hi Scott,

  I copied your test code in the sample and it did not pass. So, I started investigating. After some investigating, I found out that it was an issue of width and height like I said in the previous post. So, I updated the virtualizationThreshold property to virtualize rows and columns both. Also, I provided fixed width to each column instead of star-sizing and the test passed without any issues.

  The same test code that you provided ran without any issues while using waitForDomChange method and did not work properly with waitFor method. So, it seems that we need to update our test case a little bit to be compatible with waitFor method.

  I have attached the updated sample.

  >>If you search for “Doohickey” in the html (that is in the console), it’s not there.

  In the previous sample, the data was random. So, it may be possible that Doohickey was not present at the time of testing, In the updated sample, I have changed the logic so that Doohickey will always be present in the grid.

  >>It renders the grid, the column headers, but no rows.

  The grid rendered the rows but the screen.debug() method only displays the first 7000 characters while displaying the DOM. All of the remaining part of the DOM were not logged on the console.

  ~regards

  react test.zip

• 

  scott.chinn

  • Post Options:
  • Link
    Copy

  Posted 6 August 2020, 3:19 pm EST

  Thanks! Now my cases are working.