web-dev-qa-db-ja.com

サイプレスParseError： 'import'および 'export'は 'sourceType：module'でのみ表示される場合があります

サイプレスを3.0.3から3.1.3に更新しました。私はES6インポート/エクスポートモジュールを使用していますが、これはドキュメントに関連して機能している必要があります。しかし、私はターミナルでundefinedを含む行を取得し、GUIで次のエラーを表示します。

<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'

私のテストはバニラJSで行われ、TSやCoffeeScriptではありません。スタックしました、3.0.3では問題なく動作しました。

javascriptbabeljsbrowserifye2e-testingcypress
6
munkacsimark

メッセージのためにここに来ている人のために...

ParseError： 'import'および 'export'は 'sourceType：module'でのみ表示される場合があります

...サイプレスTypeScriptプロジェクト。ここに答えがあります：

tsconfig.jsonファイルがある限り、サイプレスはそのままでTypeScriptをサポートします。ただし、importsは、TypeScriptファイルを前処理しない限り機能しません。

手順は次のとおりです。

  1. Webpackをインストールします：yarn add -D webpack
  2. Ts-loaderをインストールします：yarn add -D ts-loader
  3. @ cypress/webpack-preprocessorをインストールします：yarn add -D @cypress/webpack-preprocessor

さて、これら3つのファイル、tsconfig.json、webpack.config.js、plugins/index.jsが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
                        }
                    }
                ]
            }
        ]
    }
}

今すぐ機能するはずです。

1
André Pena

Githubの公式サンプルがあります https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/preprocessors__TypeScript-webpack

注：windowsを使用していてプロジェクトをローカルで実行する場合 、最初に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