Testing the grid with React/Jest

Follow

Comments

2 comments

  • Rahul Suryakanth

    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
  • Rahul Suryakanth

    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?

     

     

    1
    Comment actions Permalink

Please sign in to leave a comment.