Jest - DOM, связанный и через файлы JS Модульное тестирование

Question

Я использую Jest для модульного тестирования. Добавлен шутник-кукловод и перемонтирован в нем. Проблема в том, когда я пытаюсь позвонить sayHello() используя приведенный ниже код, $button переменная не определена и выдает ошибку в main.js, И если я позвоню someFunctionFromAnotherJS()Это тоже ошибка. В любом случае это вернет ошибку, так как я не знаю, как писать модульные тесты для DOM, связанных и для всех файлов JS. Обратите внимание, что мне также нужно использовать все глобальные переменные, загруженные в браузер, в файлах JS.

Пожалуйста, посмотрите на приведенный ниже код и скажите, как мне этого добиться.

тесты / main.test.js

var rewire = require('rewire');
var main = rewire('../main');
var sayHello = main.__get__('sayHello');

describe('Testing', () => {
  beforeAll(async () => {
    await page.goto('https://***.**.com/**');
  });

  it('should test page', async () => {
    await page.type('#lid', '*****@gmail.com');
    await page.type('#pwd', '*****');
    await page.click('#signin_submit');
    var dimensions = await page.evaluate(() => {
      return {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight,
        deviceScaleFactor: window.devicePixelRatio
      };
    });

    await page.goto('https://***.**.com/**', {timeout: 30000, waitUntil: 'load'});
    await page.goto('https://***.**.com/**', {timeout: 30000, waitUntil: 'load'});
    var evaluatedPage = await page.evaluate(() => {
      return {
        isFreeUser: window.isFreeUser
      };
    });
    await page.screenshot({path: 'screenshot.png'});
    console.log('Evaluated Page:', evaluatedPage);
    expect(evaluatedPage.isFreeUser).to.equal(false);

    sayHello();
  });
});

main.js

var $button = $('#myButton');

function sayHello() {
    $button.text('Hello!');
    return someFunctionFromAnotherJS();
}

another.js

function someFunctionFromAnotherJS() {
    return 'hello';
}

Заранее спасибо.

Answer 1

Чтобы устранить эту проблему, вы можете console.log(sayHello) и посмотреть, что на самом деле там. Если сам по себе sayhello является надлежащей функцией, то продолжайте,

Похоже на то main.js скрипт, который должен запускаться в браузере Если это так, вы должны запустить его в браузере, а не в контексте nodeJS.

Вместо sayHello();, ты можешь попробовать,

await page.evaluate(sayHello)

Таким образом, он будет выполняться в контексте браузера.

РЕДАКТИРОВАТЬ: Jest-Puppeteer просто продолжение Jest помочь вам тестировать различные маленькие кусочки. Вы можете написать тесты отдельно. Но если вы хотите запускать и тестировать функции DOM, вы должны использовать что-то, что может запустить эту функцию DOM. Это факт.

Я не уверен, почему вы пытаетесь запустить код JQuery (который зависит от браузеров window а также document) в среде nodeJS.

Смотрите здесь, вам нужно будет как-то эмулировать DOM. Так Puppeteer, jsdom и другие помогают вам сделать это. Ссылочный ответ:

Если вы действительно хотите, чтобы все было отдельно и не хотите использовать puppeteer (что я действительно не понимаю, зачем вам это нужно), тогда вы можете попробовать несколько комбинаций следования, чтобы увидеть, что работает лучше для вас, но помните, что вы пытаетесь заново изобрести то, что уже есть,

• jsdom
• JQuery
• здор`ово