时间戳

首页 > 解决方案 > 如何在服务器端模拟客户端 nextJs 动态导入？

unit-testing - 如何在服务器端模拟客户端 nextJs 动态导入？

问题描述

这是对之前提出的一些问题的微妙变化。我们正在使用 jest 来运行一些 ssr 测试：

module.exports = {
  testEnvironment: 'node',  // NOT jsdom
}

我们的 Next.JS 组件混合了客户端动态导入和服务器端动态导入。

// server-side dynamic import
const Content = dynamic(() => import('../shared/Content'));

// client-side dynamic import
const LoginDialog = dynamic(() => import('../dialogs/LoginDialog'), {
  ssr: false,
});

关键是，在运行 ssr 测试时，因为它是在服务器端运行的，所以我们的快照应该包含来自服务器端动态导入的内容，而不应该包含来自客户端动态导入的内容。

但不幸的是，我们搁浅了，因为我们遇到了以下情况之一：

  1. 使用时testEnvironment: 'node'，jest-next-dynamic抱怨preloadAll无法在客户端动态导入上调用（虽然它在服务器端动态导入上工作正常）

  2. 如果我们删除jest-next-dynamic并调用 preloadAll，那么服务器端动态导入的内容不再在我们的快照中

  3. 如果我们回到testEnvironemnt: 'jsdom'，那么即使我们window在服务器端引用或其他特定于浏览器的东西，我们的 ssr 测试也会通过，这非常糟糕

所以，问题是：我们如何使用 jest 和 Next.JS 来正确模拟客户端动态导入，同时继续实现服务器端动态导入？

我们还研究了如何next/dynamic使用 jest 来模拟/间谍，以便仅模拟 if ssr: true，但看起来 jest 不支持根据参数值进行模拟。

标签： unit-testingjestjsnext.js

解决方案

推荐阅读