Jest.js 仅当来自snowpack+testing-library的“--module”选项为“es 2020”、“esnext”或“system”错误时,才允许使用“import. meta”元属性

cnjp1d6j  于 2023-03-16  发布在  Jest
关注(0)|答案(1)|浏览(338)

我在为snowpack项目设置Jest和React测试库时遇到了麻烦,不知道你们中是否有人遇到过类似的问题。所以我得到的错误是The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'esnext', or 'system',它指向const { SNOWPACK_PUBLIC_BASE_URL } = import.meta.env;。我已经按照所有文档正确设置了配置,但仍然得到这个错误。我的配置文件如下。
package.json:

{
    "jest": {
        "verbose": true,
        "preset": "ts-jest",
        "testEnvironment": "node",
        "transform": {
            "node_modules/variables/.+\\.(j|t)sx?$": "ts-jest"
        },
        "transformIgnorePatterns": [
            "node_modules/(?!variables/.*)"
        ],
        "moduleNameMapper": {
            "@app/(.*)": "<rootDir>/src/$1",
            "@auth/(.*)": "<rootDir>/src/auth/$1",
            "@hooks/(.*)": "<rootDir>/src/hooks/$1",
            "@gtm/(.*)": "<rootDir>/src/gtm/$1"
        }
    },
    "scripts": {
        "start": "snowpack dev",
        "build": "snowpack build",
        "test": "jest __tests__/ --coverage",
        "test:watch": "jest --watch",
        "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,scss}\"",
        "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx,scss}\" && eslint \"src/**/*.{js,jsx,ts,tsx}\""
    },
    "husky": {
        "hooks": {
            "pre-commit": "npm run lint"
        }
    },
    "dependencies": {
        "@auth0/auth0-react": "^1.1.0",
        "@babel/plugin-transform-react-jsx": "^7.16.0",
        "@blueprintjs/core": "^3.42.0",
        "@blueprintjs/datetime": "^3.22.0",
        "@blueprintjs/icons": "^3.26.0",
        "@blueprintjs/popover2": "^0.2.0",
        "@blueprintjs/select": "^3.15.9",
        "@hookform/resolvers": "^1.2.0",
        "@looker/embed-sdk": "^1.4.0",
        "@snowpack/app-scripts-react": "^2.0.1",
        "@types/pluralize": "0.0.29",
        "@types/react-router": "^5.1.17",
        "axios": "^0.21.1",
        "bulma": "^0.9.1",
        "classnames": "^2.2.6",
        "clipboard": "^2.0.8",
        "dayjs": "^1.9.6",
        "humps": "^2.0.1",
        "json-schema": "^0.2.5",
        "lodash": "^4.17.20",
        "pluralize": "^8.0.0",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-hook-form": "^6.13.1",
        "react-infinite-scroll-component": "^6.0.0",
        "react-router-dom": "^5.2.0",
        "ts-node": "^10.4.0",
        "yup": "^0.32.8"
    },
    "devDependencies": {
        "@babel/core": "^7.16.0",
        "@babel/plugin-syntax-jsx": "^7.16.0",
        "@babel/preset-env": "^7.16.4",
        "@babel/preset-react": "^7.16.0",
        "@babel/preset-typescript": "^7.16.0",
        "@snowpack/plugin-dotenv": "^2.0.4",
        "@snowpack/plugin-optimize": "^0.2.6",
        "@snowpack/plugin-react-refresh": "^2.3.4",
        "@snowpack/plugin-typescript": "^1.0.2",
        "@snowpack/web-test-runner-plugin": "^0.2.1",
        "@testing-library/jest-dom": "^5.15.0",
        "@testing-library/react": "^11.2.7",
        "@trivago/prettier-plugin-sort-imports": "^2.0.2",
        "@types/chai": "^4.2.13",
        "@types/classnames": "^2.2.11",
        "@types/humps": "^2.0.0",
        "@types/jest": "^27.0.3",
        "@types/lodash": "^4.14.163",
        "@types/react": "^16.9.49",
        "@types/react-dom": "^16.9.8",
        "@types/react-router-dom": "^5.1.6",
        "@types/react-scrollbar": "^0.5.1",
        "@types/snowpack-env": "^2.3.0",
        "@typescript-eslint/eslint-plugin": "^4.20.0",
        "@typescript-eslint/parser": "^4.15.2",
        "@web/test-runner": "^0.12.6",
        "@web/test-runner-puppeteer": "^0.9.1",
        "babel-jest": "^27.3.1",
        "chai": "^4.2.0",
        "eslint": "^7.23.0",
        "eslint-config-airbnb-typescript": "^12.3.1",
        "eslint-config-prettier": "^6.15.0",
        "eslint-plugin-import": "^2.22.1",
        "eslint-plugin-jest": "^24.3.2",
        "eslint-plugin-jsx-a11y": "^6.3.1",
        "eslint-plugin-lodash": "^7.2.0",
        "eslint-plugin-prettier": "^3.3.1",
        "eslint-plugin-react": "^7.23.1",
        "eslint-plugin-react-hooks": "^4.2.0",
        "husky": "^4.3.0",
        "jest": "^27.3.1",
        "node-sass": "^4.14.1",
        "node-sass-package-importer": "^5.3.2",
        "prettier": "^2.0.5",
        "snowpack": "^3.0.11",
        "snowpack-plugin-hash": "^0.14.2",
        "stylelint": "^13.7.2",
        "stylelint-config-prettier": "^8.0.2",
        "stylelint-config-sass-guidelines": "^7.1.0",
        "stylelint-scss": "^3.18.0",
        "ts-jest": "^27.0.7",
        "typescript": "^4.2.2"
    }
}

tsconfig.json:

{
    "include": ["src", "types"],
    "compilerOptions": {
        "module": "esnext",
        "target": "esnext",
        "moduleResolution": "node",
        "jsx": "react-jsx",
        "noImplicitAny": false,
        "baseUrl": ".",
        "paths": {
            "@app/*": ["src/*"],
            "@auth/*": ["src/auth/*"],
            "@gtm/*": ["src/gtm/*"],
            "@hooks/*": ["src/hooks/*"],
            "@models/*": ["src/models/*"],
            "@static/*": ["src/static/*"],
            "@views/*": ["src/views/*"],
            "@widgets/*": ["src/views/widgets/*"],
            "@util/*": ["src/util/*"]
        },
        /* noEmit - Snowpack builds (emits) files, not tsc. */
        "noEmit": true,
        /* Additional Options */
        "strict": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "allowSyntheticDefaultImports": true
    }
}

snowpack.config.js:

let fs = require('fs');
const path = require('path');

process.env.NODE_PATH = __dirname;
require('module').Module._initPaths();

let config = {
    mount: {
        public: '/',
        src: '/_dist_',
    },
    plugins: [
        '@snowpack/plugin-react-refresh',
        '@snowpack/plugin-dotenv',
        '@snowpack/plugin-typescript',
        '@snowpack/plugin-optimize',
        [
            'snowpack-plugin-hash',
            {
                hashLength: 10,
            },
        ],
        'scripts/wpro-snowpack-sass-plugin.js',
    ],
    devOptions: {
        port: 8080,
    },
    routes: [{ match: 'routes', src: '.*', dest: '/index.html' }],
    buildOptions: {
        /* ... */
    },
    alias: {
        '@app': './src',
        '@auth': './src/auth',
        '@gtm': './src/gtm',
        '@hooks': './src/hooks',
        '@models': './src/models',
        '@static': './src/static',
        '@views': './src/views',
        '@widgets': './src/views/widgets',
        '@util': './src/util',
    },
};
const paths = {
    APP_DIR: path.resolve(__dirname, '..', 'src'),
};

exports.resolveRoot = [paths.APP_DIR, 'node_modules'];

exports.aliases = {
    '@root': path.resolve(paths.APP_DIR, ''),
    '@components': path.resolve(paths.APP_DIR, 'components'),
};

let local_config = 'snowpack.config.local.js';
if (fs.existsSync(local_config)) {
    Object.assign(config, require(local_config));
}

module.exports = config;

.babelrc:

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-typescript"
    ]
}
i7uq4tfw

i7uq4tfw1#

我看到你的tsconfig.json没有"module":"commonjs",所以试着在你的package.json中添加"type":"module",在你的tsconfig.json中添加compilerOptions.esModuleInterop:true,如果你想使用import.meta.env,你应该使用ESModules

相关问题