web-dev-qa-db-fra.com

React & Enzyme: pourquoi beforeEach () ne fonctionne-t-il pas?

J'écris mes premiers tests React et je rencontre un problème où ma déclaration beforeEach ne fonctionne pas. Voici mon fichier de test:

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

Voici la partie pertinente de mon 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"
}

J'obtiens cette erreur lorsque les tests s'exécutent:

ReferenceError: wrapper is not defined

Qu'est-ce que je rate?

reactjstestingjestjsenzyme
18
jslutzky

Vous définissez la const wrapper à l'intérieur de la portée beforeEach, déplacez-la à l'extérieur comme ceci:

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

De cette façon, vous aurez accès au wrapper à l'intérieur de la portée its.

Les constantes ont une portée de bloc, tout comme les variables définies à l'aide de l'instruction let. La valeur d'une constante ne peut pas changer par la réaffectation et elle ne peut pas être redéclarée.

Puisque vous souhaitez affecter la variable à l'intérieur de l'étendue beforeEach et l'utiliser à l'intérieur des étendues it, vous devrez déclarer la variable dans une étendue commune, qui, dans ce cas, est l'étendue describe.

Ajouté (fonctionne sur moka mais pas sur plaisanterie):

Une autre façon possible de résoudre ce problème est d'utiliser le mot clé this (que je préfère, si vous utilisez mocha ... ne fonctionne pas avec jest).

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