我在網上搜了很多，但是沒找到符合我項目場景使用的，自我摸索出能用的一個小案例，可能有不太對的地方，請見諒，僅做一個記錄: 注意哦，這個主要來測componentDidmount和componentWillUnmount。
我的項目是react+eslint+ts+mocha+enzyme+chai
大部分情況下使用enzyme.shallow就夠用了，但是發現有部分需要用到enzyme.mount, 而官網寫道，使用mount最好配上jsdom
所以我就開始用jsdom.
1、先下載jsdom和sinon npm install --save-dev jsdom sinon @types/sinon
2、然後從官網找到setup.js代碼，拷貝下來，放到項目中
import { JSDOM } from "jsdom";
const jsdom = new JSDOM("<!doctype html><html><body></body></html>");
const { window } = jsdom;
function copyProps(src, target) {
Object.defineProperties(target, {
...Object.getOwnPropertyDescriptors(src),
...Object.getOwnPropertyDescriptors(target)
});
}
global.window = window;
global.document = window.document;
global.navigator = {
userAgent: "node.js"
};
global.requestAnimationFrame = function(callback) {
return setTimeout(callback, 0);
};
global.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
copyProps(window, global);
3、在package.json中配置mocha 和jsdom 在scripts裏面
4、然後使用，大概長這樣
下面是不用jsdom的，也是做一個記錄
1、首先下載sinon
npm i sinon @types/sinon --save-dev
2、然後在你的測試中引入sinon
import * as sinon from "sinon";
3、測試用例(我主要用的是chai+mocha，所以要注意相關配置提前配好）
describe("life-cycle functions in component", function() {
let wrapper;
const wrapperProps = getProps();
beforeEach(function() {
wrapper = enzyme.mount(
<Event
loggerFactory={wrapperProps.loggerFactory}
eventProvider={wrapperProps.EventProvider.object}
/>
);
});
afterEach(function() {
wrapper.unmount();
});
// component Did mount
it("frame has invoked life-cycle function componentDidMount", function() {
const wrappers = wrapper.instance();
const callbacks = sinon.spy(wrappers, "componentDidMount");
wrapper.update();
expect(callbacks.calledOnce);
sinon.restore();
});
// component will unmount
it("frame has invoked life-cycle function componentWillUnmount", function() {
const wrappers = wrapper.instance();
const callbacks = sinon.spy(wrappers, "componentWillUnmount");
wrapper.update();
expect(callbacks.calledOnce);
sinon.restore();
});
});
參考文章