javascript - Jest-与DOM相关且跨JS文件的单元测试

我正在使用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();
  });
});

main.js

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

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

another.js

function someFunctionFromAnotherJS() {
    return 'hello';
}

提前致谢。

最佳答案

要调试此问题，您可以console.log（sayHello）并查看其中的实际内容。如果sayhello本身是适当的功能，则继续进行，

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

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

await page.evaluate(sayHello)

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

编辑：jest-puppeteer只是jest的扩展，可帮助您测试各种小块。您可以单独编写测试。但是，如果要运行和测试DOM函数，则必须使用可以运行该DOM函数的工具。这是事实。

我不确定为什么要尝试在nodeJS环境上运行jQuery代码（取决于浏览器document和Puppeteer）。

参见here，您将需要以某种方式模拟DOM。所以jsdom，puppeteer和其他可以帮助您做到这一点。参考答案：

如果您真的想将所有内容分开放置，并且不想使用（我真的不明白为什么要这么做），那么可以尝试以下几种组合，以找出最适合您的方法，但是记住，您正在尝试重塑已经存在的东西，


jsdom
jquery
cheerio

关于javascript - Jest-与DOM相关且跨JS文件的单元测试，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52315936/