Error Running Mocha Unit Tests on Vue Project With GraphQL - graphql

Question

Problem
I'm trying to add a GraphQL client to an existing Vue3 project though it is causing the Mocha tests to fail. Running yarn test:unit results in the following error:
MOCHA Testing...
RUNTIME EXCEPTION Exception occurred while loading your tests
Error: Cannot find module './version.mjs'
Require stack:
- /home/chris/Projects/bottomtime/web-vue-gql/dist/js/main.js
- /home/chris/Projects/bottomtime/web-vue-gql/node_modules/mocha/lib/mocha.js
- /home/chris/Projects/bottomtime/web-vue-gql/node_modules/mocha/index.js
- /home/chris/Projects/bottomtime/web-vue-gql/node_modules/mochapack/lib/cli/argsParser/parseArgv/mocha/parseMochaArgs.js
- /home/chris/Projects/bottomtime/web-vue-gql/node_modules/mochapack/lib/cli/argsParser/parseArgv/index.js
- /home/chris/Projects/bottomtime/web-vue-gql/node_modules/mochapack/lib/cli/index.js
- /home/chris/Projects/bottomtime/web-vue-gql/node_modules/mochapack/bin/mochapack
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function._resolveFilename (/home/chris/Projects/bottomtime/web-vue-gql/node_modules/mochapack/src/util/registerRequireHook.ts:21:34)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Module.<anonymous> (/home/chris/Projects/bottomtime/web-vue-gql/dist/js/webpack:/web-vue-gql/node_modules/graphql/index.mjs:29:1)
at __webpack_require__ (/home/chris/Projects/bottomtime/web-vue-gql/dist/js/webpack:/web-vue-gql/webpack/bootstrap:19:1)
at Object.defineProperty.value (/home/chris/Projects/bottomtime/web-vue-gql/dist/js/webpack:/web-vue-gql/src/index.ts:1:1)
at __webpack_require__ (/home/chris/Projects/bottomtime/web-vue-gql/dist/js/webpack:/web-vue-gql/webpack/bootstrap:19:1)
at Object.defineProperty.value (/home/chris/Projects/bottomtime/web-vue-gql/dist/js/webpack:/web-vue-gql/node_modules/vue-loader/dist/index.js:3:1)
[=========================] 100% (completed)
ERROR Error: mochapack exited with code 1.
Error: mochapack exited with code 1.
at ChildProcess.<anonymous> (/home/chris/Projects/bottomtime/web-vue-gql/node_modules/#vue/cli-plugin-unit-mocha/index.js:86:18)
at ChildProcess.emit (node:events:539:35)
at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
error Command failed with exit code 1.
Steps to Reproduce
Use the Vue CLI to scaffold a new project. (vue create project-name). For the options select "Manually select features", then enable all of the plugins, choose Vue v3.x, and choose Mocha + Chai as the unit test framework. (For all of the other questions you can just select the default.)
Once the project is scaffolded, cd into the directory and install GraphQL: yarn add graphql graphql-tag.
Add a query definition to any of the src/ files that would be loaded when the tests run. The problem specifically arises when using the gql function from the graphql-tag package. (You can grab my copy/paste-friendly example below!)
Run yarn test:unit and behold the above error.
Example GQL Code That Would Trigger the Failure
import { gql } from "graphql-tag";
gql`
query SomeQuery {
getCurrentUser {
username
}
}
`;
Notes
I've tried replacing Mocha/Chai w/ Jest to see if the problem persisted. It worked fine under Jest. That said, I'm adding GraphQL to an existing project and porting all of the tests to Jest is not exactly a great option.