feat(component-testing): implement mocks #1027

DudaGod · 2024-10-25T07:15:17Z

What is done:

Implement ability to mock modules and use spies in component testing. The same as in jest.

How it works

I'll explain it with a simple example:

// tests/test.testplane.tsx
import { render } from '@testing-library/react';
import App from '../App';
// testplane/mock - new file which is exports methods from `@vitest/spy` and custom methods: `mock`, `unmock`. 
// These methods works only in browser env;
import {fn, mock} from "testplane/mock"; 
import { handleClick } from './utils';

mock('./utils', () => ({
    handleClick: fn().mockImplementationOnce(() => {
        console.log('Handle click by mock');
    })
}));

it('should render react button', async ({browser}) => {
    render(
        <App />
    );

    await browser.$('input').click();

    expect(handleClick).toHaveBeenCalledTimes(1);
});

// App.tsx
import {handleClick} from "./tests/utils";

export default function App() {
    return (
        <div id="root">
            <input
                type="button"
                value="Some button"
                onClick={handleClick}
            />
        </div >
    );
}

// utils.ts
export const handleClick = (): void => {
    console.log('Handle click by user code');
}

In order to correctly mock handleClick method from utils.ts source code of test file and dependencies which used mocked module modified in runtime. Test file will looks like:

// tests/test.testplane.tsx
import * as __testplane_import_1__ from './utils';
import {fn, mock} from "testplane/mock";

await mock('./utils', () => ({
    handleClick: fn().mockImplementationOnce(() => {
        console.log('Handle click by mock');
    })
}), __testplane_import_1__);

const { render } = await import('@testing-library/react');
const App = await import('../App');
const { handleClick } = importWithMock('./utils', __testplane_import_1__);

// ...

What happens:

import of original module utils moved to the top and saves to generated variable - __testplane_import_1__. It is used in order to correctly mock module (for example if user mock only on method);
import of fn and mock also moved to the top in order to call mock before import all other modules;
call mock with await and send original module as third argument. Moreover move it to the top. Here used mock from src/runner/browser-env/vite/browser-modules/mock.ts which is async.
import all other modules using dynamic imports. It is necessary in order to correctly mock module and then import all other deps in which mocked module can be imported. Without dynamic import modules will imported first and then await mock will be executed;
for mocked module use helper importWithMock which gets mocked implementation of module instead of original module.

Component file will looks like (after modify in runtime):

import * as __testplane_import_2__ from './tests/utils';
const {handleClick} = importWithMock("./tests/utils", __testplane_import_2__);

export default function App() {
    // ...
}

What happens:

like in test file we save original module to special variable - __testplane_import_2__;
import mocked module using helper importWithMock

Discuss:

Should rename new exported file mock for something more understandable? This file not only export mock and unmock methods but also spied: fn, spyOn. Moreover this module works only in browser environment. And can't be called in node env.

DudaGod · 2024-10-25T09:53:33Z

package.json

@@ -34,6 +33,10 @@
    "type": "git",
    "url": "git://github.com/gemini-testing/testplane.git"
  },
+  "exports": {
+    ".": "./src/index.js",
+    "./mock": "./src/mock.js"


Can be used correctly only in component testing, where this module replaced only in browser env in order to correctly mock modules. In node env provide only stubs of mock and unmock in order to be able to read tests.

Other options that I've been considering:

export mock interface from the main file. Can be implemented but in this case in browser env I will not be able to use something else from main module, because it is replaced on browser implementation;

create another package and replace it in browser env. Can be done, but I don't sure that we need another small package with stub mock, unmock and reexport vite/spy

Problem with current solution:

user can import this module - testplane/mock in nodejs environment and try to use it (I don't know why and looks like that in integration tests it should not be used). But it will not works correctly because mock and unmock has stubs right now and replaced on browser env. I can fix it by throw error and ignore if user run in browser env. Not implemented right now, but I can do it;

What do you think?

DudaGod · 2024-10-25T09:56:17Z

package.json

@@ -56,6 +59,7 @@
    "@jspm/core": "2.0.1",
    "@types/debug": "4.1.12",
    "@types/yallist": "4.0.4",
+    "@vitest/spy": "2.1.2",


Used in order to reexport fn and spyOn from testplane/mock

DudaGod · 2024-10-25T11:43:01Z

package.json

@@ -81,6 +85,7 @@
    "mocha": "10.2.0",
    "plugins-loader": "1.3.4",
    "png-validator": "1.1.0",
+    "recast": "0.23.6",


Used in browser env in order to correctly modify ast tree to correctly work with mock

DudaGod · 2024-10-25T11:46:51Z

src/mock.ts

+export function mock(_moduleName: string, _factory?: MockFactory): void {}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function unmock(_moduleName: string): void {}


Here mock and unmock do nothing (stubs). This module replaced in browser env using vite plugin.

src/runner/browser-env/vite/browser-modules/mock.ts

DudaGod · 2024-11-05T12:20:54Z