Skip to content

How test modules using puppeteer + qunit  #1

@villander

Description

@villander

look at this scenario. the result will return - ReferenceError: _dollar is not defined

const $ = selector => document.querySelector(selector);
module.exports = $;
const puppeteer = require('puppeteer');

const QUnit = require('qunit');
const $ = require('./dollar');

const { module: testModule, test } = QUnit;

testModule('$ - dollar DOM', (hooks) => {
  hooks.before(async function() {
    this.browser = await puppeteer.launch();
  });

  hooks.after(async function() {
    await this.browser.close();
  });

  test('sould return the dom element if exist', async function (assert) {
      const page = await this.browser.newPage();
      await page.goto(`file:${fixturePath}/index.html`);

      await page.addScriptTag({ url: 'https://www.unpkg.com/domjson' });

      const bodyEl = await page.evaluate(() => {
        return domJSON.toJSON($('body'));
      });
      console.log(JSON.stringify(bodyEl, true, 2)); // return ReferenceError: _dollar is not defined
      assert.ok(bodyEl);

      await page.close();
    });
});

Trying the evaluate script the .evaluate will return a {}

test('sould return the dom element if exist', async function (assert) {
      const page = await this.browser.newPage();
      await page.goto(`file:${fixturePath}/index.html`);

      await page.addScriptTag({ url: 'https://www.unpkg.com/domjson' });

      const bodyEl = await page.evaluate(`
          // Now I'm inside BROWSER environment
          () => {
            return domJSON.toJSON($('body'));
          }
      `);
      console.log(JSON.stringify(bodyEl, true, 2)); // {}
      assert.ok(bodyEl);

      await page.close();
    });

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions