Extend

Extend is used to extend your test environment for better testing.

Take the React component testing as an example, and the following code is before extend is used.

import { test } from 'xbell';

test.browser('react tests', async ({ page }) => {
  const { default: React } = await import('react');
  const { default: ReactDOM } = await import('react-dom');

  const mount = (reactElement) => {
    ReactDOM.render(reactElement, document.getElementById('root'));
  };

  await page.goto('https://my-custom-url.com', {
    mockHTML: '<div><div id="root"></div></div>'
  });

  // for jsx
  window.React = React;

  mount(<div>hello xbell</div>);
});

Use Extend

const testReact = test.browser.extend(async ({ page }) => {
  const { default: React } = await import('react');
  const { default: ReactDOM } = await import('react-dom');

  const mount = (reactElement) => {
    ReactDOM.render(reactElement, document.getElementById('root'));
  };

  await page.goto('https://my-custom-url.com', {
    mockHTML: '<div id="root"></div>'
  });

  // for jsx
  window.React = React;

  return { mount };
});

// use extend to test
testReact('react tests', ({ mount }) => {
    mount(<div>hello xbell</div>);
});