cypress/support/commands

1) An uncaught error was detected outside of a test

  0 passing (219ms)
  1 failing

  1) An uncaught error was detected outside of a test:
     TypeError: The following error originated from your test code, not from Cypress.

  > Failed to resolve module specifier 'src/components/__tests__/QuasarButton.spec.ts'

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.
      at importsToLoad (http://localhost:9000/__cypress/src/cypress:client-init-test:9:71)
      at http://localhost:9000/__cypress/runner/cypress_runner.js:179584:86
      at tryCatcher (http://localhost:9000/__cypress/runner/cypress_runner.js:13012:23)
      at Object.gotValue (http://localhost:9000/__cypress/runner/cypress_runner.js:12154:18)
      at Object.gotAccum (http://localhost:9000/__cypress/runner/cypress_runner.js:12143:25)
      at Object.tryCatcher (http://localhost:9000/__cypress/runner/cypress_runner.js:13012:23)
      at Promise._settlePromiseFromHandler (http://localhost:9000/__cypress/runner/cypress_runner.js:10947:31)
      at Promise._settlePromise (http://localhost:9000/__cypress/runner/cypress_runner.js:11004:18)
      at Promise._settlePromise0 (http://localhost:9000/__cypress/runner/cypress_runner.js:11049:10)
      at Promise._settlePromises (http://localhost:9000/__cypress/runner/cypress_runner.js:11129:18)

html
<template>
  <q-btn
    data-cy="button"
    label="test emit"
    color="positive"
    rounded
    icon="edit"
    @click="$emit('test')"
  />
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'QuasarButton',
  emits: ['test'],
});
</script>

ts
// __test__/QuasarButton.spec.ts

import { mount } from '@cypress/vue';
import QuasarButton from '../QuasarButton.vue';

describe('QuasarButton', () => {
  it('renders a message', () => {
    const label = 'Hello there';
    mount(QuasarButton, {
      props: {
        label,
      },
    });

    cy.dataCy('button').should('contain', label);
  });
})

ts
// command.ts

Cypress.Commands.add(
  'dataCy',
  { prevSubject: 'optional' },
  (subject, value, options) => {
    return cy.get(
      `[data-cy=${value}]`,
      Object.assign({ withinSubject: subject }, options)
    );
  }
);

sh
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

ts
describe('QuasarButton', () => {
  it('renders a message', () => {
    const label = 'Hello there';
  });
});

commands.ts

commands.ts

src/components/__tests__/QuasarButton.spec.ts

src

cypress-realworld-app

Bearer ${access_token}