将 Jest 与 @web/test-runner 一起使用

Question

我正在尝试使用 @web/test-runner 作为我在 snowpack 之上的测试运行ner。到目前为止，我已成功 @web/test-runner-playwright 启动无头浏览器以运行我的测试。现在我需要一个测试框架（即 jest）来利用它的 test 和 expect 结构。

如何在上述设置中使用 jest？

我试图直接从 @jest/globals 导入这些，但我收到一条错误消息 Do not import '@jest/globals' outside of the Jest test environment，这是可以理解的。

我不想使用 jest 作为我的测试运行ner 因为我想在我的测试和运行测试中利用我的 snowpack 管道在实际的无头浏览器中。这就是我使用 @web/test-runner.

的原因

如何将 jest 与 @web/test-runner 整合？

Answer 1

我认为要走的路是在 jest 配置中设置一个 custom runner。如果我得到了一些有用的东西，我会 post 在这里！

Answer 2

除非您有非常具体的要求，否则不要使用 Jest。 Jest 不完全支持 ECMAScript 模块。当您使用现代网络提供的工具时，我假设您会对使用 ECMAScript 最新版本感兴趣。您可以在此处阅读更多相关信息- https://jestjs.io/docs/ecmascript-modules

您可以将 mocha + chai 组合与网络测试运行器结合使用。您可以从这里参考此设置 - https://github.com/snowpackjs/snowpack/tree/main/create-snowpack-app/app-template-react-typescript

Answer 3

我能够使用 jest-browser-globals:

const { esbuildPlugin } = require('@web/dev-server-esbuild')

module.exports = {
  nodeResolve: true,
  files: ['src/**/*.spec.{ts,tsx}'],
  plugins: [
    esbuildPlugin({
      ts: true,
      tsx: true,
      jsxFactory: 'h',
      jsxFragment: 'Fragment',
    }),
  ],
  coverageConfig: {
    include: ['src/**/*.{ts,tsx}'],
  },
  testRunnerHtml: testFramework => `
    <html>
      <head>
        <script type="module" src="${testFramework}"></script>
        <script type="module">import 'jest-browser-globals';</script>
      </head>
    </html>
  `,
}

此配置使用 esbuild 插件进行捆绑，效果非常快，我推荐，但您可以删除它。

相同的测试运行 in jest (node+jsdom) 和 web-test-运行ner 在浏览器中。调试和源映射都工作得很好。

将 Jest 与 @web/test-runner 一起使用

Use Jest with @web/test-runner

jestjs

headless

test-runner

playwright