We Keep Coding

Sveltekit - unable to import any file that starts with $app or $env

I'm not able to make use of ANY imports that include $app or $env or any path related variable inside a file that is created "outside" of SvelteKit.
Example:
socketio/server.ts
import * as FriendsService from '../src/lib/services/friends';
/services/friends.ts
import { JWT_ACCESS_TOKEN_SECRET } from "$env/static/private";
ERROR:
TSError: ⨯ Unable to compile TypeScript:
../src/lib/services/friends.ts:2:41 - error TS2307: Cannot find module '$env/static/private' or its corresponding type declarations.
There's more information about the bug here:
https://github.com/sveltejs/kit/issues/1485
I was wondering if anyone found a workaround this.
EDIT:
I assume there is a way of doing this, I'm running the server with command of ts-node, but instead of that I should make Vite see it somehow?

I fixed it by adding "extends": "./.svelte-kit/tsconfig.json" in tsconfig.json :
// tsconfig.json
{
"compilerOptions": {
...
},
"extends": "./.svelte-kit/tsconfig.json"
}

Jest with tyescript in monorepo doesn't work with dependency out of the root folder

I use Jest with Typescript. I want to create a monorepo.
My folders structure is:
fe
|-app1
|--.jest.config.ts
|--tsconfig.json
|-shared
|--dummyData.ts
I want a unit test from app1 to access some data from shared folder.
fe/app1/demo.spec.ts:
import { someData } from '#shared/dummyData' //<--HERE: the alias is works, but jest can not understand "export" keyword
descrube('demo' () => {
it('demo test', () => {
expect(someData).toBe('DUMMY'));
})
})
fe/shared/dummyData.ts:
export const someData = 'DUMMY';
The problem is that jest throws an error:
Jest encountered an unexpected token
{"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export const someData = 'DUMMY';
^^^^^^
As I understand it cannot parse typescript or es6 modules that were produced by ts and babel.
The thing that it works fine while shared folder is inside app1, but once it's outside (and outside the root folder, i.g '<rootDir>/../shared/$1') it start throwing that error.
Here is my configs:
I described alias in fe/app1/tsconfig.json:
{
...
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"paths": {
"#/*": ["app/src/*"],
"#shared/*": ["shared/*"]
}
}
}
And in fe/app1/.jest.config.ts:
module.exports = {
...
transform: {
'^.+\\.js$': '<rootDir>/node_modules/babel-jest',
'^.+\\.(jsx?|tsx?)$': 'ts-jest'
},
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1',
'^#shared/(.*)$': '<rootDir>/../shared/$1',
}
}
Some thoughts:
As I understand I have to tell to jest to apply same parsers (babel, etc) for the code outside of the rootDir.
I guess it's possible to create a tsconfig in the root folder(fe), but I want to launch unit tests from fe/app1 folder...
Maybe it's possible to configure the things with such properties as projects, roots and etc, but I'm out of luck so far.

Okay, I found the solution:
For monorepo it is important to have babel config as a JS file
So, simply rename .babelrc to babel.config.js (in the folder you called jest from, in my case it is fe/app1)
For more info you could check this comment (and maybe this thread)

Setup Jest + React testing library using NextJS in TypeScript -- error setting upp jest.config.js

I am trying to set up Jest with a NextJS application, currently in jest.config.js:
module.exports = {
testPathIgnorePatterns: ["<rootDir>/.next/", "node_modules/"],
setupFilesAfterEnv: ["<rootDir>/__tests__/setupTests.tsx"],
transform: {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
}
};
In my setupTests.tsx I have:
import "#testing-library/jest-dom/extend-expect";
However when I run npm run test I get the following error:
Module identity-obj-proxy in the transform option was not found.
<rootDir> is: ....
If I remove the line in jest.config.js I get:
Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
globals.css:2
body {
^
SyntaxError: Unexpected token '{'
> 5 | import "../styles/globals.css";
What configuration should I use for the css and scss files?
** EDIT **
I made sure that identity-obj-proxy is in my devDependencies however, now I get an error:
Test suite failed to run
Test suite failed to run
TypeError: Jest: a transform must export a `process` function.
> 5 | import "../styles/globals.css";
| ^
6 | import React from "react";

You need to install identity-obj-proxy. Run >>> yarn add -D identity-obj-proxy

Try this:
Create a file style-mock.js with this content
module.exports = {};
Specify it inside the moduleNameMapper field of jest config
moduleNameMapper: {
'^.+\\.(css|less)$': '<rootDir>/jest-config/style-mock.js'
}
With this setup, it will mock all css import, hope it helps

Jest can't resolve import with # (at) character

I have a problem. When I run Jest tests it can't resolve my imports with at (#) signs. I have an error:
FAIL src/App.test.js
● Test suite failed to run
Cannot find module '#/helpers/configureStore' from 'App.js'
How do I resolve this error?

I found the solution in this post. So according to the jest docs we should go to our package.json file, and make sure our config contains something like:
{
"jest": {
"moduleNameMapper": {
"#/(.*)$": "<rootDir>/src/$1"
}
}
}
"#/(.*)$": "<rootDir>/src/$1" that's a cool regex which will resolve our #/helpers/configureStore to src/helpers/configureStore.
Also remember to quit from jest interactive mode (with q key) and run it again to see changes.

If you are using a jest.config.ts and importing something like '#app/app.constants' you can replace
moduleNameMapper: {},
with
moduleNameMapper: {
"#app/(.*)$": "<rootDir>/src/app/$1",
},

No tests found on running jest with grunt

I am trying to run my jest with a grunt task but on doing so I get No tests found message in console. Here is the setup for the same:
gruntfile.js snippet :
exec: {
jest: 'node node_modules/jest/bin/jest -u --config="test/unit/jest/jest.conf.json"'
}
jest.conf.json :
{
"testEnvironment": "jsdom",
"setupTestFrameworkScriptFile": "./enzyme.setup.js",
"testResultsProcessor": "jest-teamcity-reporter"
}
enzyme.setup.js :
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15.4';
configure({ adapter: new Adapter() });
Console on running the grunt exec task shows below:
No tests found
In C:\Vishal\UI\Jest-Grunt\proj\test\unit\jest
3 files checked.
testMatch: .js?(x),**/?(*.)(spec|test).js?(x) - 0 matches
testPathIgnorePatterns: \\node_modules\\ - 3 matches
Pattern: - 0 matches
Done, without errors.
However the surprising thing is if I don't pass the jest config file path in cli inside grunt exec task and instead specify the jest configuration in package.json file then it works.
Not sure why this is behaving like this.

Aah, after banging my head around. I noticed that the error is pity straight forward:
In C:\My-User\UI\Jest-Grunt\proj\test\unit\jest
This clearly explains that JEST tries to execute test cases inside folder specified above. But ideally JEST looks into __tests__. Hence I had to specify the roots folder myself. With package json this doesn't occur. Strange though!
Here is my updates jest configuration:
{
"testEnvironment": "jsdom",
"setupTestFrameworkScriptFile": "./enzyme.setup.js",
"testResultsProcessor": "jest-teamcity-reporter",
"coverageReporters": [
"teamcity", "lcov"
],
"roots": [
"../../../__tests__"
]
}