Jest+React Testing Library config for snowPack

[naylinnpkv]

Hi everyone, 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_BIXBY2_BASE_URL } = import.meta.env;. 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"
	]
}

[tcodes0]

jest wont understand import.meta, try this

• wrap calls to import.meta into an export like this

// file: src/helpers/env
export const envVars: EnvRecord = {
  YOUR_SECRET: "091742e9-7dba-4ef4-9928-1e39142c86b0",
}

• mock that export in jest like this

const mockEnvVars: EnvRecord = {
  YOUR_SECRET: "mocked YOUR_SECRET",
};

jest.mock("src/helpers/env", () => ({
  envVars: mockEnvVars,
}));

your actual code then does this to access secrets

import { envVars } from "src/helpers/env"

console.log(envVars.YOUR_SECRET)