Question

我想将一些常量从项目导入到测试中（例如，测试localstorage操作）。在我的IDE中使用import（或require）时，不会显示错误：

运行Cypress时，我得到：Error: Cannot find module

尽管未使用任何特定功能，该模块仍位于TypeScript（ Config.ts ）中。

我没有修改任何Command或Support脚本。但是我在Cypress文件夹中有一个 tsconfig.json ，以便我的Create React App可以在不与Jest冲突的情况下运行。

{
  "extends": "../tsconfig",
  "include": ["../node_modules/cypress/types", "**/*.ts"]
}

我试图在include中添加 ../ src 或 ../ src / ** / *。ts ，但似乎没有任何效果。

我在做什么错？谢谢！

Answer 1

截止2020年4月和cypress v4.4.0，由于赛普拉斯现在支持打字稿ootb，因此不再需要此设置。

基本上现在，您只需要向项目npm install typescript --save-dev中添加打字稿（如果尚不存在）并将tsconfig.json添加到您的赛普拉斯文件夹中，其内容与此类似：

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

从看 https://docs.cypress.io/guides/tooling/typescript-support.html#Set-up-your-dev-environment以获得更多信息。

Answer 2

添加cypress-webpack-preprocessor和ts-loader（如果尚不存在）

yarn add --dev @cypress/webpack-preprocessor ts-loader

在 cypress / plugins / index.js 中，只需将其添加到您的配置中即可：

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

module.exports = (on) => {
  const options = {
    webpackOptions: {
      resolve: {
        extensions: [".ts", ".tsx", ".js"]
      },
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            loader: "ts-loader",
            options: { transpileOnly: true }
          }
        ]
      }
    },
  }
  on('file:preprocessor', wp(options))
}

Cypress现在应该加载您的TS文件。

有关完整TS配置的更多信息：https://basarat.gitbooks.io/typescript/docs/testing/cypress.html

在赛普拉斯中导入项目模块

2 个答案: