[REF] tests: improve useLogLifecycle and helpers

package.json

@@ -46,6 +46,7 @@
     "git-rev-sync": "^1.12.0",
     "github-api": "^3.3.0",
     "jest": "^27.1.0",
+    "jest-diff": "^27.3.1",
     "jest-environment-jsdom": "^27.1.0",
     "live-server": "^1.2.1",
     "npm-run-all": "^4.1.5",

tests/components/lifecycle.test.ts

@@ -346,12 +346,10 @@ describe("lifecycle hooks", () => {
   });
 
   test("components are unmounted and destroyed if no longer in DOM, even after updateprops", async () => {
-    let steps: string[] = [];
-
     class Child extends Component {
       static template = xml`<span><t t-esc="props.n"/></span>`;
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
@@ -363,7 +361,7 @@ describe("lifecycle hooks", () => {
       `;
       static components = { Child };
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
       state = useState({ n: 0, flag: true });
       increment() {
@@ -376,13 +374,7 @@ describe("lifecycle hooks", () => {
 
     const parent = await mount(Parent, fixture);
     expect(fixture.innerHTML).toBe("<div><span>0</span></div>");
-    parent.increment();
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
-    parent.toggleSubWidget();
-    await nextTick();
-    expect(fixture.innerHTML).toBe("");
-    expect(steps).toEqual([
+    expect([
       "Parent:setup",
       "Parent:willStart",
       "Parent:willRender",
@@ -393,6 +385,12 @@ describe("lifecycle hooks", () => {
       "Child:rendered",
       "Child:mounted",
       "Parent:mounted",
+    ]).toBeLogged();
+
+    parent.increment();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
+    expect([
       "Parent:willRender",
       "Child:willUpdateProps",
       "Parent:rendered",
@@ -402,32 +400,26 @@ describe("lifecycle hooks", () => {
       "Child:willPatch",
       "Child:patched",
       "Parent:patched",
+    ]).toBeLogged();
+
+    parent.toggleSubWidget();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("");
+    expect([
       "Parent:willRender",
       "Parent:rendered",
       "Parent:willPatch",
       "Child:willUnmount",
       "Child:destroyed",
       "Parent:patched",
-    ]);
-    Object.freeze(steps);
+    ]).toBeLogged();
   });
 
   test("hooks are called in proper order in widget creation/destruction", async () => {
-    let steps: string[] = [];
-
     class Child extends Component {
       static template = xml`<div/>`;
       setup() {
-        steps.push("c init");
-        onWillStart(() => {
-          steps.push("c willstart");
-        });
-        onMounted(() => {
-          steps.push("c mounted");
-        });
-        onWillUnmount(() => {
-          steps.push("c willunmount");
-        });
+        useLogLifecycle();
       }
     }
 
@@ -435,33 +427,32 @@ describe("lifecycle hooks", () => {
       static template = xml`<div><Child/></div>`;
       static components = { Child };
       setup() {
-        steps.push("p init");
-        onWillStart(() => {
-          steps.push("p willstart");
-        });
-        onMounted(() => {
-          steps.push("p mounted");
-        });
-        onWillUnmount(() => {
-          steps.push("p willunmount");
-        });
+        useLogLifecycle();
       }
     }
 
     const app = new App(Parent);
     await app.mount(fixture);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
+
     app.destroy();
-    expect(steps).toEqual([
-      "p init",
-      "p willstart",
-      "c init",
-      "c willstart",
-      "c mounted",
-      "p mounted",
-      "p willunmount",
-      "c willunmount",
-    ]);
-    Object.freeze(steps);
+    expect([
+      "Parent:willUnmount",
+      "Child:willUnmount",
+      "Child:destroyed",
+      "Parent:destroyed",
+    ]).toBeLogged();
   });
 
   test("willUpdateProps hook is called", async () => {
@@ -543,12 +534,10 @@ describe("lifecycle hooks", () => {
   });
 
   test("lifecycle semantics", async () => {
-    let steps: string[] = [];
-
     class Child extends Component {
       static template = xml`<div/>`;
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
     class Parent extends Component {
@@ -556,14 +545,13 @@ describe("lifecycle hooks", () => {
       static components = { Child };
       state = useState({ a: 1 });
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
     const app = new App(Parent);
     await app.mount(fixture);
-
-    expect(steps).toEqual([
+    expect([
       "Parent:setup",
       "Parent:willStart",
       "Parent:willRender",
@@ -574,33 +562,29 @@ describe("lifecycle hooks", () => {
       "Child:rendered",
       "Child:mounted",
       "Parent:mounted",
-    ]);
+    ]).toBeLogged();
 
-    steps.splice(0);
     app.destroy();
-    expect(steps).toEqual([
+    expect([
       "Parent:willUnmount",
       "Child:willUnmount",
       "Child:destroyed",
       "Parent:destroyed",
-    ]);
-    Object.freeze(steps);
+    ]).toBeLogged();
   });
 
   test("lifecycle semantics, part 2", async () => {
-    let steps: string[] = [];
-
     class GrandChild extends Component {
       static template = xml`<div/>`;
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
     class Child extends Component {
       static template = xml`<GrandChild/>`;
       static components = { GrandChild };
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
@@ -609,26 +593,23 @@ describe("lifecycle hooks", () => {
       static components = { Child };
       state = useState({ hasChild: false });
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
     const app = new App(Parent);
     const parent = await app.mount(fixture);
-
-    expect(steps).toEqual([
+    expect([
       "Parent:setup",
       "Parent:willStart",
       "Parent:willRender",
       "Parent:rendered",
       "Parent:mounted",
-    ]);
-
-    steps.splice(0);
+    ]).toBeLogged();
 
     parent.state.hasChild = true;
     await nextTick();
-    expect(steps).toEqual([
+    expect([
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
@@ -643,36 +624,31 @@ describe("lifecycle hooks", () => {
       "GrandChild:mounted",
       "Child:mounted",
       "Parent:patched",
-    ]);
-
-    steps.splice(0);
+    ]).toBeLogged();
 
     app.destroy();
-    expect(steps).toEqual([
+    expect([
       "Parent:willUnmount",
       "Child:willUnmount",
       "GrandChild:willUnmount",
       "GrandChild:destroyed",
       "Child:destroyed",
       "Parent:destroyed",
-    ]);
-    Object.freeze(steps);
+    ]).toBeLogged();
   });
 
   test("lifecycle semantics, part 3", async () => {
-    let steps: string[] = [];
-
     class GrandChild extends Component {
       static template = xml`<div/>`;
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
     class Child extends Component {
       static template = xml`<GrandChild/>`;
       static components = { GrandChild };
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
@@ -681,41 +657,34 @@ describe("lifecycle hooks", () => {
       static components = { Child };
       state = useState({ hasChild: false });
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
     const app = new App(Parent);
     const parent = await app.mount(fixture);
-
-    expect(steps).toEqual([
+    expect([
       "Parent:setup",
       "Parent:willStart",
       "Parent:willRender",
       "Parent:rendered",
       "Parent:mounted",
-    ]);
-
-    steps.splice(0);
+    ]).toBeLogged();
 
     parent.state.hasChild = true;
-
     // immediately destroy everything
     app.destroy();
     await nextTick();
-    expect(steps).toEqual(["Parent:willUnmount", "Parent:destroyed"]);
-    Object.freeze(steps);
+    expect(["Parent:willUnmount", "Parent:destroyed"]).toBeLogged();
   });
 
   test("lifecycle semantics, part 4", async () => {
     let def = makeDeferred();
 
-    let steps: string[] = [];
-
     class GrandChild extends Component {
       static template = xml`<div/>`;
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
         onWillStart(() => def);
       }
     }
@@ -723,7 +692,7 @@ describe("lifecycle hooks", () => {
       static template = xml`<GrandChild/>`;
       static components = { GrandChild };
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
@@ -732,27 +701,24 @@ describe("lifecycle hooks", () => {
       static components = { Child };
       state = useState({ hasChild: false });
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
     const app = new App(Parent);
     const parent = await app.mount(fixture);
 
-    expect(steps).toEqual([
+    expect([
       "Parent:setup",
       "Parent:willStart",
       "Parent:willRender",
       "Parent:rendered",
       "Parent:mounted",
-    ]);
-
-    steps.splice(0);
+    ]).toBeLogged();
 
     parent.state.hasChild = true;
-
     await nextTick();
-    expect(steps).toEqual([
+    expect([
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
@@ -761,27 +727,22 @@ describe("lifecycle hooks", () => {
       "GrandChild:setup",
       "GrandChild:willStart",
       "Child:rendered",
-    ]);
-
-    steps.splice(0);
+    ]).toBeLogged();
 
     app.destroy();
-    expect(steps).toEqual([
+    expect([
       "Parent:willUnmount",
       "GrandChild:destroyed",
       "Child:destroyed",
       "Parent:destroyed",
-    ]);
-    Object.freeze(steps);
+    ]).toBeLogged();
   });
 
   test("lifecycle semantics, part 5", async () => {
-    let steps: string[] = [];
-
     class Child extends Component {
       static template = xml`<div/>`;
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
@@ -790,13 +751,12 @@ describe("lifecycle hooks", () => {
       static components = { Child };
       state = useState({ hasChild: true });
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
     const parent = await mount(Parent, fixture);
-
-    expect(steps).toEqual([
+    expect([
       "Parent:setup",
       "Parent:willStart",
       "Parent:willRender",
@@ -807,31 +767,25 @@ describe("lifecycle hooks", () => {
       "Child:rendered",
       "Child:mounted",
       "Parent:mounted",
-    ]);
-
-    steps.splice(0);
+    ]).toBeLogged();
 
     parent.state.hasChild = false;
-
     await nextTick();
-    expect(steps).toEqual([
+    expect([
       "Parent:willRender",
       "Parent:rendered",
       "Parent:willPatch",
       "Child:willUnmount",
       "Child:destroyed",
       "Parent:patched",
-    ]);
-    Object.freeze(steps);
+    ]).toBeLogged();
   });
 
   test("lifecycle semantics, part 6", async () => {
-    let steps: string[] = [];
-
     class Child extends Component {
       static template = xml`<div/>`;
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
@@ -840,13 +794,12 @@ describe("lifecycle hooks", () => {
       static components = { Child };
       state = useState({ value: 1 });
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
     const parent = await mount(Parent, fixture);
-
-    expect(steps).toEqual([
+    expect([
       "Parent:setup",
       "Parent:willStart",
       "Parent:willRender",
@@ -857,14 +810,11 @@ describe("lifecycle hooks", () => {
       "Child:rendered",
       "Child:mounted",
       "Parent:mounted",
-    ]);
-
-    steps.splice(0);
+    ]).toBeLogged();
 
     parent.state.value = 2;
-
     await nextTick();
-    expect(steps).toEqual([
+    expect([
       "Parent:willRender",
       "Child:willUpdateProps",
       "Parent:rendered",
@@ -874,12 +824,10 @@ describe("lifecycle hooks", () => {
       "Child:willPatch",
       "Child:patched",
       "Parent:patched",
-    ]);
-    Object.freeze(steps);
+    ]).toBeLogged();
   });
 
   test("onWillRender", async () => {
-    let steps: string[] = [];
     const def = makeDeferred();
 
     class Child extends Component {
@@ -887,13 +835,12 @@ describe("lifecycle hooks", () => {
       state = useState({ value: 1 });
       visibleState = this.state.value;
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
         onWillUpdateProps(() => def);
         onWillRender(() => (this.visibleState = this.state.value));
       }
       increment() {
         this.state.value++;
-        steps.push(`inc:${this.visibleState}`);
       }
     }
 
@@ -902,30 +849,13 @@ describe("lifecycle hooks", () => {
         <Child />`;
       static components = { Child };
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
     const parent = await mount(Parent, fixture);
-
     expect(fixture.innerHTML).toBe("<button>1</button>");
-
-    parent.render(); // to block child render
-    await nextTick();
-
-    fixture.querySelector("button")!.click();
-
-    await nextTick();
-    fixture.querySelector("button")!.click();
-
-    await nextTick();
-
-    expect(fixture.innerHTML).toBe("<button>1</button>");
-
-    def.resolve();
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<button>3</button>");
-    expect(steps).toEqual([
+    expect([
       "Parent:setup",
       "Parent:willStart",
       "Parent:willRender",
@@ -936,19 +866,32 @@ describe("lifecycle hooks", () => {
       "Child:rendered",
       "Child:mounted",
       "Parent:mounted",
-      "Parent:willRender",
-      "Child:willUpdateProps",
-      "Parent:rendered",
-      "inc:1",
-      "inc:1",
+    ]).toBeLogged();
+
+    parent.render(); // to block child render
+    await nextTick();
+    expect(["Parent:willRender", "Child:willUpdateProps", "Parent:rendered"]).toBeLogged();
+
+    fixture.querySelector("button")!.click();
+    await nextTick();
+    expect([]).toBeLogged();
+
+    fixture.querySelector("button")!.click();
+    await nextTick();
+    expect([]).toBeLogged();
+    expect(fixture.innerHTML).toBe("<button>1</button>");
+
+    def.resolve();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<button>3</button>");
+    expect([
       "Child:willRender",
       "Child:rendered",
       "Parent:willPatch",
       "Child:willPatch",
       "Child:patched",
       "Parent:patched",
-    ]);
-    Object.freeze(steps);
+    ]).toBeLogged();
   });
 
   // TODO: rename (remove? seems covered by lifecycle semantics)
@@ -982,12 +925,10 @@ describe("lifecycle hooks", () => {
 
   // TODO: rename (corresponds to https://github.com/odoo/owl/blob/master/doc/reference/concurrency_model.md#semantics)
   test("component semantics", async () => {
-    let steps: string[] = [];
-
     class TestWidget extends Component {
       name: string = "test";
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
     class B extends TestWidget {
@@ -1031,7 +972,7 @@ describe("lifecycle hooks", () => {
 
     await mount(A, fixture);
     expect(fixture.innerHTML).toBe(`<div>A<div>B</div><div>C<div>D</div><div>E</div></div></div>`);
-    expect(steps).toEqual([
+    expect([
       "A:setup",
       "A:willStart",
       "A:willRender",
@@ -1057,13 +998,12 @@ describe("lifecycle hooks", () => {
       "C:mounted",
       "B:mounted",
       "A:mounted",
-    ]);
+    ]).toBeLogged();
 
     // update
-    steps.splice(0);
     c!.state.flag = false;
     await nextTick();
-    expect(steps).toEqual([
+    expect([
       "C:willRender",
       "D:willUpdateProps",
       "F:setup",
@@ -1080,15 +1020,14 @@ describe("lifecycle hooks", () => {
       "F:mounted",
       "D:patched",
       "C:patched",
-    ]);
+    ]).toBeLogged();
   });
 
   test("mounted hook is called on every mount, not just the first one", async () => {
-    const steps: string[] = [];
     class Child extends Component {
       static template = xml`<div>child</div>`;
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
@@ -1097,18 +1036,12 @@ describe("lifecycle hooks", () => {
       static components = { Child };
       state = useState({ hasChild: true });
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
     const parent = await mount(Parent, fixture);
-
-    parent.state.hasChild = false;
-    await nextTick();
-
-    parent.state.hasChild = true;
-    await nextTick();
-    expect(steps).toEqual([
+    expect([
       "Parent:setup",
       "Parent:willStart",
       "Parent:willRender",
@@ -1119,12 +1052,22 @@ describe("lifecycle hooks", () => {
       "Child:rendered",
       "Child:mounted",
       "Parent:mounted",
+    ]).toBeLogged();
+
+    parent.state.hasChild = false;
+    await nextTick();
+    expect([
       "Parent:willRender",
       "Parent:rendered",
       "Parent:willPatch",
       "Child:willUnmount",
       "Child:destroyed",
       "Parent:patched",
+    ]).toBeLogged();
+
+    parent.state.hasChild = true;
+    await nextTick();
+    expect([
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
@@ -1134,7 +1077,6 @@ describe("lifecycle hooks", () => {
       "Parent:willPatch",
       "Child:mounted",
       "Parent:patched",
-    ]);
-    Object.freeze(steps);
+    ]).toBeLogged();
   });
 });

tests/components/t_component.test.ts

@@ -12,12 +12,10 @@ beforeEach(() => {
 
 describe("t-component", () => {
   test("t-component works in simple case", async () => {
-    let steps: string[] = [];
-
     class Child extends Component {
       static template = xml`<div>child</div>`;
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
@@ -25,14 +23,14 @@ describe("t-component", () => {
       static template = xml`<t t-component="Child"/>`;
       Child = Child;
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
     await mount(Parent, fixture);
 
     expect(fixture.innerHTML).toBe("<div>child</div>");
-    expect(steps).toEqual([
+    expect([
       "Parent:setup",
       "Parent:willStart",
       "Parent:willRender",
@@ -43,23 +41,21 @@ describe("t-component", () => {
       "Child:rendered",
       "Child:mounted",
       "Parent:mounted",
-    ]);
+    ]).toBeLogged();
   });
 
   test("switching dynamic component", async () => {
-    let steps: string[] = [];
-
     class ChildA extends Component {
       static template = xml`<div>child a</div>`;
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
     class ChildB extends Component {
       static template = xml`child b`;
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
@@ -67,19 +63,13 @@ describe("t-component", () => {
       static template = xml`<t t-component="Child"/>`;
       Child = ChildA;
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
     const parent = await mount(Parent, fixture);
-
     expect(fixture.innerHTML).toBe("<div>child a</div>");
-
-    parent.Child = ChildB;
-    parent.render();
-    await nextTick();
-    expect(fixture.innerHTML).toBe("child b");
-    expect(steps).toEqual([
+    expect([
       "Parent:setup",
       "Parent:willStart",
       "Parent:willRender",
@@ -90,6 +80,13 @@ describe("t-component", () => {
       "ChildA:rendered",
       "ChildA:mounted",
       "Parent:mounted",
+    ]).toBeLogged();
+
+    parent.Child = ChildB;
+    parent.render();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("child b");
+    expect([
       "Parent:willRender",
       "ChildB:setup",
       "ChildB:willStart",
@@ -101,7 +98,7 @@ describe("t-component", () => {
       "ChildA:destroyed",
       "ChildB:mounted",
       "Parent:patched",
-    ]);
+    ]).toBeLogged();
   });
 
   test("can switch between dynamic components without the need for a t-key", async () => {

tests/components/t_foreach.test.ts

@@ -49,12 +49,10 @@ describe("list of components", () => {
   });
 
   test("components in a node in a t-foreach ", async () => {
-    const steps: string[] = [];
-
     class Child extends Component {
       static template = xml`<div><t t-esc="props.item"/></div>`;
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
     }
 
@@ -72,7 +70,7 @@ describe("list of components", () => {
       static components = { Child };
 
       setup() {
-        useLogLifecycle(steps);
+        useLogLifecycle();
       }
 
       get items() {
@@ -84,7 +82,7 @@ describe("list of components", () => {
     expect(fixture.innerHTML).toBe(
       "<div><ul><li><div>1</div></li><li><div>2</div></li></ul></div>"
     );
-    expect(steps).toEqual([
+    expect([
       "Parent:setup",
       "Parent:willStart",
       "Parent:willRender",
@@ -100,7 +98,7 @@ describe("list of components", () => {
       "Child:mounted",
       "Child:mounted",
       "Parent:mounted",
-    ]);
+    ]).toBeLogged();
   });
 
   test("reconciliation alg works for t-foreach in t-foreach", async () => {

tests/helpers.ts

@@ -161,53 +161,58 @@ export function snapshotEverything() {
   });
 }
 
-export function useLogLifecycle(steps: string[]) {
+const steps: string[] = [];
+
+export function logStep(step: string) {
+  steps.push(step);
+}
+export function useLogLifecycle() {
   const component = useComponent();
   const name = component.constructor.name;
-  steps.push(`${name}:setup`);
+  logStep(`${name}:setup`);
   expect(name + ": " + status(component)).toBe(name + ": " + "new");
 
   onWillStart(() => {
     expect(name + ": " + status(component)).toBe(name + ": " + "new");
-    steps.push(`${name}:willStart`);
+    logStep(`${name}:willStart`);
   });
 
   onMounted(() => {
     expect(name + ": " + status(component)).toBe(name + ": " + "mounted");
-    steps.push(`${name}:mounted`);
+    logStep(`${name}:mounted`);
   });
 
   onWillUpdateProps(() => {
     expect(name + ": " + status(component)).toBe(name + ": " + "mounted");
-    steps.push(`${name}:willUpdateProps`);
+    logStep(`${name}:willUpdateProps`);
   });
 
   onWillRender(() => {
-    steps.push(`${name}:willRender`);
+    logStep(`${name}:willRender`);
   });
 
   onRendered(() => {
-    steps.push(`${name}:rendered`);
+    logStep(`${name}:rendered`);
   });
 
   onWillPatch(() => {
     expect(name + ": " + status(component)).toBe(name + ": " + "mounted");
-    steps.push(`${name}:willPatch`);
+    logStep(`${name}:willPatch`);
   });
 
   onPatched(() => {
     expect(name + ": " + status(component)).toBe(name + ": " + "mounted");
-    steps.push(`${name}:patched`);
+    logStep(`${name}:patched`);
   });
 
   onWillUnmount(() => {
     expect(name + ": " + status(component)).toBe(name + ": " + "mounted");
-    steps.push(`${name}:willUnmount`);
+    logStep(`${name}:willUnmount`);
   });
 
   onDestroyed(() => {
     expect(name + ": " + status(component)).toBe(name + ": " + "destroyed");
-    steps.push(`${name}:destroyed`);
+    logStep(`${name}:destroyed`);
   });
 }
 
@@ -226,3 +231,55 @@ export async function editInput(input: HTMLInputElement | HTMLTextAreaElement, v
   input.dispatchEvent(new Event("change"));
   return nextTick();
 }
+
+import { diff } from "jest-diff";
+
+afterEach(() => {
+  if (steps.length) {
+    steps.splice(0);
+    throw new Error("Remaining steps! Should be checked by a .toBeLogged() assertion!");
+  }
+});
+
+expect.extend({
+  toBeLogged(expected) {
+    const options = {
+      comment: "steps equality",
+      isNot: this.isNot,
+      promise: this.promise,
+    };
+
+    const currentSteps = steps.splice(0);
+    const pass = this.equals(currentSteps, expected);
+
+    const message = pass
+      ? () =>
+          this.utils.matcherHint("toEqual", undefined, undefined, options) +
+          "\n\n" +
+          `Expected: not ${this.utils.printExpected(expected)}\n` +
+          `Received: ${this.utils.printReceived(currentSteps)}`
+      : () => {
+          const diffString = diff(expected, currentSteps, {
+            expand: this.expand,
+          });
+          return (
+            this.utils.matcherHint("toBe", undefined, undefined, options) +
+            "\n\n" +
+            (diffString && diffString.includes("- Expect")
+              ? `Difference:\n\n${diffString}`
+              : `Expected: ${this.utils.printExpected(expected)}\n` +
+                `Received: ${this.utils.printReceived(currentSteps)}`)
+          );
+        };
+
+    return { actual: currentSteps, message, pass };
+  },
+});
+
+declare global {
+  namespace jest {
+    interface Matchers<R> {
+      toBeLogged(): R;
+    }
+  }
+}

tests/reactivity.test.ts

@@ -6,7 +6,7 @@ import {
   makeTestFixture,
   nextMicroTick,
   nextTick,
-  snapshotEverything,
+  snapshotEverything
 } from "./helpers";
 
 function createReactive(value: any, observer: any = () => {}) {