fix: can not remove style correctly in qiankun context (#373)

* fix: can not remove style correctly in qiankun context

* chore: add ut

* chore: fix ci

Author: kuitos

src/Dom/dynamicCSS.ts

@@ -102,7 +102,10 @@ function findExistNode(key: string, option: Options = {}) {
 
 export function removeCSS(key: string, option: Options = {}) {
   const existNode = findExistNode(key, option);
-  existNode?.parentNode?.removeChild(existNode);
+  if (existNode) {
+    const container = getContainer(option);
+    container.removeChild(existNode);
+  }
 }
 
 /**
@@ -116,10 +119,17 @@ function syncRealContainer(container: Element, option: Options) {
     const placeholderStyle = injectCSS('', option);
     const { parentNode } = placeholderStyle;
     containerCache.set(container, parentNode);
-    parentNode.removeChild(placeholderStyle);
+    container.removeChild(placeholderStyle);
   }
 }
 
+/**
+ * manually clear container cache to avoid global cache in unit testes
+ */
+export function clearContainerCache() {
+  containerCache.clear();
+}
+
 export function updateCSS(css: string, key: string, option: Options = {}) {
   const container = getContainer(option);
 

tests/dynamicCSS.test.tsx

@@ -1,5 +1,10 @@
 /* eslint-disable no-eval */
-import { injectCSS, updateCSS, removeCSS } from '../src/Dom/dynamicCSS';
+import {
+  injectCSS,
+  updateCSS,
+  removeCSS,
+  clearContainerCache,
+} from '../src/Dom/dynamicCSS';
 
 const TEST_STYLE = '.bamboo { context: "light" }';
 
@@ -171,15 +176,20 @@ describe('dynamicCSS', () => {
 
   describe('qiankun', () => {
     let originAppendChild: typeof document.head.appendChild;
+    let originRemoveChild: typeof document.head.removeChild;
     let targetContainer: HTMLElement;
 
     beforeAll(() => {
+      clearContainerCache();
       originAppendChild = document.head.appendChild;
+      originRemoveChild = document.head.removeChild;
       document.head.appendChild = ele => targetContainer.appendChild(ele);
+      document.head.removeChild = ele => targetContainer.removeChild(ele);
     });
 
     afterAll(() => {
       document.head.appendChild = originAppendChild;
+      document.head.removeChild = originRemoveChild;
     });
 
     it('updateCSS', () => {
@@ -191,7 +201,12 @@ describe('dynamicCSS', () => {
       expect(document.head.contains(firstStyle)).toBeFalsy();
       expect(targetContainer.contains(firstStyle)).toBeTruthy();
 
-      // Mock qiankun uninstall & reinstall
+      // Mock qiankun uninstall
+      removeCSS('qiankun');
+      expect(document.head.contains(firstStyle)).toBeFalsy();
+      expect(targetContainer.contains(firstStyle)).toBeFalsy();
+
+      // Mock qiankun reinstall
       document.body.removeChild(targetContainer);
       targetContainer = document.createElement('div');
       document.body.appendChild(targetContainer);