时间戳

首页 > 解决方案 > Jest - DOM 相关和跨 JS 文件单元测试

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

问题描述

我正在使用Jest进行单元测试。添加了jest-puppeteer并在其中重新布线。问题是当我尝试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();
}

另一个.js

function someFunctionFromAnotherJS() {
    return 'hello';
}

提前致谢。

标签： javascriptunit-testingjestjspuppeteer

解决方案

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

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

而不是sayHello();，你可以尝试，

await page.evaluate(sayHello)

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

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

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

请参阅此处，您将需要以某种方式模拟 DOM。所以Puppeteer，jsdom和其他人帮助你做到这一点。参考答案：

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

推荐阅读