Quasar 2/Vue 3: невозможно использовать ключевое слово await вне асинхронной функции — ожидание верхнего уровня

У меня есть новое приложение Quasar 2/Vue 3, открытое в VSCode, созданное с использованием Quasar CLI и принимающее все настройки по умолчанию, включая использование eslint.

Я НЕ запускал приложение (quasar dev).

Vitest устанавливается через quasar ext add @quasar/testing-unit-vitest. Примеры тестов работают.

т.е. npm run test:unit - все тесты пройдены.

Теперь в моем сценарии Vitest я хотел загрузить собственный класс, который выполняет некоторые настройки, и столкнулся с ошибкой eslint: Parsing error: Cannot use keyword 'await' outside an async function, что странно, потому что я использую узел 18.18.0, и «ожидание верхнего уровня» допустимо. Более того, тест выполняется правильно после запуска асинхронного метода «верхнего уровня». См. код ниже, используя простой метод для проверки ошибки проверки.

Однако: я не могу запустить приложение Quasar, потому что оно зависает из-за ошибки eslint. Я пробовал разные способы отключить линтинг. Одна вещь, которая подавляет эту ошибку, — это .eslintrc.cjs, чтобы закомментировать запись 'plugin:vue/vue3-essential',. Как только я это делаю, ошибка исчезает (но появляются другие!), значит, там что-то есть?

Любые предложения о том, как я могу подавить эту ошибку, чтобы запустить Quasar?

Спасибо, Мюррей

import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-vitest';
import { mount } from '@vue/test-utils';
import { describe, expect, it } from 'vitest';
import ExampleComponent from './demo/ExampleComponent.vue';

// === Added this custom section
import TestAwait from './testawait.js';
const testawait = new TestAwait();

// These don't suppress the error
/* eslint-disable */
// eslint-disable-next-line
await testawait.mytestAsync(); // <==== eslint error here
// === End custom section

installQuasarPlugin();

describe('example Component', () => {
  it('should mount component with todos', async () => {
    const wrapper = mount(ExampleComponent, {
      props: {
        title: 'Hello',
        totalCount: 4,
        todos: [
          { id: 1, content: 'Hallo' },
          { id: 2, content: 'Hoi' },
        ],
      },
    });
    expect(wrapper.vm.clickCount).toBe(0);
    await wrapper.find('.q-item').trigger('click');
    expect(wrapper.vm.clickCount).toBe(1);
  });
});

Класс:

class TestClass {
  constructor() {
    console.info('TestClass class instantiated');
  }

  async mytestAsync () {
    await new Promise(resolve => setTimeout(resolve, 2000));
    console.info('mytestAsync() ran!');
  }
}

export default TestClass;

Результат:

Можете ли вы опубликовать конфигурацию eslint?

huan feng 09.07.2024 12:00
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
1
64
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Хорошо, после сна ответ стал очевиден!

В файле .eslintrc.cjs исключите папку тестов, используя ignorePatterns, чтобы тестовые файлы не анализировались:

module.exports = {
  // ...
 
  ignorePatterns: [
    '**/__tests__/'
  ],

  // ...
}

Зафиксированный! И Квазар теперь запускается. :-)

Ответ @Мурры скорее обходит, чем решает проблему.

Но это сработало для меня: Мне пришлось переключиться на "es2022" в качестве цели сборки в quasar.config.ts.

build: {
    target: {
        browser: ["es2022"],
        node: "node18",
    },
}

Но мне не удалось заставить работать следующее:

export default defineConfig({
  esbuild: {
    supported: {
      'top-level-await': true //browsers can handle top-level-await features
    },
  }
})

Нет, я этого не пробовал. Можете ли вы рассказать, как/где реализуется этот фрагмент кода, пожалуйста?

Murrah 17.07.2024 01:21

Другие вопросы по теме