Clash Royale CLAN TAG#URR8PPP

Jest: Imported class 'undefined'

Importing class Grid into test file but keep on getting errors that its undefined.

The import path is correct but I keep on getting "TypeError: Cannot read property 'grid' of undefined" and "Cannot read property 'instance' of undefined" in the console when I run Jest.

Grid.test.js

import React from 'react';
import shallow from 'enzyme';
import Grid from '../../components/Grid';

let grid;

describe('Grid', () =>

beforeEach(() =>
grid = shallow(<Grid/>);
);

it('renders correctly', () =>
expect(grid).toMatchSnapshot();
);

describe('splitUpTiles', () =>

it('returns an empty array if a.length === 0', () =>
expect(grid.instance().splitUpTiles([0,1], 0)).toEqual();
);
);

);


Grid.js:

import React, Component from 'react';
import Tile from './Tile';

class Grid extends Component

splitUpTiles = (a, l) =>
if (a.length === 0) return ;
else return [a.slice(0, l)].concat(this.splitUpTiles(a.slice(l), l));
;

(omitted code for brevity)

render()

(omitted code for brevity)

return (
<div>
<table>
<tbody>
this.createColumns(arrayOfTiles)
</tbody>
</table>
</div>
)



export default Grid;


I tested my other files in the same way but had no error. Can someone please explain where I am going wrong?

2 Answers
2

I think you have a scope issue with beforeEach.

According to the docs:

"By default, the before and after blocks apply to every test in a file. You can also group tests together using a describe block. When they are inside a describe block, the before and after blocks only apply to the tests within that describe block".

Try this:

describe('Grid', () =>

let grid; // Move your var inside describe

beforeEach(() =>
grid = shallow(<Grid/>);
);

it('renders correctly', () =>
expect(grid).toMatchSnapshot();
);
// Delete second describe block
it('returns an empty array if a.length === 0', () =>
expect(grid.instance().splitUpTiles([0,1], 0)).toEqual();
);

);


Check docs HERE

I think it's because of nested describe. Can you try putting your inner it inside above describe like below.

it

describe

import React from 'react';
import shallow from 'enzyme';
import Grid from '../../components/Grid';

describe('Grid', () =>

let grid;

beforeEach(() =>
grid = shallow(<Grid/>);
);

it('renders correctly', () =>
expect(grid).toMatchSnapshot();
);

it('returns an empty array if a.length === 0', () =>
expect(grid.instance().splitUpTiles([0,1], 0)).toEqual();
);

);


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.