WebdriverIO и Angular, пишущие тесты e2e в typescript, которые импортируют классы (не могут использовать оператор импорта вне модуля)

#angular #typescript #wdio-jasmine #wdio-v6

#angular #typescript #wdio-jasmine #wdio-v6

Вопрос:

Я пытаюсь заставить работать набор тестов e2e wdio. Некоторые тесты используют некоторые служебные классы, написанные на typescript.

Когда тест компилируется, он падает из-за этой ошибки:

 Spec file(s): D:TEMPxxangular-wdio6-builder-demoe2etestspecsbasic.spec.ts                                                                               
 Error:  D:TEMPxxangular-wdio6-builder-demoe2etestspecsbasic.spec.ts:1                                                                                  
import {Util} from '../util/util.spec';                                                                                                                        
^^^^^^                                                                                                                                                         
                                                                                                                                                               
SyntaxError: Cannot use import statement outside a module                                                                                                      
    at wrapSafe (internal/modules/cjs/loader.js:1054:16)                                                                                                       
    at Module._compile (internal/modules/cjs/loader.js:1102:27)                                                                                                
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)                                                                                  
    at Module.load (internal/modules/cjs/loader.js:986:32)                                                                                                     
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)                                                                                           
    at Module.require (internal/modules/cjs/loader.js:1026:19)                                                                                                 
    at require (internal/modules/cjs/helpers.js:72:18)                                                                                                         
    at D:TEMPxxangular-wdio6-builder-demonode_modules@wdiojasmine-frameworknode_modulesjasminelibjasmine.js:89:5                                     
    at Array.forEach (<anonymous>)                                                                                                                             
    at Jasmine.loadSpecs (D:TEMPxxangular-wdio6-builder-demonode_modules@wdiojasmine-frameworknode_modulesjasminelibjasmine.js:88:18)                
[0-0] RUNNING in chrome - D:TEMPxxangular-wdio6-builder-demoe2etestspecsbasic.spec.ts      
 

Приведенный выше вывод получен из клона одного из шаблонных проектов WebdriverIO.
Единственное изменение, которое я внес (кроме обновления chromedriver), заключалось в том, чтобы изменить тест в этом примере на typescript и использовать служебный класс.

Я перепробовал все варианты, которые смог найти, но ни один из них не устранил проблему, просто запустив этот один простой тест. В частности, казалось, что не было никакой возможности подобрать какую-либо конфигурацию babel.

Источник находится по адресу https://github.com/rgansevles/angular-wdio6-builder-demo (клонировать из https://github.com/migalons/angular-wdio6-builder-demo )

Чтобы воспроизвести, клонируйте мой репозиторий и запустите:

 npm install
npm run e2e
 

Есть ли у кого-нибудь идея, как заставить этот образец работать с оператором импорта?

Заранее спасибо,

Роб

Кстати, это тестовый файл, который не удается выполнить на e2e/test/specs/basic.spec.ts :

 import {Util} from '../util/util.spec';

const util = new Util();

describe('webdriver.io page', () => {
  it('should have the right title', () => {
    browser.url('');
    const title = browser.getTitle();
    expect(title).toEqual(util.browserTitle);
  });

  it('should say app is running', () => {
    browser.url('');
    const message = $('body > app-root > div.content > div.card.highlight-card.card-small > span').getText();
    expect(message).toEqual('angular-wdio6-builder-demo app is running!');
  });
});
 

Комментарии:

1. Вы нашли решение для этого? Мне также нравится писать тесты на основе typescript.

Ответ №1:

Я понял. Необходимо сделать несколько вещей:

  • Создайте tsconfig.json в e2e-folder. Этот файл должен расширять базовый tsconfig.json и должен перезаписывать:
    • "module": "commonjs"
    • "types": ["node", "@wdio/sync", "@wdio/jasmine-framework"]
  • Измените wdio.conf.js , чтобы скомпилировать typescript
    • Использовать ts вместо js шаблона in spec
    • Добавить requires: ['ts-node/register'] в jasmineNodeOpts
  • Внутри package.json вы должны добавить среду в сценарий e2e
    • "e2e": "TS_NODE_PROJECT=e2e/tsconfig.json ng e2e"

Я разветвил тот же репозиторий и внес изменения здесь: https://github.com/Michel73/angular-wdio6-builder-demo

Осталось одно: в моем VSCode basic.spec.ts отображаются ошибки компиляции, потому что кажется, что VSCode всегда принимает basic tsconfig.js . Поэтому я установил TypeScript Auto Compiler расширение -для VSCode.

Комментарии:

1. Майкл, спасибо, что помог нам. Это устранило проблему для нас!

2. Приятно это слышать.

Ответ №2:

Не могли бы вы попробовать добавить настройку babel в свою тестовую среду, например, в файле wdio js:

Мокко:

 mochaOpts: {
         ui: 'bdd',
        require: ['@babel/register', './test/helpers/common.js'],
        // ...
    },
 

Jasmine:

 jasmineNodeOpts: {
        // Jasmine default timeout
        helpers: [require.resolve('@babel/register')],
        // ...
    },