JSON:JSON Interactions

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

TestingLibraryElementError: Found multiple elements with the text: Object(2)

Here are the matching elements:

Ignored nodes: comments, script, style
<button
  class="preview svelte-1ftvep4"
>
  Object(2)
</button>

Ignored nodes: comments, script, style
<button
  class="preview svelte-1ftvep4"
>
  Object(2)
</button>

(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="block  svelte-12cmxck"
    data-testid="json"
    id=""
    style="border-style: solid; overflow: visible; min-width: min(0px, 100%); border-width: var(--block-border-width);"
  >
     
    <div
      class="wrap default full svelte-au1olv hide"
      style="position: absolute; padding: 0px;"
    />
     
    <button
      aria-label="Copy"
      aria-roledescription="Copy value"
      class="copy-text svelte-6fc7le"
      title="copy"
    >
      <svg
        color="currentColor"
        viewBox="0 0 33 33"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"
          fill="currentColor"
        />
        <path
          d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"
          fill="currentColor"
        />
      </svg>
    </button>
     
    <div
      class="json-holder svelte-6fc7le"
    >
      <div
        class="json-node svelte-1ftvep4 root"
        style="--depth: 0;"
      >
        <div
          class="line svelte-1ftvep4"
        >
          <span
            aria-roledescription="Line number 1"
            class="line-number svelte-1ftvep4"
            data-pseudo-content="1"
          />
           
          <span
            class="content svelte-1ftvep4"
          >
            <button
              aria-label="Collapse"
              class="toggle svelte-1ftvep4"
              data-pseudo-content="▼"
            />
             
             
            <span
              class="punctuation bracket svelte-1ftvep4"
            >
              {
            </span>
             
            
             
          </span>
        </div>
         
        <div
          class="children svelte-1ftvep4"
        >
          <div
            class="json-node svelte-1ftvep4"
            style="--depth: 1;"
          >
            <div
              class="line svelte-1ftvep4 collapsed"
            >
              <span
                aria-roledescription="Line number 2"
                class="line-number svelte-1ftvep4"
                data-pseudo-content="2"
              />
               
              <span
                class="content svelte-1ftvep4"
              >
                <button
                  aria-label="Expand"
                  class="toggle svelte-1ftvep4"
                  data-pseudo-content="▶"
                />
                 
                <span
                  class="key svelte-1ftvep4"
                >
                  "
                  items
                  "
                </span>
                <span
                  class="punctuation colon svelte-1ftvep4"
                >
                  :
                </span>
                 
                <span
                  class="punctuation bracket svelte-1ftvep4"
                >
                  {
                </span>
                 
                <button
                  class="preview svelte-1ftvep4"
                >
                  Object(1)
                </button>
                 
                <span
                  class="punctuation bracket svelte-1ftvep4"
                >
                  }
                </span>
                
                 
              </span>
            </div>
             
            <div
              class="children svelte-1ftvep4 hidden"
            >
              <div
                class="json-node svelte-1ftvep4"
                style="--depth: 2;"
              >
                <div
                  class="line svelte-1ftvep4"
                >
                  <span
                    aria-roledescription="Line number 3"
                    class="line-number svelte-1ftvep4"
                    data-pseudo-content="3"
                  />
                   
                  <span
                    class="content svelte-1ftvep4"
                  >
                    <button
                      aria-label="Collapse"
                      class="toggle svelte-1ftvep4"
                      data-pseudo-content="▼"
                    />
                     
                    <span
                      class="key svelte-1ftvep4"
                    >
                      "
                      item
                      "
                    </span>
                    <span
                      class="punctuation colon svelte-1ftvep4"
                    >
                      :
                    </span>
                     
                    <span
                      class="punctuation bracket svelte-1ftvep4 square-bracket"
                    >
                      [
                    </span>
                     
                    
                     
                  </span>
                </div>
                 
                <div
                  class="children svelte-1ftvep4"
                >
                  <div
                    class="json-node svelte-1ftvep4"
                    style="--depth: 3;"
                  >
                    <div
                      class="line svelte-1ftvep4 collapsed"
                    >
                      <span
                        aria-roledescription="Line number 4"
                        class="line-number svelte-1ftvep4"
                        data-pseudo-content="4"
                      />
                       
                      <span
                        class="content svelte-1ftvep4"
                      >
                        <button
                          aria-label="Expand"
                          class="toggle svelte-1ftvep4"
                          data-pseudo-content="▶"
                        />
                         
                        <span
                          class="key svelte-1ftvep4"
                        >
                          "
                          0
                          "
                        </span>
                        <span
                          class="punctuation colon svelte-1ftvep4"
                        >
                          :
                        </span>
                         
                        <span
                          class="punctuation bracket svelte-1ftvep4"
                        >
                          {
                        </span>
                         
                        <button
                          class="preview svelte-1ftvep4"
                        >
                          Object(6)
                        </button>
                         
                        <span
                          class="punctuation bracket svelte-1ftvep4"
                        >
                          }
                        </span>
                        
                         
                      </span>
                    </div>
                     
                    <div
...
    at Object.getElementError (https://649585a46a67480e3074dc75-zrnrvknesp.capture-loopback.chromatic.com/assets/index-C5Sj9x3H.js:117:284)
    at Un (https://649585a46a67480e3074dc75-zrnrvknesp.capture-loopback.chromatic.com/assets/index-C5Sj9x3H.js:131:3483)
    at Hn (https://649585a46a67480e3074dc75-zrnrvknesp.capture-loopback.chromatic.com/assets/index-C5Sj9x3H.js:131:3528)
    at https://649585a46a67480e3074dc75-zrnrvknesp.capture-loopback.chromatic.com/assets/index-C5Sj9x3H.js:133:10
    at https://649585a46a67480e3074dc75-zrnrvknesp.capture-loopback.chromatic.com/assets/index-C5Sj9x3H.js:139:387
    at ln.invoke (https://649585a46a67480e3074dc75-zrnrvknesp.capture-loopback.chromatic.com/assets/index-Bqoxw6Vv.js:27:9266)
    at ln.track (https://649585a46a67480e3074dc75-zrnrvknesp.capture-loopback.chromatic.com/assets/index-Bqoxw6Vv.js:27:6505)
    at Object.getByText (https://649585a46a67480e3074dc75-zrnrvknesp.capture-loopback.chromatic.com/assets/index-Bqoxw6Vv.js:27:5777)
    at https://649585a46a67480e3074dc75-zrnrvknesp.capture-loopback.chromatic.com/assets/JSON.stories-DaDgw6G9.js:1:2167
    at async https://649585a46a67480e3074dc75-zrnrvknesp.capture-loopback.chromatic.com/sb-preview/runtime.js:144:3897