test(vitest): add a test for mocking a module with vitest (#5146)

Author: nicojs

package-lock.json

@@ -7,6 +7,8 @@
   ],
   "devDependencies": {
     "@eslint/js": "9.13.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@types/chai-as-promised": "8.0.1",
     "@types/chai-jest-snapshot": "1.3.8",
     "@types/eslint__js": "8.42.3",
@@ -17,6 +19,7 @@
     "@types/sinon": "17.0.3",
     "@types/sinon-chai": "4.0.0",
     "@types/source-map-support": "0.5.10",
+    "@vitejs/plugin-react": "^4.3.4",
     "c8": "10.1.2",
     "chai": "5.1.2",
     "chai-as-promised": "8.0.1",

package.json

@@ -377,4 +377,32 @@ describe('VitestRunner integration', () => {
       ]);
     });
   });
+
+  describe('using vi.mock to mock a module', () => {
+    beforeEach(async () => {
+      sandbox = new TempTestDirectorySandbox('vi-mock');
+      await sandbox.init();
+    });
+
+    it('should be able to mock a module', async () => {
+      await sut.init();
+      const runResult = await sut.dryRun();
+      assertions.expectCompleted(runResult);
+      expect(runResult.tests).lengthOf(3);
+      assertions.expectTestResults(runResult, [
+        {
+          id: 'components/Counter.test.tsx#Counter increments',
+          status: TestStatus.Success,
+        },
+        {
+          id: "components/Product.test.tsx#Product doesn't render the discount when 0",
+          status: TestStatus.Success,
+        },
+        {
+          id: 'components/Product.test.tsx#Product should render the discount',
+          status: TestStatus.Success,
+        },
+      ]);
+    });
+  });
 });

packages/vitest-runner/test/integration/vitest-test-runner.it.spec.ts

@@ -151,7 +151,7 @@ export class MathComponent extends HTMLElement {
           {}
         } else {
           stryCov_9fa48("43");
-          this.#operator = (value as Operator);
+          this.#operator = value as Operator;
         }
       } else {
         if (stryMutAct_9fa48("44")) {

packages/vitest-runner/testResources/browser-project/src/math.component.ts

@@ -0,0 +1,16 @@
+// src/components/Counter.tsx
+import { useState } from 'react';
+
+export const Counter = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>
+        Count:
+        <span data-testId="counter">{count}</span>
+      </p>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </div>
+  );
+};

packages/vitest-runner/testResources/vi-mock/components/Counter.orig.tsx

@@ -0,0 +1,14 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Counter } from './Counter';
+
+describe('Counter', () => {
+  it('increments', () => {
+    render(<Counter  />);
+    const incrementButton = screen.getByText('Increment');
+    const counter = screen.getByTestId('counter');
+
+    fireEvent.click(incrementButton);
+    expect(counter).toHaveTextContent('1');
+  });
+});

packages/vitest-runner/testResources/vi-mock/components/Counter.test.tsx

@@ -0,0 +1,64 @@
+// This file is generated with tasks/instrument-test-resources.js
+ // src/components/Counter.tsx
+function stryNS_9fa48() {
+  var g = typeof globalThis === 'object' && globalThis && globalThis.Math === Math && globalThis || new Function("return this")();
+  var ns = g.__stryker2__ || (g.__stryker2__ = {});
+  if (ns.activeMutant === undefined && g.process && g.process.env && g.process.env.__STRYKER_ACTIVE_MUTANT__) {
+    ns.activeMutant = g.process.env.__STRYKER_ACTIVE_MUTANT__;
+  }
+  function retrieveNS() {
+    return ns;
+  }
+  stryNS_9fa48 = retrieveNS;
+  return retrieveNS();
+}
+stryNS_9fa48();
+function stryCov_9fa48() {
+  var ns = stryNS_9fa48();
+  var cov = ns.mutantCoverage || (ns.mutantCoverage = {
+    static: {},
+    perTest: {}
+  });
+  function cover() {
+    var c = cov.static;
+    if (ns.currentTestId) {
+      c = cov.perTest[ns.currentTestId] = cov.perTest[ns.currentTestId] || {};
+    }
+    var a = arguments;
+    for (var i = 0; i < a.length; i++) {
+      c[a[i]] = (c[a[i]] || 0) + 1;
+    }
+  }
+  stryCov_9fa48 = cover;
+  cover.apply(null, arguments);
+}
+function stryMutAct_9fa48(id) {
+  var ns = stryNS_9fa48();
+  function isActive(id) {
+    if (ns.activeMutant === id) {
+      if (ns.hitCount !== void 0 && ++ns.hitCount > ns.hitLimit) {
+        throw new Error('Stryker: Hit count limit reached (' + ns.hitCount + ')');
+      }
+      return true;
+    }
+    return false;
+  }
+  stryMutAct_9fa48 = isActive;
+  return isActive(id);
+}
+import { useState } from 'react';
+export const Counter = () => {
+  if (stryMutAct_9fa48("0")) {
+    {}
+  } else {
+    stryCov_9fa48("0");
+    const [count, setCount] = useState(0);
+    return <div>
+      <p>
+        Count:
+        <span data-testId="counter">{count}</span>
+      </p>
+      <button onClick={stryMutAct_9fa48("1") ? () => undefined : (stryCov_9fa48("1"), () => setCount(stryMutAct_9fa48("2") ? count - 1 : (stryCov_9fa48("2"), count + 1)))}>Increment</button>
+    </div>;
+  }
+};

packages/vitest-runner/testResources/vi-mock/components/Counter.tsx

@@ -0,0 +1,5 @@
+export function Discount ({ discount }: { discount: number }) {
+  return (
+    <p>{discount}</p>
+  );
+}

packages/vitest-runner/testResources/vi-mock/components/Discount.orig.tsx

@@ -0,0 +1,59 @@
+// This file is generated with tasks/instrument-test-resources.js
+ function stryNS_9fa48() {
+  var g = typeof globalThis === 'object' && globalThis && globalThis.Math === Math && globalThis || new Function("return this")();
+  var ns = g.__stryker2__ || (g.__stryker2__ = {});
+  if (ns.activeMutant === undefined && g.process && g.process.env && g.process.env.__STRYKER_ACTIVE_MUTANT__) {
+    ns.activeMutant = g.process.env.__STRYKER_ACTIVE_MUTANT__;
+  }
+  function retrieveNS() {
+    return ns;
+  }
+  stryNS_9fa48 = retrieveNS;
+  return retrieveNS();
+}
+stryNS_9fa48();
+function stryCov_9fa48() {
+  var ns = stryNS_9fa48();
+  var cov = ns.mutantCoverage || (ns.mutantCoverage = {
+    static: {},
+    perTest: {}
+  });
+  function cover() {
+    var c = cov.static;
+    if (ns.currentTestId) {
+      c = cov.perTest[ns.currentTestId] = cov.perTest[ns.currentTestId] || {};
+    }
+    var a = arguments;
+    for (var i = 0; i < a.length; i++) {
+      c[a[i]] = (c[a[i]] || 0) + 1;
+    }
+  }
+  stryCov_9fa48 = cover;
+  cover.apply(null, arguments);
+}
+function stryMutAct_9fa48(id) {
+  var ns = stryNS_9fa48();
+  function isActive(id) {
+    if (ns.activeMutant === id) {
+      if (ns.hitCount !== void 0 && ++ns.hitCount > ns.hitLimit) {
+        throw new Error('Stryker: Hit count limit reached (' + ns.hitCount + ')');
+      }
+      return true;
+    }
+    return false;
+  }
+  stryMutAct_9fa48 = isActive;
+  return isActive(id);
+}
+export function Discount({
+  discount
+}: {
+  discount: number;
+}) {
+  if (stryMutAct_9fa48("7")) {
+    {}
+  } else {
+    stryCov_9fa48("7");
+    return <p>{discount}</p>;
+  }
+}

packages/vitest-runner/testResources/vi-mock/components/Discount.tsx

@@ -0,0 +1,19 @@
+import { Discount } from './Discount';
+
+export function Product({
+  name,
+  price,
+  discount,
+}: {
+  name: string;
+  price: number;
+  discount: number;
+}) {
+  return (
+    <div>
+      <h2>{name}</h2>
+      <p>{price}</p>
+      {discount && <Discount discount={discount} />}
+    </div>
+  );
+}