React & Enzyme: Warum funktioniert nicht vorEach()?

Question

Ich schreibe meine ersten React-Tests und laufe auf ein Problem, bei dem meine beforeEach-Anweisung nicht funktioniert. Hier ist meine Testdatei:

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); 
    }); 
}); 

Hier ist der relevante Teil meiner 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" 
} 

ich diesen Fehler erhalten, wenn die Tests ausgeführt:

ReferenceError: wrapper is not defined 

Was bin ich?

Answer 1

Sie definieren den Wrapper const innerhalb des beforeEach Umfang, es so außen bewegen:

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); 
    }); 
}); 

diese Weise können Sie den Zugang nach innen Wrapper haben werden der it s Umfang.

Konstanten sind block-scoped, ähnlich wie Variablen definiert mit der Let -Anweisung. Der Wert einer Konstanten kann nicht durch Neuzuweisung geändert werden, und es kann nicht neu deklariert werden.

Da Sie die Variable innerhalb des beforeEach Rahmen zuweisen möchten, und es innerhalb der it Bereiche verwenden, werden Sie die Variable in einem gemeinsamen Rahmen erklären müssen, was in diesem Fall ist der describe Umfang.

Hinzugefügt:

Ein andere Möglichkeit, dies zu beheben, ist das this Schlüsselwort zu verwenden (was ich bevorzuge).

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); 
    }); 
});