I have an Angular flavoured Nativescript project, which must be tested with "vanila" Jasmine, in a browser (so not in mobile) with ng test.
By default, with "naked" tests, it works. But the problem is, if I try to test/import anything, that has a ".tns" alternative, in some cases it loads that, and the build fails.
My problem is similar to this thread but there were no good solution described there.
So for instance:
I have two files:
app.component.tns.ts
app.component.ts
and I try to import it for testing in app.component.spec.ts:
import {AppComponent} from "#src/app/app.component";
it loads the .tns. file, and the build fails, as it cannot load the mobile-specific libraries.
ERROR in ./src/app/app.component.tns.ts
Module not found: Error: Can't resolve 'nativescript-ui-sidedrawer' in '/home/..../src/app'
resolve 'nativescript-ui-sidedrawer' in '/home/...../src/app'
Parsed request is a module
using description file: /home/...../src/package.json (relative path: ./app)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
...
# ./src/app/app.component.tns.ts 25:35-72
# ./src/app/app.module.spec.ts
# ./src sync \.spec\.ts$
# ./src/test.ts
is there any solution to "remove" the .tns. files, just as if I were running a simple ng serve?
update: My tsconfig.spec.json should exclude these files, but it does not work either ...
"exclude": [
"**/*.tns.ts",
"**/*.android.ts",
"**/*.ios.ts"
]
}
it seems the problem was with tsconfig.json. Specificly this part:
"compilerOptions": {
...
"paths": {
"#src/*": [
"src/*.android.ts",
"src/*.ios.ts",
"src/*.tns.ts",
"src/*.web.ts",
"src/*.ts"
]
},
As this was extended by the tsconfig.spec.json.
I modified the tsconfig.spec.json to this:
{
"compilerOptions": {
"target": "es5",
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom",
"es6",
"es2015.iterable"
],
"baseUrl": ".",
"resolveJsonModule": true,
"esModuleInterop": true,
"paths": {
"#src/*": [
"src/*.ts"
]
},
"outDir": "../out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
],
"exclude": [
"**/*.tns.ts",
"**/*.android.ts",
"**/*.ios.ts"
]
}
and now the tests run, and the correct components are imported.
Related
I am trying to run some tests on files I created which use ipfs-http-client.
I write code with typescript and I am using ts-node to run files without actually doing the build (when i do tests). I am running this code in a commonJs folder. As ipfs packages is ESM only, it gives me an error each time i try to run this code
No "exports" main defined in ..... (points to the ipfs folder in node_modules)
To reproduce the issue I created a bare project which shows exactly what is happening.
I run npm init and npm i ipfs-http-client.
I have already installed ts-node.
the packages.json file looks like this
{
"name": "import_esm_in_commonjs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"ipfs-http-client": "^59.0.0"
}
}
and, for tsConfig file, I am just using the basic ts-node one:
{
"ts-node": {
"cwd": "/Users/WAW/Documents/Projects/_issues_stack_over_flow/import_ESM_in_commonJS",
"projectSearchDir": "/Users/WAW/Documents/Projects/_issues_stack_over_flow/import_ESM_in_commonJS"
},
"compilerOptions": {
"lib": [
"es2021"
],
"module": "commonjs",
"target": "es2021",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"types": [
"node"
],
"sourceMap": true,
"inlineSourceMap": false,
"inlineSources": true,
"declaration": false,
"noEmit": false,
"outDir": "./.ts-node"
}
}
I just created an index.ts file in the root of the project which looks like this:
import "ipfs-http-client"
console.log("file works");
when I run ts-node index.ts I receive the previously mentioned error:
No "exports" main defined in ..... (pointing to the ipfs folder in the node_modules)
Hope someone can help!
Actually I found how to do it.
In order to be able to import esm only modules in a typescripy project with "type": "commonJs"in the package.json like this:
import { create } from "ipfs-http-client";
console.log(create);
I did the following:
explicitly set tsconfig file for ts-node:
{
"ts-node": {
"cwd": "/Users/WAW/Documents/Projects/_issues_stack_over_flow/import_ESM_in_commonJS",
"projectSearchDir": "/Users/WAW/Documents/Projects/_issues_stack_over_flow/import_ESM_in_commonJS"
},
"compilerOptions": {
"lib": [
"es2021"
],
"module": "commonjs",
"target": "es2021",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"types": [
"node"
],
"sourceMap": true,
"inlineSourceMap": false,
"inlineSources": true,
"declaration": false,
"noEmit": false,
"outDir": "./.ts-node"
}
}
set "module": "ES2022" and "modeResolution": "Node" in the tsconfig.json in the tsconfig.json
{
...
"compilerOptions": {
"module": "ES2022",
"moduleResolution": "Node",
...
}
when calling ts-node use the --esm flag:
ts-node --esm name_of_the_file
and it works =)
ps: I also updated the repo
my polymer.json
{
"entrypoint": "index.html",
"shell": "src/boo-blogger/boo-blogger.js",
"sources": [
"images/*",
"fonts/*"
],
"extraDependencies": [
"manifest.json",
"node_modules/#webcomponents/webcomponentsjs/*.js",
"node_modules/web-animations-js/web-animations-next-lite.min.js",
"node_modules/#webcomponents/webcomponentsjs/bundles/*.js"
],
"builds": [
{
"name": "es6",
"bundle": true,
"browserCapabilities": [
"es2015",
"modules"
],
"js": {
"minify": true,
"transformModulesToAmd": true
},
"html": {
"minify": true
},
"css": {
"minify": true
},
"addServiceWorker": true
}
],
"npm": true,
"lint": {
"rules": [
"polymer-3"
]
}
}
I got the problem
article-list.js:5 Uncaught (in promise) TypeError: _booBlogger.html$1 is not a function
article-list.js imported dynamic by routing. So I tried to attempt some build option differently to build. I found when I build without bundle, built code can work. I don't know why my code can not bundle by polymer build. if anyone is curious the problem and need completely source code. contact me
tools summary
system: ubuntu 16.04
polymer: 1.7.7
node: 10.1.0
In your polymer.json you need to add:
"fragments": [
"src/article-list.js"
],
I think you forgot to add article-list.js to your sources. As it is written in docs you have to include your dynamically imported modules to "sources" in polymer.json. See https://polymer-library.polymer-project.org/3.0/docs/apps/build-for-production#dynamic
I am trying to get Chutzpah and Jasmine working together in visual studio, my end goal is to get unit tests running with TeamCity integration.
On save, all of the typescript code generates a single .js file. This also causes Chutzpah to run my tests, so far so good.
My issue is Chutzpah reports 0 passed, 0 failed and 0 errors. The Jasmine html file that is generated lists out all of my tests correctly but Chutzpa doesn't seem to receive any information back from Jasmine.
Highlights of a trace log:
Trying to build test context for c:\.....\test.ts
Building test context for c:\.....\test.ts
...framework dependencies / other ok looking things... (~15 lines)
Finished building test context for c:\.....\test.ts
Warning: 0 : Message:Chutzpah determined generated .js files are missing but the compile
mode is External so Chutzpah can't compile them. Test results may be wrong.
Then it starts Phantom js and logs loading / receiving resources. My test.ts file is not one of the recources listed but the site-wide .js is (I checked the site-wide file and my tests are being appended to it).
Finished test run for c:\......\test.ts in Discovery mode
Cleaning up test context for c:\......\test.ts
Chutzpah run finished with 0 passed, 0 failed and 0 errors
Chutzpah.json file cache cleared
End Test Adapter Discover Tests
chutzpah.json
{
"Framework": "jasmine",
"EnableTestFileBatching": true,
"Compile": {
"Mode": "External",
"Extensions": [ ".ts" ],
"ExtensionsWithNoOutput": [ ".d.ts" ],
"Paths": [
{
"OutputPath": "../SiteWide.js",
"SourcePath": "Views"
}
]
},
"References": [
{
"Path": "../knockout-3.4.2.js",
"IsTestFrameworkFile": true
}
],
"Tests": [
{
"Includes": [ "*.ts" ],
"Path": "../Tests/Views"
}
],
"EnableTracing": true,
"TraceFilePath": "./trace.log"
}
tests.ts
describe('configuring unit tests for typescript!', () => {
it('this should pass', () => {
expect(1).toBe(1);
});
it('this should fail', () => {
expect(1).toBe(0);
});
});
There are a few things I'm suspicious of (the missing .js files line from the trace - but that might just be caused by my single js file compilation step?)
Maybe I'm missing references to jasmine in my chutzpah.json?
I'm at a loss for why the Jasmine tests work, but Chutzpah doesn't report back.
Maybe late...
But something like this in chutzpah.json would help.
{
"Framework": "jasmine",
"Compile": {
"Mode": "External",
"Extensions": [ "*.ts" ],
"ExtensionsWithNoOutput": [ "*.d.ts" ]
},
"References": [
{ "Path": "node_modules/promise-polyfill/dist", "Include": "*.js", "Exclude": "*.d.ts" },
{ "Path": "node_modules/systemjs/dist", "Include": "*.js", "Exclude": "*.d.ts" }
],
"Tests": [
{ "Path": "unittests", "Includes": [ "*.spec.ts" ], "Excludes": [ "*.d.ts" ], "ExpandReferenceComments": "true" }
]
}
Having your system related files is important in the references. Also you can try "*.spec.js" in the Tests section
My group is building an application with the following front-end stack:
VueJS
Webpack 2.2
AvaJS (for unit testing)
nyc (Istanbul) for test coverage
We started off with vue-cli to create a Webpack template for our project. For the most part everything has gone smoothly. We are able to use Ava for unit testing separate .vue component files using vue-node However there is a problem with the test coverage report generated through nyc. Below is a snippet of our package.json file with the relevant nyc and ava sections defined:
"nyc": {
"exclude": [
"build",
"config",
"static",
"tests"
],
"extension": [
".js",
".vue"
]
},
"ava": {
"require": [
"./tests/unit/helpers/setup.js",
"ignore-styles"
]
},
All the tests pass successfully. The nyc report shows the following:
The problem is that the line #s listed under Uncovered Lines don't exist. The .vue file is only 402 lines long so I can't figure out where these line #s in the nyc report are coming from.
Any help would be appreciated and thank you in advance.
I had the same issue, you need to install babel-plugin-istanbul that instruments your code with Istanbul coverage. This plugin is in charge to get the right sourceMap for your code. So you need to disable instrument and sourceMap from nyc.
npm install --save-dev babel-plugin-istanbul
In the .babelrc file (generally found in the root folder of your project,) add the following so it only gets used by your test environment:
{
"env": {
"test": {
"plugins": [ "istanbul" ]
}
}
}
Then disable instrument and sourceMap from nyc. babel-plugin-istanbul will take care of it. And replace your "require": "nyc" with "require": "babel-register".
"nyc": {
"exclude": [
"build",
"config",
"static",
"tests"
],
"extension": [
".js",
".vue"
],
"require": [
"./tests/unit/helpers/setup.js",
"ignore-styles",
"babel-register"
],
"sourceMap": false,
"instrument": false
},
Now you should be able to get coverage with nyc.
NODE_ENV=test nyc ava
Sources:
https://www.npmjs.com/package/babel-plugin-istanbul
https://github.com/istanbuljs/nyc#use-with-babel-plugin-istanbul-for-babel-support
I am using Chutzpah Version 3.2.3 with Typescript and nUnit.
I am able to successfully run the unit tests. But when i do cod coverage for the same unit tests i get
Error: Timeout occurred when executing test file
I have no clue where to even start looking to fix it. I have been banging my head about this issue for a day now, Any leads are highly appreciated.
Below is my chutzpah.json
{
"Framework": "qunit",
"TestHarnessLocationMode": "Custom",
"TestHarnessDirectory": "../example.exampleTest.Client.Excel.Web/App",
"Compile": {
"Mode": "External",
"Extensions": [ ".ts" ],
"ExtensionsWithNoOutput": [ ".d.ts" ],
"SourceDirectory": "../../Example.exampleTest/",
"OutDirectory": "../../Example.exampleTest/"
}
}
I was able to resolve the issue by being specific about which files to include in code coverage and which files to exclude. Below is my updated chutzpah.json
{
"Framework": "qunit",
"EnableCodeCoverage ": "true",
"CodeCoverageIncludes": [
"*Orchestrator*",
"*Transformer*",
"*Processor*"
],
"CodeCoverageExcludes": [
"*\\Example.Example.Client.Excel.Web\\App\\Workstreams\\AX-AX\\*",
"*\\Example.Example.Client.Excel.Web\\App\\Workstreams\\CS\\v1.0\\CS-ICS\\*",
"*\\Example.Example.Client.Excel.Web\\App\\Workstreams\\CAD-CAD\\*",
"*\\Example.Example.Client.Excel.Web\\App\\AddInModules\\*",
"*\\Example.Example.Client.Excel.Web\\Scripts\\*",
"*\\Example.Example.Client.Excel.Web\\Mocks\\*"
],
"TestFileTimeout":"200000",
"Compile": {
"Mode": "External",
"Extensions": [ ".ts" ],
"ExtensionsWithNoOutput": [ ".d.ts" ],
"SourceDirectory": "../../Example.Example/",
"OutDirectory": "../../Example.Example/"
}
}