使用 Nuxt 和 Jest 进行集成测试

Posted 2023-03-08

【中文标题】使用 Nuxt 和 Jest 进行集成测试

【英文标题】：Integration testing with Nuxt and Jest

【发布时间】：2019-02-28 18:53:28

【问题描述】：

我希望使用 Nuxt 的 renderAndGetWindow 呈现页面，以测试我的 API 返回的值。

我是这样做的：

// Nuxt instance
let nuxt = null;
// Our page to test
let homePage = null;

beforeAll(async (done) => 
    // Configuration
    const rootDir = resolve(__dirname, '../..');
    let config = ;
    config = require(resolve(rootDir, 'nuxt.config.js'));
    config.rootDir = rootDir; // project folder
    config.env.isDev = false; // dev build
    config.mode = 'universal'; // Isomorphic application

    nuxt = new Nuxt(config);
    await new Builder(nuxt).build();
    nuxt.listen(3001, 'localhost');
    homePage = await nuxt.renderAndGetWindow('http://localhost:3001/');
  );

这给了我 2 个明显的错误：

console.error node_modules/jest-jasmine2/build/jasmine/Env.js:157 未处理的错误

console.error node_modules/jest-jasmine2/build/jasmine/Env.js:158 TypeError: setInterval(...).unref 不是函数

和

超时 - 在 jest.setTimeout 指定的 5000 毫秒超时内未调用异步回调。

 at mapper (node_modules/jest-jasmine2/build/queue_runner.js:41:52)

自从我从 Ava 切换到 Jest 后，我​​就明白了。

我是否处理了我的渲染错误？

【参考方案1】：

unref

The default test environment for Jest is a browser-like environment through jsdom.

unref是Node提供的特殊功能。它没有在浏览器或jsdom 中实现，而是在it is implemented in the "node" test environment in Jest 中实现。

看起来测试Nuxt 应用程序需要Node 环境来启动服务器，并需要jsdom 环境来测试生成的用户界面。

这可以通过将测试环境设置为“节点”并在测试设置期间使用jsdom 初始化window 来完成。

超时

Jest 将 "wait if you provide an argument to the test function, usually called done"。这适用于测试功能和设置功能，例如beforeAll。

您的beforeAll 函数有一个从未调用过的参数done。 Jest 将一直等到调用 done 或使用 jest.setTimeout 配置的超时到期（默认为 5 秒）。

您正在使用async 函数，并且在函数的异步部分上使用await，因此您不需要done。将 beforeAll 函数更改为不接受任何参数，这将阻止 Jest 等待 done 被调用。

在我的测试中，启动Nuxt 服务器需要很长时间，因此您可以将timeout 值作为附加参数传递给beforeAll，以增加该函数的超时时间。

---

以下是包含这些更改的更新测试：

/**
 * @jest-environment node
 */
// TODO: Set the environment to "node" in the Jest config and remove this docblock

// TODO: Move this to a setup file
const  JSDOM  = require('jsdom');
const  window  = new JSDOM();  // initialize window using jsdom

const resolve = require('path').resolve;
const  Nuxt, Builder  = require('nuxt');

// Nuxt instance
let nuxt = null;
// Our page to test
let homePage = null;

beforeAll(async () => 
  // Configuration
  const rootDir = resolve(__dirname, '../..');
  let config = ;
  config = require(resolve(rootDir, 'nuxt.config.js'));
  config.rootDir = rootDir; // project folder
  config.env.isDev = false; // dev build
  config.mode = 'universal'; // Isomorphic application

  nuxt = new Nuxt(config);
  await new Builder(nuxt).build();
  nuxt.listen(3001, 'localhost');
  homePage = await nuxt.renderAndGetWindow('http://localhost:3001/');
, 20000);  // Give the beforeAll function a large timeout

afterAll(() => 
  nuxt.close();
);

describe('homepage', () => 
  it('should do something', () => 
  );
);

【讨论】：

设置环境。 to node 似乎触发了问题，因为需要 jsdom（并且是默认环境）。

@Christopher 是的，看起来测试Nuxt 应用程序需要Node 环境和jsdom 环境。答案已更新。

点赞！如果 GET / 返回状态码 200，你将如何测试，你需要 superagent 什么的吗？

@BrianAdams 为什么测试完成后进程继续运行？