Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react-test-renderer error: TypeError: Cannot read property 'offsetWidth' of undefined

I am trying to test a component which renders the basic example of react-data-grid component (http://adazzle.github.io/react-data-grid/examples.html#/basic).

The test code looks like this:

import React from 'react';
import renderer from 'react-test-renderer';
import ExampleGrid from './ExampleGrid';

it('renders correctly', () => {
    const tree = renderer.create(<ExampleGrid />);
    expect(tree).toMatchSnapshot();
}); 

When I run the test I get the message:

TypeError: Cannot read property 'offsetWidth' of undefined

Any ideas about what is causing this problem?

Edit: The content of ExampleGrid is:

const ReactDataGrid = require('react-data-grid');
const React = require('react');

class ExampleGrid extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.createRows();
        this._columns = [
            { key: 'id', name: 'ID' },
            { key: 'title', name: 'Title' },
            { key: 'count', name: 'Count' } ];

        this.state = null;
    }

    createRows = () => {
        let rows = [];
        for (let i = 1; i < 4; i++) {
            rows.push({
                id: i,
                title: 'Title ' + i,
                count: i * 1000
            });
        }

        this._rows = rows;
    };

    rowGetter = (i) => {
        return this._rows[i];
    };

    render() {
        return  (
            <ReactDataGrid
                columns={this._columns}
                rowGetter={this.rowGetter}
                rowsCount={this._rows.length}
                minHeight={500} />);
    }
}

export default ExampleGrid;
like image 659
vhorta Avatar asked Oct 16 '25 20:10

vhorta


1 Answers

This problem arises when 'react' and 'react-test-renderer' versions aren't the same.

Change them to the same version numbers and it will work.

Cheers

like image 116
Suhel Avatar answered Oct 18 '25 12:10

Suhel