javascript - Jest - DOM 相关和跨 JS 文件单元测试

Question

我正在使用Jest用于单元测试。已添加jest-puppeteer和 rewire在里面。问题是当我尝试使用下面的代码调用 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();
  });
});

ma​​in.js

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

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

另一个.js

function someFunctionFromAnotherJS() {
    return 'hello';
}

提前致谢。

Answer 1

要调试此问题，您可以 console.log(sayHello) 并查看其中实际内容。如果 sayhello 本身是一个正确的函数，则继续，

看起来main.js是一个应该在浏览器上运行的脚本。如果是这种情况，您应该在浏览器上运行它，而不是在 NodeJS 上下文上。

您可以尝试代替sayHello();，

await page.evaluate(sayHello)

这样它将在浏览器上下文中执行。

编辑:jest-puppeteer 只是 jest 的扩展，可帮助您测试各种小片段。您可以单独编写测试。但是如果您想运行和测试 DOM 函数，那么您必须使用可以运行该 DOM 函数的东西。这是事实。

我不知道你为什么要尝试在nodeJS环境上运行jQuery代码(这取决于浏览器window和document)。

参见here ，您将需要以某种方式模拟 DOM。因此，Puppeteer、jsdom 等可以帮助您做到这一点。引用答案:

如果您真的想将所有内容分开并且不想使用puppeteer(我真的不明白您为什么要这样做)，那么您可以尝试以下几种组合看看什么最适合您，但请记住您正在尝试重新发明已有的东西，

• jsdom
• jquery
• cheerio