I am having trouble setting up the Jest and React Testing Library for the snowpack project and wondering if any of you have encountered something similar. So the error I am getting is The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'esnext', or 'system' which is pointing to const { SNOWPACK_PUBLIC_BASE_URL } = import.meta.env;.I've followed all the documentation to setup the configs properly and still getting this error. My Config files are as follows.
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"
]
}