目標是主要使用 Cypress 進行組件測驗和 e2e 測驗。正確安裝和配置所有 Cypress，在“cypress open”腳本中配置 Cypress 以打開 E2E 相關測驗并配置“cypress open-ct”腳本進行組件測驗，所有設定都運行良好。
問題
專案已經準備好并且我有絕對檔案夾配置，當我從“~/components”匯入組件時，我正在訪問“src/components”，我無法進行正確的設定以訪問絕對檔案夾，因為當我運行 cypress 打開腳本 -ct 似乎沒有運行“檔案：前處理器”時，您需要在其中運行它來運行具有絕對檔案夾設定的 webpack。我嘗試了幾種替代方法，這是效果最好的一種，因為當我運行 'cypress open' 腳本 cypress 執行 'file:preprocessor' 時，它會應用 webpack 設定，如果我嘗試使用 '~/component/InputDate 匯入組件' 它有效，但是 'cypress open' 用于 E2E 測驗，我無法通過此腳本運行單元測驗。
關于 cypress 開放腳本沒有正確運行組件測驗，我可能是錯的，但我正在尋找解決這些絕對檔案夾這個大問題的方法。
嘗試
我嘗試了 tsconfig.json 檔案配置解決方案，但我無法使其作業，因為我在 jsconfig.json 專案中使用它，我嘗試使用 tsconfig.json 我使用了 'tsconfig-paths' 包并沒有得到任何結果。
賽普拉斯/插件/index.js
const webpack = require('@cypress/webpack-preprocessor')
const injectDevServer = require('@cypress/react/plugins/react-scripts')
module.exports = (on, config) => {
const options = {
webpackOptions: require('../../webpack.config.js'),
watchOptions: {},
}
on('file:preprocessor', webpack(options))
injectDevServer(on, config)
return config
}
柏樹.json
{
"component": {
"componentFolder": "src/tests/components"
},
"integrationFolder": "src/tests/integration"
}
webpackconfig.js
var path = require('path')
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.js$|jsx/,
exclude: [/node_modules/],
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
],
},
],
},
resolve: {
alias: {
'~': path.resolve(__dirname, 'src'),
},
},
}
packagejage.json
"devDependencies": {
"@cypress/react": "5.12.4",
"@cypress/webpack-dev-server": "1.8.3",
"@cypress/webpack-preprocessor": "^5.11.1",
"@types/jwt-decode": "^3.1.0",
"babel-loader": "^8.2.3",
"cypress": "9.5.2",
"webpack-dev-server": "3.2.1"
}
uj5u.com熱心網友回復：
我設法做了以下解決方案：
插件/index.js
const { startDevServer } = require('@cypress/webpack-dev-server')
const webpackConfig = require('../../webpack.config.js')
module.exports = (on, config) => {
on('dev-server:start', async (options) =>
startDevServer({ options, webpackConfig }),
)
return config
}
柏樹.json
{
"component": {
"componentFolder": "src/tests/unity"
},
"integrationFolder": "src/tests/integration"
}
webpack.config.js
var path = require('path')
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.js$|jsx/,
exclude: [/node_modules/],
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
],
},
],
},
resolve: {
alias: {
'~': path.resolve(__dirname, 'src'),
},
},
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/445953.html
標籤：javascript 反应 网页包 柏 柏树组件测试运行器
下一篇：在帶有@expo/vector-icons的monorepo中使用next.js和next-fonts自定義webpack配置