我无法将 Storybook/testing-vue 3 连接到我的项目
我执行了命令： npm install --save-dev --legacy-peer-deps @storybook/testing-vue3 然后我连接库： 从 '@storybook/testing-vue3' 导入 { composeStories } 我运行测试并得到...
StencilJS 和 Storybook 7 破坏了热重载
几年来我一直在使用 Storybook 和 StencilJS，而且效果非常好。 几个月前 Storybook 更新到版本 7，它打破了 Stencil 的热重载。 我创建了一个 github 存储库
storybook 显示“此故事未配置为处理控件。 ' 错误
我使用 npx tsdx create 安装了 Storybook 并选择react-with-storybook来制作样式组件库。 在开发过程中，我得到了“这个故事未配置为处理控件”。 ' 错误....
从 Storybook 6 升级到 Storybook 7 导致我的 vue3 应用程序出现“进程未定义”错误
我将 front Storybook 6 升级到 Storybook 7。这些包都在我的 devDependencies 中，但是当我运行我的主要 vue3 应用程序时，它不会显示并且控制台显示此错误： [Vue Router warn]：意外
Storybook 在初始化之前无法访问'__WEBPACK_DEFAULT_EXPORT__'
我将 Storybook 添加到我的项目中，一些故事会抛出错误。 加载 ./components/Modals/InviteUserModal/inviteUserModal.stories.tsx 时出现意外错误：无法访问“WEBPACK_DEFAULT_EXPORT”
未找到组件模块 - Storybook - TypeScript
当我运行 Storybook 时，出现以下错误： ./components/atoms/input/input.tsx 中的错误 14:0-40 找不到模块：错误：无法解析“...”中的“react-tagsinput” 给出我的背景
我正在使用 Nextjs 和故事书，故事书不显示 png 和 jpg 格式的图像 我希望得到一个图像，但得到了一个损坏的图像
我正在使用 Storybook 和 React，并尝试添加具有默认值的 Storybook 选择控件，但没有成功。 文档中没有任何相关内容。 我需要以上选项之一
React Context 和 Storybook：更改组件故事中 React Context 的值
我想知道如何更改 Storybook 中组件故事内的 React Context 的值。 我想有一种方法可以通过故事控制来控制它，但没有任何
如何在 Storybook 中使用 React 中的全局变量
我找到了这个答案，但我无法用它解决问题。 我尝试在 Storybook 中加载的组件取决于通过 CDN 注入到 index.html 中的全局变量。 访问
我在 Storybook 中的互动有点吃力。我想要实现的是使用交互编写一些 UI 测试并在管道中执行这些测试。但我看到了一些问题，即 一个...
Storybook 创建一个隐藏故事以包含在 mdx 文档中
我正在为 Storybook 中的复杂组件创建文档，并希望在 mdx 文件中创建一个工作示例。为此，我的方法通常是将故事集成到我的 mdx usi 中...
Expo/ReactNativeElements/Storybook，扩展主题问题
我正在努力寻找一种方法为我们的团队创建 ReactNativeElements UI 库，以 Expo 作为我们的开发环境（我们在现有部署的应用程序上使用 Expo），并使用 Storybook 来创建...
我刚刚在一个令人兴奋的 Next.js 项目中将 Storybook 从 V6.5.9 升级到了 V7.1.0。一切正常，但是当我尝试构建我的故事书时，它会抛出以下错误： 呃！ => 构建失败...
如何解决 Storybook 中“无法渲染故事 <component>，因为默认导出中缺少组件注释”？
我是 Storybook 的新手，正在设置我的第一个 React 组件和 Stories 文件，如下所示： 按钮.jsx： 从“反应”导入反应； 导出默认函数 Button({title}) { 返回 （ ...
Storybook 侧边栏可以隐藏故事吗？但仍然可以通过 URL 访问它们？
我正在尝试在 Storybook 中做一些事情。 我有一个名为 Button 的组件，侧边栏上的故事太多了。 有没有办法能够“隐藏”侧边栏上的故事但是
Animation-name css 属性在运行 Storybook prod 时丢失，但属性存在于本地
我正在使用 react with sass 模块并尝试实现动画关键帧。奇怪的是在本地 Storybook 中，一切看起来都很好并且可以正常工作，但在产品中，只有动画南...
为什么我在 next.js 13 中构建 Storybook 7 时遇到 EBUSY: 资源繁忙或锁定，打开 errno: -4082 错误？
我想构建故事书，但我在我的项目中遇到了这个错误： [错误：EBUSY：资源繁忙或锁定，打开 'C:\Users li\Desktop\Works\Design Systems\projects\storybook-test2 ode_modules\.cache\
storybook + jest play 方法在函数上调用 shouldHaveBeenCalled 时失败
我有这个组件： 进口 { 足球俱乐部, 反应元素， 使用状态， MouseEvent 作为 ReactMouseEvent， ChangeEvent 作为 ReactChangeEvent， } 来自“反应”； 从 '@mui/
在使用插件控件的 Storybook 中，如何使一个控件依赖于另一个控件的值？
我有一个数据结构 { 域：[ { 编号：'d1'， 文本：'d1文本'， 问题： [ { 编号：'q1'， 文本：'foo' } ] }, { 身份证...
我正在使用 Tailwind CSS 来设计我的应用程序。使用 Storybook-addon-themes，我将深色/浅色类添加到预览 iframe 的 HTML 元素中，因此我的组件根据...
我目前正在 StorybookJS 中开发 Angular 输入组件。我面临的问题是，当我在 Storybook js 的控制面板中输入一个值（例如，hello）并单击“禁用”时
在带有类型错误的 Storybook 中寻求帮助：无法读取未定义的属性
我收到类型错误：无法读取未定义的属性（读取“fontSize”） 这是当前的 style.tsx 代码： 从'@fortawesome/react-fontawesome'导入{FontAwesomeIcon} 进口风格的 f...
NextJS 使用来自 CDN 的 Bootstrap 样式和故事书
我想在这篇文章的开头说我对前端技术不太了解。 对于一些简短的上下文，我正在尝试使用 NextJS 项目配置 Storybook，该项目使用 cu ...
我有一个特定的组件（在故事书中的许多组件中），它在加载后监听按键，而没有任何焦点。我有一个关于这个组件的故事书故事，但它是...
我正在使用由 Storybook、React、TypeScript 和 MUI5 构建的设计系统来实现各种应用程序。该设计系统作为一个库捆绑在一起，有自己的一套由 i18next 管理的翻译。我...
Storybook - LitHtml svg 渲染似乎不适用于符号文件
我目前正在建立一个故事书项目。它的一方面是显示我们作为样式指南的一部分拥有的各种图标。我正在使用 svg-sprite 创建我们所有 svg 的 JSON 文件...
在故事书中，我创建了一个侧边栏组件。它使用来自react-router-dom的NavLink。故事书中的一切都很好。当我安装侧边栏组件并将其导入到我自己的应用程序中并将其包装时...
我实际上正在尝试在主故事书工具栏上添加一个按钮（图标）。目前工具栏上的操作很少，如下所示， 类似，我想附加一个带有一些操作的按钮，如下所示， 我明白了
我正在使用 Primevue (https://primevue.org/tooltip/) 的工具提示，并将其用于故事书文件中。 （https://storybook.js.org/docs/vue/get-started/introduction）。 我想使用 'v-tooltip' 属性或者
我有一个带有自定义 Webpack 配置的 React 应用程序。 添加与 tsconfig.json 文件 compilerOptions->paths 字段匹配的 Webpack 别名后，Webpack 可以识别别名。 ...
我在故事书中为我的选择组件编写测试。基本上是从 MUI 版本中选择的样式。 5. 我无法访问 role="listbox"，因为它位于根目录之外。 我在故事书中为我的选择组件编写测试。基本上是从 MUI 版本中选择的样式。 5. 我无法访问 role="listbox"，因为它位于根目录之外。 <div id="root"> Storybook render Select here</div> <div role="presentation"> Here are my Select options <ul role="listbox" ></u> - cannot acces this role after click. Unable to find an accessible element with the role "listbox" <div> 这是我的故事。 const Template: ComponentStory<typeof StyledSelect> = (args) => <StyledSelect {...args} />; export const ChangeOption = Template.bind({}); ChangeOption.args = { labelId: 'dafault-select-label', id: 'default-select', label: 'select-under-test', sx: { width: 240 }, value: 1, children: [ <StyledMenuListItem key={'none1'} value={-1}> None </StyledMenuListItem>, <StyledMenuListItem key={1} value={1}> Option 1 </StyledMenuListItem>, <StyledMenuListItem key={2} value={2}> Option 2 </StyledMenuListItem>, <Divider key="div3" />, <StyledMenuListItem key={3} value={3}> Option 3 </StyledMenuListItem>, ], }; ChangeOption.play = async ({ canvasElement, globals }) => { // Arrange const canvas = within(canvasElement); const selectElement = canvas.getByLabelText(/select-under-test/i); await expect(selectElement).toHaveTextContent(/option 1/i); // Act await userEvent.click(selectElement); const listbox = await canvas.getByRole('listbox'); // Unable to find an accessible element with the role "listbox" }; 画布找不到打开的选择菜单的原因是它是使用Portal渲染的，因此存在于画布DOM之外。解决这个问题的一种方法是使用 @storybook/testing-library 中的屏幕对象。这不是一个很好的解决方案，但您可以使用以下方法： import { screen, userEvent, within } from '@storybook/testing-library'; // ... ChangeOption.play = async ({ canvasElement, globals }) => { // Arrange const canvas = within(canvasElement); const selectElement = canvas.getByLabelText(/select-under-test/i); await expect(selectElement).toHaveTextContent(/option 1/i); // Act await userEvent.click(selectElement); // Get the listbox const listbox = within(await screen.findByRole('listbox')); // Click an option const option = listbox.getByText(/Option 3/i); userEvent.click(option); // Now you can test what you expect to change on the canvas }; 需要注意的是，您现在正在整个 Storybook 屏幕上搜索，其中包括页面上的所有内容，而不仅仅是 Storybook 画布中的内容。因此，如果屏幕上还有其他列表框，您可能会遇到问题。 如果您或其他人有更好的解决方案，我很乐意看到更好的解决方案！
错误：意外的 `storiesOf` 用法：C:/Users/imran/react-package/src/stories/Requirements.stories.js（第 6 行，第 16 栏）
无法索引./src/stories/Requirements.stories.js： 错误：意外的故事用法：C:/Users/imran/react-package/src/stories/Requirements.stories.js（第 6 行，第 16 栏）。 在 SB7 中，我们使用下一个-
我有一个项目使用故事书背景插件来测试明暗模式组件。但是尽管组件看起来相同，但一些暗模式测试似乎失败了。我潜得更深......
节点测试 TypeError [ERR_UNKNOWN_FILE_EXTENSION]：Preact 应用程序中未知的文件扩展名“.png”
我正在 TypeScript 组件中导入 PNG 文件： 从“./MyImage.png”导入MyImage； 导出默认函数 () { 返回 我正在我的 TypeScript 组件中导入 PNG 文件： import MyImage from "./MyImage.png"; export default function () { return <img src={MyImage} width="16" height="16" />; } 该组件在 Storybook 中渲染得很好（使用 Vite），但是当我使用此命令运行测试时： tsx --test --test-reporter=spec $(glob '**/*.test.ts') 我收到错误： ℹ node:internal/errors:490 ℹ ErrorCaptureStackTrace(err); ℹ ^ ℹ ℹ TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".png" for /Users/me/src/templates/MyImage.png ℹ at __node_internal_captureLargerStackTrace (node:internal/errors:490:5) ℹ at new NodeError (node:internal/errors:399:5) ℹ at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11) ℹ at defaultGetFormat (node:internal/modules/esm/get_format:121:38) ℹ at defaultLoad (node:internal/modules/esm/load:81:20) ℹ at nextLoad (node:internal/modules/esm/loader:163:28) ℹ at V (file:///Users/me/src/templates/node_modules/.pnpm/[email protected]/node_modules/tsx/dist/loaders-deprecated-261ba186.mjs:12:1703) ℹ at nextLoad (node:internal/modules/esm/loader:163:28) ℹ at ESMLoader.load (node:internal/modules/esm/loader:605:26) ℹ at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22) ℹ at new ModuleJob (node:internal/modules/esm/module_job:64:26) ℹ at #createModuleJob (node:internal/modules/esm/loader:480:17) ℹ at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34) ℹ at process.processTicksAndRejections (node:internal/process/task_queues:95:5) ℹ at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:21) { ℹ code: 'ERR_UNKNOWN_FILE_EXTENSION' ℹ } ℹ ℹ Node.js v18.15.0 如果我尝试包含其中一个文件，我会收到关于 .css 文件的相同错误。 我的tsconfig.json： { "extends": "@tsconfig/strictest/tsconfig", "compilerOptions": { "lib": ["es2023"], "target": "es2022", "strict": true, "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "bundler", "noEmit": true, "jsx": "react-jsx", "resolveJsonModule": true, "jsxImportSource": "preact", "experimentalDecorators": true, "skipLibCheck": true, "baseUrl": "./", "paths": { "react": ["./node_modules/preact/compat/"], "react-dom": ["./node_modules/preact/compat/"] } }, "exclude": ["node_modules"] } 知道如何修复这个错误吗？ 提前致谢。 这是正确的行为。 根据规范，您不能将 PNG、CSS 文件或任何其他资源类型导入到 JS 中（尽管我们几乎已经到了可以导入 JSON 的地步了）——从技术上来说，这是捆绑程序为了支持而解决的无效代码. 据我所知，您遇到的问题是 tsx 没有能力处理这个问题。您需要一个能够去除捆绑程序特定行为的测试运行程序，或者您应该迁移到使用 Web 标准，使用字符串引用而不是导入，即 <img src="./MyImage.png" />