TestingLibraryElementError: Unable to find an element with the text: /•••• 1234/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body class="light" > <div> <div class="flex flex-col gap-3 border-t p-4" > <div class="flex justify-between" > <h4 class="font-semibold" > Payment method </h4> <a class=" font-sans cursor-pointer hover:underline focus:ring-2 text-ds-blue-darker font-semibold dark:text-ds-blue-default inline-flex items-center gap-1" data-cy="edit-payment-method" data-marketing="edit-payment-method" data-testid="edit-payment-method" > Edit <svg class="w-4 h-4" data-icon="" data-testid="" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" > <path clip-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" fill-rule="evenodd" /> </svg> </a> </div> <div class="flex flex-col gap-4 text-ds-gray-quinary" > <p class="mt-4" > No payment method set. Please contact support if you think it's an error or set it yourself. </p> <div class="flex self-start" > <button class=" flex items-center gap-1 rounded py-1 px-4 transition-colors duration-150 motion-reduce:transition-none focus:outline-none focus:ring disabled:cursor-not-allowed disabled:text-ds-gray-quaternary disabled:border-ds-gray-tertiary disabled:bg-ds-gray-primary justify-center font-semibold text-white bg-ds-blue-darker dark:bg-ds-blue-nonary border-ds-blue-quinary border-solid border shadow hover:bg-ds-blue-quinary " data-cy="open-modal" data-marketing="open-modal" data-testid="open-modal" > Set card </button> </div> </div> </div> </div> </body> ❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19 ❯ src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx:200:21

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx > PaymentCard > when the user have a card > renders the next billing: src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx#L214

TestingLibraryElementError: Unable to find an element with the text: /December 1, 2020/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body class="light" > <div> <div class="flex flex-col gap-3 border-t p-4" > <div class="flex justify-between" > <h4 class="font-semibold" > Payment method </h4> <a class=" font-sans cursor-pointer hover:underline focus:ring-2 text-ds-blue-darker font-semibold dark:text-ds-blue-default inline-flex items-center gap-1" data-cy="edit-payment-method" data-marketing="edit-payment-method" data-testid="edit-payment-method" > Edit <svg class="w-4 h-4" data-icon="" data-testid="" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" > <path clip-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" fill-rule="evenodd" /> </svg> </a> </div> <div class="flex flex-col gap-4 text-ds-gray-quinary" > <p class="mt-4" > No payment method set. Please contact support if you think it's an error or set it yourself. </p> <div class="flex self-start" > <button class=" flex items-center gap-1 rounded py-1 px-4 transition-colors duration-150 motion-reduce:transition-none focus:outline-none focus:ring disabled:cursor-not-allowed disabled:text-ds-gray-quaternary disabled:border-ds-gray-tertiary disabled:bg-ds-gray-primary justify-center font-semibold text-white bg-ds-blue-darker dark:bg-ds-blue-nonary border-ds-blue-quinary border-solid border shadow hover:bg-ds-blue-quinary " data-cy="open-modal" data-marketing="open-modal" data-testid="open-modal" > Set card </button> </div> </div> </div> </div> </body> ❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19 ❯ src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx:214:21

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx > PaymentCard > when the user has a US bank account > renders the bank account details: src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx#L229

TestingLibraryElementError: Unable to find an element with the text: /STRIPE TEST BANK/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body class="light" > <div> <div class="flex flex-col gap-3 border-t p-4" > <div class="flex justify-between" > <h4 class="font-semibold" > Payment method </h4> <a class=" font-sans cursor-pointer hover:underline focus:ring-2 text-ds-blue-darker font-semibold dark:text-ds-blue-default inline-flex items-center gap-1" data-cy="edit-payment-method" data-marketing="edit-payment-method" data-testid="edit-payment-method" > Edit <svg class="w-4 h-4" data-icon="" data-testid="" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" > <path clip-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" fill-rule="evenodd" /> </svg> </a> </div> <div class="flex flex-col gap-4 text-ds-gray-quinary" > <p class="mt-4" > No payment method set. Please contact support if you think it's an error or set it yourself. </p> <div class="flex self-start" > <button class=" flex items-center gap-1 rounded py-1 px-4 transition-colors duration-150 motion-reduce:transition-none focus:outline-none focus:ring disabled:cursor-not-allowed disabled:text-ds-gray-quaternary disabled:border-ds-gray-tertiary disabled:bg-ds-gray-primary justify-center font-semibold text-white bg-ds-blue-darker dark:bg-ds-blue-nonary border-ds-blue-quinary border-solid border shadow hover:bg-ds-blue-quinary " data-cy="open-modal" data-marketing="open-modal" data-testid="open-modal" > Set card </button> </div> </div> </div> </div> </body> ❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19 ❯ src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx:229:21

Test Runner #2 - Vitest

Process completed with exit code 1.

Test Runner #5 - Vitest