React & Enzyme: why doesn't beforeEach () work?

Question

I am writing my first React tests and run into a problem when my beforeEach statement beforeEach not work. Here is my test file:

 import React from 'react'; import { shallow } from 'enzyme'; import Home from '../components/Home'; import IntroText from '../components/IntroText'; import Form from '../components/Form'; describe('<Home />', () => { beforeEach(() => { const wrapper = shallow(<Home />); }); it('renders the IntroText component', () => { expect(wrapper.find(IntroText).length).toBe(1); }); it('renders the Form component', () => { expect(wrapper.find(Form).length).toBe(1); }); }); 

Here is the relevant part of my package.json :

 "devDependencies": { "babel-jest": "^18.0.0", "babel-preset-es2015": "^6.22.0", "babel-preset-react": "^6.23.0", "jest": "^18.1.0", "react-scripts": "0.9.0", "react-test-renderer": "^15.4.2" }, "dependencies": { "enzyme": "^2.7.1", "jest-enzyme": "^2.1.2", "react": "^15.4.2", "react-addons-test-utils": "^15.4.2", "react-dom": "^15.4.2", "react-router": "^3.0.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } 

I get this error when running tests:

 ReferenceError: wrapper is not defined 

What am I missing?

Answer 1

You define the const wrapper inside the beforeEach , move it like this:

 import React from 'react'; import { shallow } from 'enzyme'; import Home from '../components/Home'; import IntroText from '../components/IntroText'; import Form from '../components/Form'; describe('<Home />', () => { let wrapper; beforeEach(() => { wrapper = shallow(<Home />); }); it('renders the IntroText component', () => { expect(wrapper.find(IntroText).length).toBe(1); }); it('renders the Form component', () => { expect(wrapper.find(Form).length).toBe(1); }); }); 

This way you will have access to the wrapper inside the it scope.

Constants are block-like, like variables defined using a let expression. The value of the constant cannot change the reassignment, and it cannot be redefined.

Since you want to assign a variable inside the beforeEach and use it inside the it scopes, you have to declare a variable in the common scope, which in this case is equal to describe scope.

Added:

Another possible way to fix this is to use the this (which I prefer).

 import React from 'react'; import { shallow } from 'enzyme'; import Home from '../components/Home'; import IntroText from '../components/IntroText'; import Form from '../components/Form'; describe('<Home />', function() { beforeEach(function() { this.wrapper = shallow(<Home />); }); it('renders the IntroText component', function() { expect(this.wrapper.find(IntroText).length).toBe(1); }); it('renders the Form component', function() { expect(this.wrapper.find(Form).length).toBe(1); }); });