我的一個反應成分的測試看起來是這樣的(根據關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的當前值在調用之間被保留,並且只在每次測試之前重置。
現在,如果我提取component()
功能本次測試外到另一個文件:
// getMountedComponent.js
const getMountedComponent = (AnyComponent, props, mountedComponent) => {
if (!mountedComponent) {
// Appears not to properly reassign mountedComponent
mountedComponent = mount(<AnyComponent {...props} />);
}
return mountedComponent;
};
而更換component()
功能與此:
// MyComponent.test.js
// Cleaner problematic part
const component =() => getMountedComponent(MyComponent, props, mountedComponent);
那麼這個測試失敗,因爲成分()第二次返回一個新組件,其中state = null。
它似乎是一個範圍問題,但我不能包裹我的頭?
我從描述函數中抽取函數的原因是因爲它實際上比我解釋的要複雜一些。這意味着我想'getMountedComponent'生活在另一個文件中。 –
請檢查更新的答案。 –
美麗!它的工作:) 我立即用它來寫一個函數:'getMountedComponent.reset =()=> {delete getMountedComponent.mountedComponent; }' –