我正在尝试配置 Storybook 以使用 Next.js、Ant Design、Less 和 TypeScript。在 Next.js 中,图像必须存储在public/文件夹中,并使用要在整个项目中使用的绝对路径进行引用。我在配置 Storybook.js webpack 以便能够解析这些绝对图像路径时遇到问题。
例如,在 CSS 模块中我可以有:
.testImage {
background-image: url('/images/cucumber.png');
background-repeat: no-repeat;
background-size: contain;
height: 300px;
width: 300px;
}
Run Code Online (Sandbox Code Playgroud)
但是 Storybook 在构建时会失败并出现以下错误:
ERROR in ./common/layout/TestImage/TestImage.module.css (./node_modules/css-loader/dist/cjs.js??ref--15-1!./common/layout/TestImage/TestImage.module.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '/images/cucumber.png' in '/Users/gerritvanderlugt/Development/misc/storybook-issue/common/layout/TestImage'
at /Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/Resolver.js:209:21
at /Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
at /Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/gerritvanderlugt/Development/misc/storybook-issue/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
at …Run Code Online (Sandbox Code Playgroud) 我有一个带有 NextJS 前端和 FeathersJS/Node 后端的项目。这两个应用程序/代码库都是单独的存储库。我想开始使用 Cypress 进行 E2E 测试,但我不确定在我的设置中执行此操作的最佳方法是什么。理想情况下,测试将作为 CI 的一部分针对每个后端和前端更改运行。我目前正在为我的 CI 使用 GitHub 操作,我不确定这对我是否有帮助或伤害。
我看到有些人提到将 Cypress 放在自己的存储库中,并使用自己的 docker-compose 来处理前端和后端的旋转以运行测试。但是,我不明白这作为 CI 的一部分如何工作。预合并的新代码如何进入此存储库并作为 CI 的一部分运行?我认为这种方法会有很多问题。
我想到的一种方法是将 Cypress 作为前端 NextJS 应用程序的一部分,并让它针对后端的“暂存”或“测试”实例运行,该实例会随着每个新的后端部署而播种。这里的问题之一是,当后端发生变化时,测试将不会运行,但这不一定是问题,我想。
有什么想法吗?
我有一个 NextJS 应用程序设置并部署到 Heroku。当我更新 Heroku 环境变量时,新变量实际上并未在实时站点上使用。我尝试通过 CLI 更新 Heroku 控制台中的变量、编辑变量、删除变量然后将它们添加回来,并多次重新启动测功机。我认为这可能是一个缓存问题,我只需要稍等一下更改即可传播,但现在已经 12 小时了,新变量仍然没有在网站上使用。
任何帮助将不胜感激。