Switch back to using the src alias, and import quasar's aliases (#9)

directly in the jest configuration using require-json5.

Author: drgrice1

jest.config.js

@@ -1,27 +1,22 @@
-/* eslint-disable no-undef */
-
-/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
-const { pathsToModuleNameMapper } = require('ts-jest/utils')
-// In the following statement, replace `./tsconfig` with the path to your `tsconfig` file
-// which contains the path mapping (ie the `compilerOptions.paths` option):
-
-const { compilerOptions } = require('./tsconfig')
-
-
+/* eslint-env node */
 
 module.exports = {
 	preset: 'ts-jest',
 	testEnvironment: 'node',
 	globals: {
-		"ts-jest": {
-			"tsconfig": "tsconfig.json",
-			"diagnostics": true
+		'ts-jest': {
+			'tsconfig': 'tsconfig.json',
+			'diagnostics': true
 		}
 	},
-	// A map from regular expressions to module names that allow to stub out resources with a single module
-	// moduleNameMapper: {
-	//   '^@/(.*)$': '<rootDir>/src/$1',
-	// },
-	moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths , { prefix: '<rootDir>/' } ),
-	testRegex: "(/tests/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
+	moduleNameMapper: {
+		'^src/(.*)$': '<rootDir>/src/$1',
+		'^app/(.*)$': '<rootDir>/$1',
+		'^components/(.*)$': '<rootDir>/src/components/$1',
+		'^layouts/(.*)$': '<rootDir>/src/layouts/$1',
+		'^pages/(.*)$': '<rootDir>/src/pages/$1',
+		'^assets/(.*)$': '<rootDir>/src/assets/$1',
+		'^boot/(.*)$': '<rootDir>/src/boot/$1'
+	},
+	testRegex: '(/tests/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
 };

package-lock.json

@@ -44,6 +44,7 @@
 		"eslint-config-prettier": "^8.1.0",
 		"eslint-plugin-vue": "^7.0.0",
 		"jest": "^27.2.2",
+		"require-json5": "^1.1.0",
 		"stylelint": "^13.13.1",
 		"stylelint-config-prettier": "^8.0.2",
 		"stylelint-config-recommended-scss": "^4.3.0",

package.json

@@ -53,8 +53,6 @@ module.exports = configure(function (ctx) {
 				}));
 
 				chain.plugin('nodePolyfills').use(NodePolyfillPlugin);
-				/* allow paths to start with @/ */
-				chain.resolve.alias.set('@', path.resolve(__dirname, './src'))
 
 				if (ctx.prod) {
 					chain.plugin('copy-webpack')

quasar.conf.js

@@ -1,7 +1,7 @@
 // This should more than likely be redirected at the backend rather
 // than the renderer, unless we're going to go with the JWE route.
 import axios from 'axios';
-import type { HTML, RendererResponse } from '@/typings/renderer';
+import type { HTML, RendererResponse } from 'src/typings/renderer';
 
 export async function fetchProblem(url: string, formData: FormData, overrides: { [key: string]: string }) {
 	for (const key in overrides) {

src/APIRequests/renderer.ts

@@ -1,6 +1,6 @@
 import { boot } from 'quasar/wrappers';
 import { createI18n } from 'vue-i18n';
-import messages from '@/i18n';
+import messages from 'src/i18n';
 
 const i18n = createI18n({
 	locale: 'en-US',

src/boot/i18n.ts

@@ -30,7 +30,7 @@
 import { defineComponent, ref, watch, onMounted, nextTick } from 'vue';
 import type { SubmitButton } from 'src/typings/renderer';
 import { fetchProblem } from 'src/APIRequests/renderer';
-import { RENDER_URL } from '@/constants';
+import { RENDER_URL } from 'src/constants';
 import * as bootstrap from 'bootstrap';
 import type JQueryStatic from 'jquery';
 import JQuery from 'jquery';

src/components/common/Problem.vue

@@ -99,9 +99,9 @@ import { parse } from 'papaparse';
 import { AxiosError } from 'axios';
 import { logger } from 'boot/logger';
 
-import { useStore } from '@/store';
-import type { Dictionary, ResponseError } from '@/store/models';
-import { MergedUser, CourseUser, User, ParseableMergedUser } from '@/store/models/users';
+import { useStore } from 'src/store';
+import type { Dictionary, ResponseError } from 'src/store/models';
+import { MergedUser, CourseUser, User, ParseableMergedUser } from 'src/store/models/users';
 import { pick, fromPairs, values, invert, mapValues, clone, isUndefined,
 	assign, filter } from 'lodash-es';
 

src/components/instructor/ClasslistManagerComponents/AddUsersFromFile.vue

@@ -46,9 +46,9 @@
 
 <script lang="ts">
 import { defineComponent, computed, ref, Ref } from 'vue';
-import { useStore } from '@/store';
-import { ProblemSet, QuizDates } from '@/store/models/problem_sets';
-import { formatDate } from '@/common';
+import { useStore } from 'src/store';
+import { ProblemSet, QuizDates } from 'src/store/models/problem_sets';
+import { formatDate } from 'src/common';
 
 export default defineComponent({
 	name: 'ProblemSetsManager',

src/components/instructor/ProblemSetsManager.vue

@@ -43,8 +43,8 @@ import { useQuasar } from 'quasar';
 import { cloneDeep } from 'lodash-es';
 
 import DateTimeInput from 'src/components/common/DateTimeInput.vue';
-import { HomeworkSet } from '@/store/models/problem_sets';
-import { useStore } from '@/store';
+import { HomeworkSet } from 'src/store/models/problem_sets';
+import { useStore } from 'src/store';
 
 export default defineComponent({
 	components: { DateTimeInput },