我们在应用程序组件文件夹中使用别名导入,在我的组件测试中,我也需要像这样使用导入
import {InputField} from "@company/components/Input"
但是每当我尝试运行cypress时,它都会给我这个错误
我的文件夹结构是这样的
/project
/cypress
/plugins
/index.js
/components
/input.component.tsx
/input.cy.tsx
tsconfig.json
/src
/components
/input.tsx
/button.tsx
/form.tsx
...
...
tsconfig.json
tsconfig.paths.json
tsj.paths.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@company/*": ["./src/*"]
}
}
}
项目根文件夹中的tslog.json具有以下配置
{
"extends": "./tsconfig.paths.json",
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src", "cypress"],
"exclude": []
}
项目/cypress/tsplus. json
{
"extends": "../tsconfig.json"
}
cypress.config.js
/* eslint-disable @typescript-eslint/no-var-requires */
import { defineConfig } from "cypress";
export default defineConfig({
video: false,
e2e: {
// We've imported your old cypress plugins here.
// You may want to clean this up later by importing these.
setupNodeEvents(on, config) {
return require("./cypress/plugins/index.js")(on, config);
},
baseUrl: "http://localhost:3000",
experimentalSessionAndOrigin: true,
watchForFileChanges: false,
},
viewportWidth: 1920,
viewportHeight: 1080,
component: {
devServer: {
framework: "create-react-app",
bundler: "webpack",
},
setupNodeEvents(on, config) {
return require("./cypress/plugins/index.js")(on, config);
},
},
});
cypress/plugins/index.js
const cypressTypeScriptPreprocessor = require('./cy-ts-preprocessor')
module.exports = on => {
on('file:preprocessor', cypressTypeScriptPreprocessor)
}
和cypress/plugins/cy-ts-preprocessor.js
const wp = require("@cypress/webpack-preprocessor");
const path = require("path");
const webpackOptions = {
resolve: {
extensions: [".ts", ".js", ".tsx"],
alias: {
"@company": path.resolve(__dirname, "../../src"),
},
},
module: {
rules: [
{
test: /\.ts$/,
exclude: [/node_modules/],
use: [
{
loader: "ts-loader",
},
],
},
],
},
};
const options = {
webpackOptions,
};
module.exports = wp(options);
1条答案
按热度按时间5jdjgkvh1#
这个tsconfig在我自己的情况下工作。