Articles in this section

Testing the grid with React/Jest

Robin Denton
  • Updated
Follow

Testing with Enzyme (hooks)

This example repro shows how hook-based grid can be tested using Enzyme, Jest & React. 

https://github.com/seanlandsman/ag-grid-react-hook-testing 

Note that in this case, we use have to try wrap the App component within a forwardRef and expose the API with useImperitiveHandle. 

 

Testing with Ezyme (components)

We have built an example for implementing Jest testing with React alongside ag-Grid.

Please find this example in a Github repository here: 
https://github.com/seanlandsman/ag-grid-react-jest 

In the example package, see the example tests that are set up here:
~/ag-grid-react-jest/src/App.test.js

An example using our latest version can be found here: 
https://github.com/LouisMoore-agGrid/react-jest-enzyme-ag-grid-v22

 

Related articles

Comments

2 comments

Sort by Date Votes
  • Bathini Yashwanth Goud
    • Edited

    If I change the App component to function component. I can render the component in my browser perfectly fine and no difference than class component. But the unit test does not work anymore. function components have no this variable and that lead to result of null for component.instance(). Would you please provide another demo with function component using hooks also? Thank you!

    I have a simple example here.

     

    import React, { Component } from 'react';
    import fetch from 'isomorphic-fetch';
    import { AgGridReact } from 'ag-grid-react';

    const SimpleGrid = (props) => {
    constcolumnDefs= [
    { headerName: "Make", field: "make" },
    { headerName: "Model", field: "model" },
    { headerName: "Price", field: "price" }

    ];
    const [rowData, setRowData] =React.useState(
    [
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxter", price: 72000 }
    ]
    );

    const [api, setApi] =React.useState(null);
    const [columnApi, setColumnApi] =React.useState(null);


    constonGridReady=params=> {
    setApi(params.api);
    setColumnApi(params.columnApi);
    };

    consthandleSelectAll=event=> {
    api.selectAll()
    };

    consthandleDeselectAll=event=> {
    api.deselectAll()
    };

    React.useEffect(() => {
    .then((result) => {
    // console.log(result);
    returnresult.json();
    })
    .then(rowData => setRowData(rowData))
    }, []);

    return (
    <div>
    <buttonid="selectAll"onClick={handleSelectAll}>Select All Rows</button>
    <buttonid="deSelectAll"onClick={handleDeselectAll}>Deselect All Rows</button>
    <div
    className="ag-theme-balham"
    style={{
    height:'500px',
    width:'600px'
    }}>
    <AgGridReact
    columnDefs={columnDefs}
    rowData={rowData}
    onGridReady={onGridReady}>
    </AgGridReact>
    </div>
    </div>
    );
    }

    export default SimpleGrid;

     

    0
    Comment actions Permalink
  • Bathini Yashwanth Goud

    I figured out how to test it with Jest and Enzyme. But I do not know how to test it with react-testing-library, can you guide me through it?

     

     

    0
    Comment actions Permalink

Please sign in to leave a comment.