web-dev-qa-db-fra.com

Cypress ParseError: 'import' et 'export' peuvent apparaître uniquement avec 'sourceType: module'

J'ai mis à jour Cypress depuis 3.0.3 à 3.1.3. J'utilise des modules d'import/export ES6 qui doivent fonctionner en relation avec les documents. Mais je reçois une ligne avec undefined dans le terminal et l'erreur suivante dans l'interface graphique:

<root_dir>/node_modules/@babel/runtime/helpers/esm/defineProperty.js:1
export default function _defineProperty(obj, key, value) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Mes tests sont en Vanilla JS, pas de TS os CoffeeScript. Je suis coincé, dans 3.0.3 ça a bien fonctionné.

javascriptbabeljsbrowserifye2e-testingcypress
6
munkacsimark

Au cas où des gens viendraient ici pour le message ...

ParseError: 'import' et 'export' peuvent apparaître uniquement avec 'sourceType: module'

... dans un projet Cypress TypeScript. Voici la réponse:

Cypress prend en charge TypeScript prêt à l'emploi, tant que vous disposez d'un tsconfig.json fichier. Cependant, les importations ne fonctionnent que si vous prétraitez vos fichiers TypeScript.

Voici les étapes:

  1. Installez le webpack: yarn add -D webpack
  2. Installez ts-loader: yarn add -D ts-loader
  3. Installez @ cypress/webpack-preprocessor: yarn add -D @cypress/webpack-preprocessor

Maintenant, assurez-vous d'avoir ces 3 fichiers, tsconfig.json, webpack.config.js et plugins/index.js sur votre dossier Cypress.

enter image description here

plugins/index.js:

const wp = require("@cypress/webpack-preprocessor");

module.exports = on => {
    const options = {
        webpackOptions: require("../webpack.config.js")
    };
    on("file:preprocessor", wp(options));
};

tsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"]
  },
  "include": [
    "**/*.ts"
  ]
}

webpack.config.js:

module.exports = {
    mode: 'development',
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                exclude: [/node_modules/],
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            // skip typechecking for speed
                            transpileOnly: true
                        }
                    }
                ]
            }
        ]
    }
}

Ça devrait juste marcher maintenant.

1
André Pena

Il existe un échantillon officiel sur github disponible à cette adresse https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/preprocessors__TypeScript-webpack

Remarque: si vous êtes sur les fenêtres et que vous voulez exécuter localement le projet , mettez d'abord à jour le chemin dans le package.json.

// D:\path\cypress-example-recipes\examples\preprocessors__TypeScript-webpack\package.json

{
  "name": "cypress-example-TypeScript-webpack",
  "version": "1.0.0",
  "description": "Example showing TypeScript tests with Cypress",
  "scripts": {
    // ...
    "cypress:open": "..\\..\\node_modules\\.bin\\cypress open"
  }
}
0
rdhainaut