2

我正在为一个动态导入另一个组件的苗条组件写一个测试。以下代码段是发生动态导入的部分。

async function importComponent() {
    if (!dynamicComponent) {
      dynamicComponent= (await import('../Component')).Component;
    }
  }

我的笑话配置（在 package.json 中）

"jest": {
    "globals": {
      "ts-jest": {
        "isolatedModules": true,
        "tsConfig": "./tsconfig.json",
      }
    },
    "testEnvironment": "jsdom",
    "verbose": true,
    "transform": {
      "^.+\\.svelte$": [
        "svelte-jester",
        {
          "preprocess": true
        }
      ],
      "^.+\\.ts$": "ts-jest",
      "^.+\\.js$": "babel-jest"
    },
    "setupFilesAfterEnv": [
      "<rootDir>/setupTests.ts"
    ],
    "moduleFileExtensions": [
      "js",
      "ts",
      "svelte"
    ]
  }

失败的测试

it('should open on click', async () => {
  const { getByRole } = render(ComponentUnderTest, { ...dummyProps });
  const loadComponentButton = getByRole('button');

  await fireEvent(loadComponentButton,  new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
  }));
});

我试图用 babel 插件"dynamic-import-node"和/或"@babel/plugin-syntax-dynamic-import". 但结果是一样的。

我也尝试使用jest-next-dynamic（用于使用 nextjs 动态导入语法模拟动态导入）

我也尝试模拟动态导入但没有任何成功 - 或者更确切地说我不知道​​如何模拟导入......

如果我在测试运行期间实际导入组件、预加载组件或只是模拟它，对我来说并不重要 - 测试应该只是运行而不会引发错误

如果我应该提供任何其他信息，请告诉我！

更新

测试失败并显示以下消息：

错误：您需要使用支持 VM API 中的 ES 模块的节点版本运行。请参阅https://jestjs.io/docs/ecmascript-modules。

我正在运行 Node v16.4.2 btw - 我尝试了链接中描述的解决方案，但结果是所有测试都失败了。也许我对如何执行测试的理解是错误的，但是我在 jsdom 环境中而不是在节点环境中运行测试，所以我并没有真正得到错误？

目前我的目标是以import()某种方式模拟。

4

0 回答 0