Jest中對Dom節點操作的測試

Jest對Dom節點操作測試?：
目錄結構：

|--demo.js
|--demo.test.js
|--jest.config.js
|--package-lock.json
|--package.json

demo.js

import $ from 'jquery';

const addDivToBody = () => {
	$('body').append('<div/>')
};

export default addDivToBody;

demo.test.js

import addDivToBody from './demo';
import $ from 'jquery';

test('測試 addDivToBody', () => {
	addDivToBody();
	addDivToBody();
	expect($('body').find('div').length).toBe(2);
	console.log($('body').find('div').length);
})

首先： 安裝jquery, 執行 npm i jquery ，並引入.
其次： 寫測試用例時，可以追溯dom節點的個數，來進行測試.
注： 上方使用jquery創建dom是在node環境下運行的，node 是不具備 dom的。之所以能夠操作dom,是因爲 jest 在 node 環境下自己模擬了一套dom的api, 叫做jsDom。