web-dev-qa-db-ja.com

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

私は何が欠けていますか？

reactjstestingjestjsenzyme
18
jslutzky

beforeEachスコープ内でラッパーconstを定義し、次のように外側に移動します。

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スコープ。

追加（モカで動作しますが、jestでは動作しません）：

これを修正する別の可能な方法は、thisキーワードを使用することです（mocha ...を使用する場合、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