Jasmine/Jest type conflicts - javascript

I am relatively new here and would need some help.
Company I work for uses karma and jasmine for unit testing.
Now they would like to migrate some tests to jest.
I got a ticket assigned to me. We are using typescript btw...
I got jest installed, prefixed with .spec.jest.ts to separate jest test from karmas. And it works fine. Jest just picks up those files that are prefixed. But when i try to do some build things we do with our project I get the type declaration conflicts between jest and jasmine.
For example: node_modules/#types/jest/index.d.ts:32:1 - error TS6200: Definitions of the following identifiers conflict with those in another file: beforeAll, beforeEach, afterAll, afterEach, describe, fdescribe, xdescribe, it, fit, xit, expect, clock, DEFAULT_TIMEOUT_INTERVAL, CustomMatcherFact
ory, CustomEqualityTester
I am aware that jest is build on top of jasmine but is there some kind of workaround, we want to migrate our tests gradually. One at a time.
Is there some kind of workaround to namespace the types for jest or something like that so no conflicts occur?
Tnx in advance for your help :)
I tried to google some workaround but nothing that would solve the issue came across.

We excluded the karma types in the tsconfig and added jest types. The IDE now doesn't pick the karma types but it works for us since most of our tests are now in jest and very few left in karma and build process works now correctly since there are no more type conflicts.

Related

What is Babel's purpose in relation to Jest?

I have an API project where I've been successfully using Jest (v26.x because code coverage doesn't work with v27.x on Windows 10 for me) for unit testing. I've run into a situation where I'm trying to achieve sufficient code coverage on a module I'm testing, but not all functions in that module have been exported, so this is impeding my ability to achieve this.
I came across the NPM package rewire, which worked beautifully, as it allowed me to mock any functions I wanted. The only problem is that code coverage doesn't acknowledge the lines tested via rewire and the devs in the Jest GitHub said they don't plan to support this.
So then I saw a couple of posts that people were successfully using babel-plugin-rewire to achieve the same thing as rewire, but that code coverage lines were successfully being acknowledged with this package. However, I cannot get this setup to work.
I think I understand the basics of Babel, as it pertains to browsers. It will take newer JS code and transpile/polyfill so that older JS code is generated that will work with older browsers of your choice.
But then I started seeing stuff about babel-jest and Babel being integrated into Jest and so on. Aside from the fact that I can't get babel-plugin-rewire to work, I feel like I don't even understand the basics of how Babel and Jest work together, or why Jest needs Babel.
What is the relationship between Babel and Jest?

How to use Intern with TypeScript and webpack?

Is it possible at all?
When I try to import Intern like this in my tests:
import * as registerSuite from 'intern!object'
and then I run webpack to transpile my *.ts tests, I get the following error:
TS2307: Cannot find module 'intern!object'.
Should I add some typings? I'm new to TypeScript, and webpack, and Intern — cannot understand what I'm missing.
Yes you need to add a reference to intern typings in include section of your tsconfig.json, as described in this tutorial.
But this will only get you past the compilation step. At runtime, you need a loader that understands module references like intern!object and handles them exactly in the way intern is expecting them to work.
I don't know if any such loader or plugin exists for webpack, I can only find one issue about it in the intern repo, and it does not seem to have any resolution.
In general, Intern 3 relies on dojo loader which is bundled with intern. People who try to use other loaders are on their own, and no common solution has emerged.
For intern 4 (which is a major update and not released yet), there is a plan to 'remove loader dependency from Intern', but I don't know if something specific will be done (or even needs to be done) for supporting webpack.
Actually, this is possible, as Dylan Schiemann said — the CEO at SitePen, the company that made Intern (if I'm not mistaken): https://www.sitepen.com/blog/2015/03/24/testing-typescript-with-intern/#comment-3280004472
The proof of this concept is the Dojo 2 project, which is also made by SitePen: https://github.com/dojo/widget-core/
It is authored in TypeScript, and uses webpack and Intern for testing.
But unfortunately there's no documentation tutorial on how to do this yet.
Dylan also said, in the next version of Intern (v4) the internal Intern's loader will be removed, and thus, this problem will go away, but Intern 4 is currently in pre-beta state yet, though relatively stable.

Run Jasmine tests from WebStorm

WebStorm shows icons next to Jasmine's test cases and it seems as if there should be an option to run it, but the menu just says: Nothing here.
As I did not find any documentation about this feature, I wonder if it should be possible to run tests like this and if yes, what the conditions are.
This likely means that no suitable test runners have been found. WebStorm doesn't manage test running directly. This job is done by a test runner. WebStorm supports several test runners - Mocha, Karma, Jest, JsTestDriver, nodeunit,... The logic used for determining what test runner is available for a given test file is based on dependencies declarations in nearest package.json file.

Confusing TypeScript errors due to hyphen in package name?

I've built a JavaScript/TypeScript library that I want to work as:
A global variable when called from either JavaScript and TypeScript
Accessed via RequireJS when called from either JavaScript and TypeScript
Has full unit test coverage
This is a UMD packaged using Webpack and deployed as an NPM package here (https://www.npmjs.com/~typed-contract). If you want the whole source of the branch I'm working on, you can find it here https://github.com/randarp/typed-contract/tree/feature/Issue_5.1.
My problem is that I can't get it to work in all scenarios and my feeling is that the hyphen in the package name (i.e. typed-contract) is the culprit. Some examples:
In TypeScript, \Code\TypedContract.Specs\Contract.TypeScript.requireJS.spec.ts
If I use import { contract } from "typed-contract" then my unit tests fail, but the WebStorm transpiler says it's correct.
If I use import { contract } from "typedcontract" then my unit tests pass, but the transpiler says Error:(4, 26) TS2306:File 'C:/Projects/TypedContract/Code/typedcontract.d.ts' is not a module.
I have an external NodeJS application to test this. In that case:
If I use import {contract} from 'typed-contract' it works as expected
If I use import {contract} from 'typedcontract' it won't load the application because it can't find the NPM package under node_modules.
I'm starting to think I need to deprecate this package and start a new one without a hyphen unless somebody can give some clues as to what may be going on because my "programming by permutation" isn't working.
Well, after a few more failed attempts, I created a new package and deprecated the old one. It can now be found at:
https://www.npmjs.com/package/typedcontract.
I just couldn't get it to work in all scenarios with the hyphen, so this seemed like the best long term solution.
I'm starting to think I need to deprecate this package and start a new one without a hyphen
I should work with the -.
Don't trust WebStorm too much. TSC should be your single source of truth.
then my unit tests fail
Perhaps your unit tests are wrong then.

Istanbul coverage with built React JavaScript and Jasmine

I have a built version of a React module that I'm testing successfully with Jasmine but when I try to use Istanbul to determine my tests coverage it shows that I'm only testing the Require.js Define lines of the code.
In particular the render function is clearly being called in my test (as I have tests that are passing on a div that must be being rendered) but is showing as not being covered in Istanbul.
Any ideas why this might be?
N.B. I am not testing the JSX files only their built JS versions.

Categories