标签: storybook

即使我的故事书仍然正常构建，我开始在我的终端上收到此错误

ERR! Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/
ERR! @storybook/addon-docs
ERR! Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/
ERR! @storybook/addon-essentials

我真的不明白我错过了什么。

这是我的main.js

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-links',
    '@storybook/addon-controls',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
};

这是我的preview.js

import React from 'react';
import { MemoryRouter } from 'react-router-dom';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  options: {
    storySort: (a, b) …

我已将 Angular 从 更新为11至12，并将我的 中的所有软件包更新为最新版本package.json：

    {
      "name": "poc-architecture-angular",
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve --host 0.0.0.0  --port 4200",
        "build": "NODE_ENV=production ng build --prod",
        "build:dev": "NODE_ENV=production ng build --source-map=true --prod",
        "build:local": "ng build --watch --output-path /usr/share/nginx/html && tar -zcvf archive.tar.gz dist/prod/*",
        "test": "ng test",
        "test:coverage": "ng test --no-watch --code-coverage --browsers ChromeHeadlessNoSandbox",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "stylelint": "stylelint --fix \"src/**/*.scss\" --config .stylelintrc.json",
        "stylelint:diff": "stylelint \"src/**/*scss\" --config .stylelintrc.json",
        "format": "prettier --write \"src/app/**/*.{ts,html,scss}\"", …

让我们看看我们有一个简单的组件ToggleButton：

const ButtonComponent = Vue.component('ButtonComponent', {
  props: {
    value: Boolean
  },

  methods: {
    handleClick() {
      this.$emit('toggle');
    }
  },

  template: `
    <button 
      :class="value ? 'on' : 'off'"
      @click="handleClick"
    >
      Toggle
    </button>`
});

以及该组件的故事：

import ToggleButton from './ToggleButton.vue';

export default {
  title: 'ToggleButton',
  component: ToggleButton,

  argTypes: {
    onToggle: {
      action: 'toggle' // <-- instead of logging "toggle" I'd like to mutate `args.value` here
    }
  }
};

export const Default = (_args, { argTypes }) => ({
  components: { ToggleButton }, …

我对 React 还很陌生，现在正在尝试使用 Storybook。我在使用时遇到以下错误npm run storybook。我已经尝试弄清楚，但我仍然不确定。

无法读取未定义的属性（读取“类型”） TypeError：无法读取未定义的属性（读取“类型”）

at isMdx (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:3504:30)
at mdxToJsx (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:3508:8)
at jsxDecorator (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:3545:19)
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:9896:21
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:19890:12
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:19939:14
at wrapper (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:7412:12)
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:10411:14
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:10425:26
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:9896:21

似乎有问题vendors-node_modules，但有人知道如何解决这个问题吗？

在模拟用户与酶​​的交互后,我正在使用故事书来可视化React组件的更改.作为一个小例子,我希望在单击其中一个按钮后显示一个组件的故事.

我遇到的问题是组件的构造函数被调用两次:一次是在通过酶安装组件时,然后在故事书显示组件之后.这会将组件恢复为默认状态,因此模拟用户交互之后的任何更改都将丢失.

这是一些显示问题的代码.故事加载后,按钮组件处于"未点亮"状态,即使点击是用酶模拟的:

import React from 'react';

class SampleComponent extends React.Component {

    constructor(props){
        super(props);
        console.log('constructor');

        this.state = {isClicked: false};
        this.onClick = this.onClick.bind(this);
    }

    onClick(){
        console.log('onClick');
        this.setState({isClicked: true});
    }

    render(){
        const text = (this.state.isClicked)? 'Clicked!' : 'Not Clicked';
        return (
            <div>
                <input type='button' value='Click' onClick={this.onClick} />
                <p>{text}</p>
            </div>
        );
    }
}

export default SampleComponent;

故事档案:

import React from 'react';
import { storiesOf } from '@storybook/react';
import { mount } from 'enzyme';
import { specs, describe, it } from 'storybook-addon-specifications';
import SampleComponent …

在我的 React 故事书中，我希望能够使用使用 graphQL 查询和突变（用 Apollo 实现）的组件。

使用 MockedProvider 可以很好地工作，只要我提前指定确切的突变，包括它们的输入。

我想知道是否有可能/如何不提前指定输入，以接受任何输入。

export const MyComponent = () => (
    <Mutation mutation={gql`some mutation`}>
      {(doMutation, { loading, error, data }) => (
        <Button onClick={()=> doMutation({input: {
          someInput: Math.rand()*10 // Would be fine if this was 1.
        }}) />
        {data ? <>Result: {data.someResult}</> : null}
      )
    </Mutation>
)

storiesOf('MyComponent', module)
  .add('some story', () => (
    <StaticRouter context={{}}>
      <MockedProvider
        mocks={[
          {
            request: {
              query: gql`some query...`,
              variables: { input: { someInput: '1' } },
            }, …

我有一个相对简单的角度组件，它使用了角度材料组件 - 特别是 mat-menu。

创建故事时，出现运行时错误：

    Error: Template parse errors:
Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'. ("
        </li>
        <li class="nav-item">
          <button class="menubtn" mat-icon-button [ERROR ->][matMenuTriggerFor]="menu">
            <span class="fa-stack fa-md">
              <i class="fa fa-g"): ng:///DynamicModule/VeradigmHeaderComponent.html@33:50
There is no directive with "exportAs" set to "matMenu" ("
            </span>
          </button>
          <mat-menu [ERROR ->]#menu="matMenu" xPosition="before">
            <button mat-menu-item (click)="setLoc('en_US')">en-US"): ng:///DynamicModule/VeradigmHeaderComponent.html@38:20
'mat-menu' is not a known element:
1. If 'mat-menu' is an Angular component, then verify that it is part of this module.
2. …

我的错误首先与此处描述的错误完全相同。我正在使用@svgr/webpack包将我的.svg文件作为这样的 React 组件导入：

import Shop from './icons/shop.svg'

return <Shop />

它在我的应用程序上运行良好，但是当我尝试在Storybook 中执行相同操作时，出现此错误：

无法在“文档”上执行“createElement”：提供的标签名称 (“static/media/shop.61b51e05.svg”) 不是有效名称。

所以我将加载器添加到我的.storybook/main.js文件中以扩展默认的 Storybook webpack 配置：

// ...
webpackFinal: async config => {    
    config.module.rules.push({
      test: /\.svg$/,
      enforce: 'pre',
      loader: require.resolve('@svgr/webpack'),
    });

错误仍然发生，因此我尝试按照上一个问题.svg的答案中的建议覆盖文件的默认 Storybook 测试：

const fileLoaderRule = config.module.rules.find(rule => { rule.test !== undefined ? rule.test.test('.svg') : '' });
fileLoaderRule.exclude = /\.svg$/;

但是后来我收到了这个错误：

类型错误：无法设置未定义的属性“排除”

所以，我决定做一个console.log的rule.test和奇怪的故事书，从未来配置的唯一默认的测试论文：

{
  test: /\.md$/,
  ... …

我正在尝试在故事书中加载自定义全局样式文件 theme-default.scss 。虽然我的组件正在故事书中加载，但没有应用样式。我遵循了自定义 webpack 配置的本教程故事书官方文档。（虽然我对 webpack 不是很熟悉）

这是我的 .storybook/main.js 文件

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//import '!style-loader!css-loader!../src/stories/stories.scss'; // for scss
module.exports = {
  stories: ['../src/**/*.stories.ts'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-notes'],
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: …

我想知道，在故事书中模拟 React 状态的“最佳实践”是什么（例如 *.stories.js）。

目前我正在尝试实现深色主题切换。

1. App Component 有一个名为“darkState”的状态，可以设置 true/false
2. 应用程序组件有一个处理程序“handleThemeChange()”，它根据“darkState”更改 MUI 主题
3. 标题组件有一个带有“onChange()”的开关或按钮，它会触发应用程序组件中的“handleThemeChange()”
4. MUI Switch 需要一个状态才能正常工作（至少我猜是这样）

所以，我决定在我的故事文件中模拟这个状态。但是在装饰器中写这个似乎......很奇怪。你怎么解决这个问题？

/components/Header/Header.stories.js

import React, { useState } from "react";
import { Header } from "./Header";

export default {
  title: "Components/Header",
  component: Header,
  decorators: [
    (StoryFn) => {
      // mock state
      const [darkState, setDarkState] = useState(false);
      const handleThemeChange = () => {
        setDarkState(!darkState);
        return darkState;
      };

      return (
        <Header
          enableThemeChange={true}
          handleThemeChange={handleThemeChange}
          darkState={darkState}
        />
      );
    }
  ]
};

const Template = (args) => <Header {...args} />; …