React & Enzyme: почему не работает beforeEach()?

Я пишу свои первые тесты React и сталкиваюсь с проблемой, когда мой оператор beforeEach не работает. Вот мой тестовый файл:

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

Вот соответствующая часть моего 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"
}

Я получаю эту ошибку при запуске тестов:

ReferenceError: wrapper is not defined

Что мне не хватает?


reactjs testing jestjs enzyme
person jslutzky    schedule 18.02.2017    source источник

Ответы (1)


arrow_upward
46
arrow_downward

Вы определяете константу оболочки внутри области beforeEach, переместите ее наружу следующим образом:

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

Таким образом, у вас будет доступ к оболочке внутри области its.

Константы имеют блочную область видимости, как и переменные, определенные с помощью оператора let. Значение константы не может измениться путем переназначения и не может быть повторно объявлено.

Поскольку вы хотите назначить переменную внутри области beforeEach и использовать ее внутри областей it, вам придется объявить переменную в общей области видимости, которая в данном случае является областью describe.

Добавлено (работает на мокко, но не на шутку):

Другой возможный способ исправить это - использовать ключевое слово 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 />', 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);
  });
});
person Canastro    schedule 18.02.2017
comment
Спасибо, очень признателен! - person jslutzky; 18.02.2017
comment
Это классический пример размаха! - person zero_cool; 02.08.2017
comment
Если вы все еще получаете неопределенность: - Я попробовал этот подход ^ для объекта, который мне нужен в моих тестах (он был определен в beforeEach(), а затем указан/использован в операторах теста, но ВСЕ ЕЩЕ остался неопределенным , Даже с подходом this.myobject ^^ , Я прочитал документы Jest, и похоже, что они определяют сам объект в области глобального/верхнего уровня чуть ниже импорта, затем указывают, что это такое в beforeEach() и тогда его можно использовать в тестовых операторах. - person Aid19801; 13.05.2018