変数のスコープの問題反応成分の

Question

私のテストは、この（this articleをオフに基づいて）のように見えるテスト：

// MyComponent.test.js 


import { mount } from 'enzyme'; 
import MyComponent from './MyComponent.jsx'; 

describe('<MyComponent />',() => { 
    let props; 
    let state; 
    let mountedComponent; 

    // The problematic part to be changed 
    const component =() => { 
    if (!mountedComponent) { 
     // This enzyme mount is actually much more complex, 
     // as I'm wrapping all sorts of contexts and globals around it 
     // which is why I want to take this function outside, 
     // and use it as boilerplate in every test 
     mountedComponent = mount(<MyComponent {...props} />); 
    } 
    return mountedComponent; 
    }; 

    beforeEach(() => { 
    props = {}; 
    state = {}; 
    mountedComponent = undefined; 
    }); 

    it('Works',() => { 
    state = { val: true }; 
    component().setState(state, 
    () => expect(component().state('val')).to.equal(true), 
    ); 
    }); 
}); 

これはうまく機能で複数回呼び出された場合、component()機能が適切同じmountedComponentを返します同じitは、mountedComponentの現在の値が呼び出しの間保持され、beforeEachテストのみをリセットします。

今、私は別のファイルにこのテストの外component()機能を抽出した場合：理由はコンポーネント（）、そして、このこのテストが失敗

// MyComponent.test.js 

// Cleaner problematic part 
const component =() => getMountedComponent(MyComponent, props, mountedComponent); 

：

// getMountedComponent.js 

const getMountedComponent = (AnyComponent, props, mountedComponent) => { 

    if (!mountedComponent) { 
    // Appears not to properly reassign mountedComponent 
    mountedComponent = mount(<AnyComponent {...props} />); 
    } 
    return mountedComponent; 
}; 

そして、これとcomponent()機能を置き換えますstate = nullで2回目に新しいコンポーネントを返します。

これは範囲の問題として表示されますが、私はこれを回避することはできません。

Answer 1

問題は、あなたのgetMountedComponent関数がmountedComponent引数を受け入れることである - それはdescribleブロックで定義された同じ名前の変数が上書きされますので、実際には、この関数内で新しいmountedComponent変数を作成します。したがって、getMountedComponentを呼び出すたびに、新しいローカル変数が作成され、describeスコープで定義されたmountedComponent変数には決して値が割り当てられません。あなたは機能自体にコンポーネントをキャッシュすることができ、それを修正する（関数はJSでファーストクラスのオブジェクトである）外部変数を使用してのinsetadするには：

delete getMountedComponent.mountedComponent; 

Answer 2

Javascript by reference vs. by value

Javascriptが値渡し常にあるが、変数（アレイを含む） オブジェクトを参照する場合、「値」は、オブジェクトへの参照です。あなたが外getMountedComponent機能を撮影した

は、あなたのdescribe機能でmountedComponent変数を設定されなくなり、それはmountedComponent毎回の新しいコピーが作成されますので、したがって、それundefinedを残します。

const getMountedComponent = (MyComponent, props, mountedComponent) => { 

    if (!mountedComponent) { 
    // You are not changing the "mountedComponent" defined in your "describe" here 
    // because "mountedComponent" is pass by value 
    mountedComponent = mount(<MyComponent {...props} />); 
    } 
    return mountedComponent; 
}; 

describe('<MyComponent />',() => { 
    let props; 
    let state; 
    let mountedComponent; // This stays undefined 
    // ... 
}