Cypress 不加载静态字体

Question

我正在进行 nx.js、vite 和 vue3 项目。在我的 main.ts 文件中，我导入了一个 index.scss，它导入了一个 _fonts.scss。在这个 _fonts.scss 中，字体是这样加载的：

@font-face {
    font-family: 'Ninja';
    src: url('/assets/font/ninja/ninja.ttf');
}

在我的 cypress 测试中，我导入了相同的 index.scss。但是当我运行测试时，字体没有加载，我得到一个 404 http://localhost:5173/assets/font/ninja/ninja.ttf

不幸的是，关于如何使用 cypress 提供静态资产的文档并不多。

我尝试使用 fileServerFolder 选项设置为存储字体文件的文件夹 - 但它没有解决问题。

更新 1：我的字体位于 apps/{{appName}}/src/public/assets 中。但在组件测试期间不会使用此文件夹。所以我需要某种方法来导入我的字体并为我的所有组件加载它们

Answer 1

该问题可能是由于 Cypress 在组件测试期间未从公共目录 (

apps/{{appName}}/src/public/assets

) 提供静态文件而引起的。为了解决这个问题，您需要使资产在 Cypress 运行的环境中可用。

使用

cypress.config.ts

或

cypress.config.js

。

您可以使用

devServer

设置指向公共文件夹，将 Cypress 配置为提供静态文件。由于您使用的是 Vite，因此需要包含

vite.config.t

s 文件配置以及正确的资源路径。

在您的 Cypress 配置中，包含服务公共资产的路径：

从“cypress”导入{defineConfig}；从 '@cypress/vite-dev-server' 导入 { devServer };

导出默认的defineConfig({ 成分： { devServer: (devServerConfig) => devServer({ ...dev服务器配置，维特配置：{ 根：'apps/{{appName}}/', publicDir: 'src/public', // 确保它指向您的公共文件夹 }, }), }, });
确保您的
```
vite.config.ts
```
文件的
```
publicDir
```
设置正确：

从'vite'导入{defineConfig}；

导出默认的defineConfig({ 根：'apps/{{appName}}/', publicDir: 'src/public', // 静态资源文件夹的正确路径 });