Как использовать импорт с абсолютными путями в тестах Cypress, созданных с помощью ParcelJS? - PullRequest
Новая
       57

Как использовать импорт с абсолютными путями в тестах Cypress, созданных с помощью ParcelJS?

1 голос
/ 28 октября 2019

Я использую импорт с абсолютными путями в моем проекте Parcel, но эти абсолютные пути не в равной степени разрешаются в тестах Cypress.

Разница в разрешении модуля

Посылка : import {foo} from '/foo.js': относительно корня проекта

Cypress : import {foo} from '/foo.js': абсолютное значение в корне диска

Когда точка входа Parcel находится в src импортировании папки /foo.js в любом месте проекта ищет файл по пути <project>/src/foo.js. (Документы: https://parceljs.org/module_resolution.html#absolute-paths)

Но у Cypress нет какой-либо точки входа , и если он пытается импортировать файл по абсолютному пути, он считает / корнем файловой системы. Это может произойти, если импортированный файл ( foo.js ) импортирует другой файл ( bar.js ).

Пример

cypress-test.js 

import {foo} from '../../src/foo.js' // I don't care using relative paths in tests.
// tests here...

foo.js 

import {bar} from '/bar.js' // Absolute path not found by Cypress
//...

Как сделать Cypress для разрешения абсолютных путей относительно некоторыхточка входа как у Parcel?

1 Ответ

2 голосов
/ 29 октября 2019

Вы можете самостоятельно скомпилировать свои спецификации файлов, изменив разрешение пути.

Для этого вы можете использовать официальный препроцессор Cypress browserify и добавив параметр paths browserify, а также pathmodify плагин browserify, который позаботится об удалении ведущих / в путях, чтобы разрешение пути работало правильно.

Сначала установите пакеты:

npm install -D @cypress/browserify-preprocessor pathmodify

Тогда в вашем cypress/plugins/index.js: 

const preprocessor = require('@cypress/browserify-preprocessor');
const pathmodify = require('pathmodify');

const browserifyOptions = preprocessor.defaultOptions.browserifyOptions;

// -----------------------------------------------------------------------------
// (1) resolve paths relative to project root
// -----------------------------------------------------------------------------

browserifyOptions.paths = [
  // the process.cwd() depends on the cypress process being started from
  //  the project root. You can also use an absolute path here.
  require('path').resolve( process.cwd() )
];

// -----------------------------------------------------------------------------
// (2) regard paths starting with `/` as project-relative paths
// -----------------------------------------------------------------------------

browserifyOptions.plugin = browserifyOptions.plugin || [];
browserifyOptions.plugin.unshift([
  pathmodify, { mods: [
    // strip leading `/` when resolving paths
    pathmodify.mod.re(/^\//, '')
  ]}
]);

// -----------------------------------------------------------------------------
// (3) compile spec files when they're run
// -----------------------------------------------------------------------------

const compileFile = preprocessor( preprocessor.defaultOptions );

module.exports = ( on ) => {
  on('file:preprocessor', file => {
    return compileFile( file );
  });
}

Узнайте больше на https://docs.cypress.io/api/plugins/preprocessors-api.html

...