In-browser package import for writing unit test

[doodlewind]

Hi, I'm interested in XBell since I'm working on an editor project (BlockSuite), which requires comprehensive test suite that works across different environments. For this snippet in the documentation:

import { test, expect } from 'xbell';

test('unit testing', async ({ page }) => {
  const result = await page.evalute(async () => {
    const { add } = await import('./add');
    return add(1, 1);
  });

  expect(result).toBe(2);
});

I'm wondering if it's possible to import third-party packages inside the test case? This allows us to write unit tests in this way:

test('unit testing', async ({ page }) => {
  const result = await page.evalute(async () => {
    const { add } = await import('my-package');
    return add(1, 1);
  });

  expect(result).toBe(2);
});

I'm not sure if it's possible to import ESM package inside page.evaluate, this is a blocker in my scenario.

[Testerding]

这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

[xlianghang]

Sorry, I just saw this issue.

I'm wondering if it's possible to import third-party packages inside the test case? This allows us to write unit tests in this way:

Yes, XBell allows importing third-party packages.

Thank you very much for your interest in XBell, but XBell may be a little unstable recently.
Because I am refactoring part of its page build to solve the page refresh problem caused by vite.

[xlianghang]

test('unit testing', async ({ page }) => {
  const result = await page.evalute(async () => {
    const { add } = await import('my-package');
    return add(1, 1);
  });

  expect(result).toBe(2);
});

I would probably stop supporting this because of the ambiguity, for example, javascript in the page already includes a react, and then the developer also imports a react in a test case. The developer might mistakenly think that react is only imported once, but actually import it twice.

You can see if the way below can support your scenario:

test.browser('test the code in browser', async ({ expect, page }) => {
  const { add } = await import('my-package');
  const result = add(1, 1);
  expect(result).toBe(2);

  window.document.body.innerHTML = result;
  await expect(page).toMatchScreenshot({
    name: 'default-screenshot',
  });
});