argTypes:Inheritance

Build 13915 on tom/23347-story-globals
1200px
Reviewing disabled
View latest build
chromechrome
ErrorBuild 13915 on tom/23347-story-globals
View Storybook
ErrorBuild 13915 on tom/23347-story-globals
View Storybook
The baseline is taller than the new snapshot (1200x1660 to 1200x900).
edgeedge
The baseline is taller than the new snapshot (1200x1660 to 1200x900).
firefoxfirefox
The baseline is taller than the new snapshot (1200x1660 to 1200x900).
Fail
argTypes.stories.ts
Found multiple elements by: [data-testid="pre"]

Here are the matching elements:

Ignored nodes: comments, script, style
<pre
  data-testid="pre"
>
  {
  "style": {
    "control": {
      "type": "object"
    },
    "name": "style",
    "description": "",
    "type": {
      "required": false,
      "name": "object",
      "value": {}
    },
    "table": {
      "type": {
        "summary": "{ }"
      },
      "defaultValue": {
        "summary": "{ }"
      }
    }
  },
  "object": {
    "control": {
      "type": "object"
    },
    "name": "object",
    "description": "",
    "type": {
      "required": false,
      "name": "object",
      "value": {}
    },
    "table": {
      "type": {
        "summary": "{ }"
      }
    }
  },
  "text": {
    "control": {
      "type": "text"
    },
    "name": "text",
    "description": "",
    "type": {
      "required": false,
      "name": "string"
    },
    "table": {
      "type": {
        "summary": "string"
      },
      "defaultValue": {
        "summary": "''"
      }
    }
  },
  "componentArg": {
    "control": {
      "type": "text"
    },
    "name": "componentArg",
    "type": {
      "name": "string"
    }
  },
  "storyArg": {
    "control": {
      "type": "number"
    },
    "name": "storyArg",
    "type": {
      "name": "number"
    }
  },
  "composedArg": {
    "control": {
      "type": "text"
    },
    "name": "composedArg",
    "type": {
      "name": "string"
    },
    "options": [
      "a",
      "b"
    ]
  }
}
</pre>

Ignored nodes: comments, script, style
<pre
  data-testid="pre"
>
  {
  "style": {
    "control": {
      "type": "object"
    },
    "name": "style",
    "description": "",
    "type": {
      "required": false,
      "name": "object",
      "value": {}
    },
    "table": {
      "type": {
        "summary": "{ }"
      },
      "defaultValue": {
        "summary": "{ }"
      }
    }
  },
  "object": {
    "control": {
      "type": "object"
    },
    "name": "object",
    "description": "",
    "type": {
      "required": false,
      "name": "object",
      "value": {}
    },
    "table": {
      "type": {
        "summary": "{ }"
      }
    }
  },
  "text": {
    "control": {
      "type": "text"
    },
    "name": "text",
    "description": "",
    "type": {
      "required": false,
      "name": "string"
    },
    "table": {
      "type": {
        "summary": "string"
      },
      "defaultValue": {
        "summary": "''"
      }
    }
  },
  "componentArg": {
    "control": {
      "type": "text"
    },
    "name": "componentArg",
    "type": {
      "name": "string"
    }
  },
  "storyArg": {
    "control": {
      "type": "number"
    },
    "name": "storyArg",
    "type": {
      "name": "number"
    }
  },
  "composedArg": {
    "control": {
      "type": "text"
    },
    "name": "composedArg",
    "type": {
      "name": "string"
    },
    "options": [
      "a",
      "b"
    ]
  }
}
</pre>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Ignored nodes: comments, script, style
<div
  id="storybook-root"
>
  <div
    class="css-ec0dpa"
    data-side="left"
  >
    <pre
      data-testid="pre"
    >
      {
  "style": {
    "control": {
      "type": "object"
    },
    "name": "style",
    "description": "",
    "type": {
      "required": false,
      "name": "object",
      "value": {}
    },
    "table": {
      "type": {
        "summary": "{ }"
      },
      "defaultValue": {
        "summary": "{ }"
      }
    }
  },
  "object": {
    "control": {
      "type": "object"
    },
    "name": "object",
    "description": "",
    "type": {
      "required": false,
      "name": "object",
      "value": {}
    },
    "table": {
      "type": {
        "summary": "{ }"
      }
    }
  },
  "text": {
    "control": {
      "type": "text"
    },
    "name": "text",
    "description": "",
    "type": {
      "required": false,
      "name": "string"
    },
    "table": {
      "type": {
        "summary": "string"
      },
      "defaultValue": {
        "summary": "''"
      }
    }
  },
  "componentArg": {
    "control": {
      "type": "text"
    },
    "name": "componentArg",
    "type": {
      "name": "string"
    }
  },
  "storyArg": {
    "control": {
      "type": "number"
    },
    "name": "storyArg",
    "type": {
      "name": "number"
    }
  },
  "composedArg": {
    "control": {
      "type": "text"
    },
    "name": "composedArg",
    "type": {
      "name": "string"
    },
    "options": [
      "a",
      "b"
    ]
  }
}
    </pre>
  </div>
  <div
    class="css-b8mu1s"
    data-side="right"
  >
    <pre
      data-testid="pre"
    >
      {
  "style": {
    "control": {
      "type": "object"
    },
    "name": "style",
    "description": "",
    "type": {
      "required": false,
      "name": "object",
      "value": {}
    },
    "table": {
      "type": {
        "summary": "{ }"
      },
      "defaultValue": {
        "summary": "{ }"
      }
    }
  },
  "object": {
    "control": {
      "type": "object"
    },
    "name": "object",
    "description": "",
    "type": {
      "required": false,
      "name": "object",
      "value": {}
    },
    "table": {
      "type": {
        "summary": "{ }"
      }
    }
  },
  "text": {
    "control": {
      "type": "text"
    },
    "name": "text",
    "description": "",
    "type": {
      "required": false,
      "name": "string"
    },
    "table": {
      "type": {
        "summary": "string"
      },
      "defaultValue": {
        "summary": "''"
      }
    }
  },
  "componentArg": {
    "control": {
      "type": "text"
    },
    "name": "componentArg",
    "type": {
      "name": "string"
    }
  },
  "storyArg": {
    "control": {
      "type": "number"
    },
    "name": "storyArg",
    "type": {
      "name": "number"
    }
  },
  "composedArg": {
    "control": {
      "type": "text"
    },
    "name": "composedArg",
    "type": {
      "name": "string"
    },
    "options": [
      "a",
      "b"
    ]
  }
}
    </pre>
  </div>
</div>
View in Storybook
Chrome 121
1200x900
Linux Linux Ubuntu 20.04.4
72dbdf on tom/23347-story-globals
Caught exception in play function

This story threw an error after it finished rendering which means interactions may not have been executed fully.

TestingLibraryElementError: Found multiple elements by: [data-testid="pre"]

Here are the matching elements:

Ignored nodes: comments, script, style
<pre
  data-testid="pre"
>
  {
  "style": {
    "control": {
      "type": "object"
    },
    "name": "style",
    "description": "",
    "type": {
      "required": false,
      "name": "object",
      "value": {}
    },
    "table": {
      "type": {
        "summary": "{ }"
      },
      "defaultValue": {
        "summary": "{ }"
      }
    }
  },
  "object": {
    "control": {
      "type": "object"
    },
    "name": "object",
    "description": "",
    "type": {
      "required": false,
      "name": "object",
      "value": {}
    },
    "table": {
      "type": {
        "summary": "{ }"
      }
    }
  },
  "text": {
    "control": {
      "type": "text"
    },
    "name": "text",
    "description": "",
    "type": {
      "required": false,
      "name": "string"
    },
    "table": {
      "type": {
        "summary": "string"
      },
      "defaultValue": {
        "summary": "''"
      }
    }
  },
  "componentArg": {
    "control": {
      "type": "text"
    },
    "name": "componentArg",
    "type": {
      "name": "string"
    }
  },
  "storyArg": {
    "control": {
      "type": "number"
    },
    "name": "storyArg",
    "type": {
      "name": "number"
    }
  },
  "composedArg": {
    "control": {
      "type": "text"
    },
    "name": "composedArg",
    "type": {
      "name": "string"
    },
    "options": [
      "a",
      "b"
    ]
  }
}
</pre>

Ignored nodes: comments, script, style
<pre
  data-testid="pre"
>
  {
  "style": {
    "control": {
      "type": "object"
    },
    "name": "style",
    "description": "",
    "type": {
      "required": false,
      "name": "object",
      "value": {}
    },
    "table": {
      "type": {
        "summary": "{ }"
      },
      "defaultValue": {
        "summary": "{ }"
      }
    }
  },
  "object": {
    "control": {
      "type": "object"
    },
    "name": "object",
    "description": "",
    "type": {
      "required": false,
      "name": "object",
      "value": {}
    },
    "table": {
      "type": {
        "summary": "{ }"
      }
    }
  },
  "text": {
    "control": {
      "type": "text"
    },
    "name": "text",
    "description": "",
    "type": {
      "required": false,
      "name": "string"
    },
    "table": {
      "type": {
        "summary": "string"
      },
      "defaultValue": {
        "summary": "''"
      }
    }
  },
  "componentArg": {
    "control": {
      "type": "text"
    },
    "name": "componentArg",
    "type": {
      "name": "string"
    }
  },
  "storyArg": {
    "control": {
      "type": "number"
    },
    "name": "storyArg",
    "type": {
      "name": "number"
    }
  },
  "composedArg": {
    "control": {
      "type": "text"
    },
    "name": "composedArg",
    "type": {
      "name": "string"
    },
    "options": [
      "a",
      "b"
    ]
  }
}
</pre>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Ignored nodes: comments, script, style
<div
  id="storybook-root"
>
  <div
    class="css-ec0dpa"
    data-side="left"
  >
    <pre
      data-testid="pre"
    >
      {
  "style": {
    "control": {
      "type": "object"
    },
    "name": "style",
    "description": "",
    "type": {
      "required": false,
      "name": "object",
      "value": {}
    },
    "table": {
      "type": {
        "summary": "{ }"
      },
      "defaultValue": {
        "summary": "{ }"
      }
    }
  },
  "object": {
    "control": {
      "type": "object"
    },
    "name": "object",
    "description": "",
    "type": {
      "required": false,
      "name": "object",
      "value": {}
    },
    "table": {
      "type": {
        "summary": "{ }"
      }
    }
  },
  "text": {
    "control": {
      "type": "text"
    },
    "name": "text",
    "description": "",
    "type": {
      "required": false,
      "name": "string"
    },
    "table": {
      "type": {
        "summary": "string"
      },
      "defaultValue": {
        "summary": "''"
      }
    }
  },
  "componentArg": {
    "control": {
      "type": "text"
    },
    "name": "componentArg",
    "type": {
      "name": "string"
    }
  },
  "storyArg": {
    "control": {
      "type": "number"
    },
    "name": "storyArg",
    "type": {
      "name": "number"
    }
  },
  "composedArg": {
    "control": {
      "type": "text"
    },
    "name": "composedArg",
    "type": {
      "name": "string"
    },
    "options": [
      "a",
      "b"
    ]
  }
}
    </pre>
  </div>
  <div
    class="css-b8mu1s"
    data-side="right"
  >
    <pre
      data-testid="pre"
    >
      {
  "style": {
    "control": {
      "type": "object"
    },
    "name": "style",
    "description": "",
    "type": {
      "required": false,
      "name": "object",
      "value": {}
    },
    "table": {
      "type": {
        "summary": "{ }"
      },
      "defaultValue": {
        "summary": "{ }"
      }
    }
  },
  "object": {
    "control": {
      "type": "object"
    },
    "name": "object",
    "description": "",
    "type": {
      "required": false,
      "name": "object",
      "value": {}
    },
    "table": {
      "type": {
        "summary": "{ }"
      }
    }
  },
  "text": {
    "control": {
      "type": "text"
    },
    "name": "text",
    "description": "",
    "type": {
      "required": false,
      "name": "string"
    },
    "table": {
      "type": {
        "summary": "string"
      },
      "defaultValue": {
        "summary": "''"
      }
    }
  },
  "componentArg": {
    "control": {
      "type": "text"
    },
    "name": "componentArg",
    "type": {
      "name": "string"
    }
  },
  "storyArg": {
    "control": {
      "type": "number"
    },
    "name": "storyArg",
    "type": {
      "name": "number"
    }
  },
  "composedArg": {
    "control": {
      "type": "text"
    },
    "name": "composedArg",
    "type": {
      "name": "string"
    },
    "options": [
      "a",
      "b"
    ]
  }
}
    </pre>
  </div>
</div>
    at Object.getElementError (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-a2f9a4a0.js:129:284)
    at Vn (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-a2f9a4a0.js:143:3483)
    at zn (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-a2f9a4a0.js:143:3528)
    at https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-a2f9a4a0.js:145:10
    at https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-a2f9a4a0.js:151:387
    at sn.invoke (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-469d1c44.js:28:9372)
    at sn.track (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-469d1c44.js:28:6505)
    at Object.getByTestId (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-469d1c44.js:28:5777)
    at play (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/argTypes.stories-a04ff6e5.js:1:426)
    at https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/sb-preview/runtime.js:8267:60