-
Notifications
You must be signed in to change notification settings - Fork 308
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: alternative setup with babel/typescript #317
base: main
Are you sure you want to change the base?
Conversation
I think we need also plugin for babel plugin const enum for this PR |
Yeah! Let's add a test with enums in the example app! |
4f34333
to
d66ce40
Compare
In last force push:
|
d66ce40
to
ceab978
Compare
In the newest push I added some opiniated changes, so feel free to correct it wherever it looks seldom. Proposal: Folder Structure with babel & ts-jest
This would lead for users to adjust their module.exports = {
preset: "jest-preset-angular/build/ts-jest",
// or
preset: "jest-preset-angular/build/babel"
} We could add additional folders with a proxy Proposal: Run project example app with ts-jest and babel // jest.config.js
const testMode = process.env.JPA_TEST_MODE || 'ts-jest';
module.exports = {
preset: `jest-preset-angular/build/${testMode}`,
... This way we do not have to duplicate any code base and make sure the two transpilation modes are actually easily exchangable. Both transpilation plugins from babel and ts-jest have to be installed initially, which would also speed up the CI test time. There is one issue (see CI tests): <app-calc
hasAClass="false"
image={[Function String]}
+ observable$="undefined"
prop1={[Function Number]}
> We have to plugin optional tests somehow. Any experience with this? This PR would be a big difference for this preset, so it is quite important to me what you two think, @ahnpnl and @thymikee. Note that the speedup of the example app testrun is similar to the one of |
ceab978
to
d0f4ce0
Compare
I like the idea of having 2 internal presets for babel and ts-jest and let users choose what they want to use. I haven't tried to use babel yet so I wasn't aware of the different in compiling. Looks interesting. Is it intended behavior of babel team ? |
I think the different compilation output is a minor design decision. All the plugins are created by different people, even the "official" babel ones, and babel and typescript clearly do not work too closely together. It behaves the same when running the code, and that's the important part. class TestComponent {
field: boolean;
}
var ClassComponent = /** @class */ (function () {
function ClassComponent() {
}
return ClassComponent;
}());
var ClassComponent = function ClassComponent() {
_classCallCheck(this, ClassComponent);
this.field = void 0;
}; I am not so sure about the |
815c2d9
to
7be334a
Compare
Now it is definitely ready for review, although I do not feel good about the test mode detection. Maybe you have a better idea? Also with this test that behaves differently ( Good thing is I used the very same test cases for the babel ast transformer as for the ts-jest ast transformer. I duplicated them for now, but can extract them to a single source. |
I'd do similar things as well.
Maybe use |
7be334a
to
249aca1
Compare
Snapshotting - <app-calc
- hasAClass="false"
- image={[Function String]}
- prop1={[Function Number]}
+ <div
+ id="root0"
>
<p
class="a-default-class"
>
calc works! 1337 another text node test-image-stub
</p>
- </app-calc>
+ </div> I am not so sure if that's a good snapshot anymore. |
The snapshot thing indeed depends on the purpose of users when testing a component. If users care about the property rendered by ts file, fixture is the right one. Otherwise if users only care about html change, fixture.nativeElement is the choice. I think we don't need to care about this too much. Perhaps we can add a note in README to warn about the difference of snapshot relative to usage of tsc vs babel. I think that should be fine. At work I usually use fixture.nativeElement because I only want to check about html change. |
👍 Already added a small note in the README.md. I know, it's not very visible, but someone who does read through the README will encounter it. |
@thymikee normally, I don't comment on pull requests. But I'm pretty interested in using this if it leads to test suite speed increases, so your feedback is valued. For now, I'm actually going to be converting my teams jest tests to use babel. As my initial testing lead to some serious speed improvements with ~400 individual tests. @wtho I can report rough performance improvements if you'd like. Also, I'm using the |
Making it easier to use Babel sounds like a good idea, I just didn't find the time to have a look yet :D |
BREAKING CHANGE: add an alternative preset for babel and restructures the whole repository to treat babel and ts-jest equally. Furthermore `ts-jest` is not a dependency of the preset anymore. The jest config and package.json of users will have to be adjusted, see the CHANGELOG.md for migration information. Closes thymikee#308
249aca1
to
e326cb6
Compare
@BensonBen Yeah, a performance evaluation would be super helpful! I do not have a big codebase at hand currenlty. Maybe you can install jpa using Also I'm interested in which adjustments were required to use babel. Making switching as easy as possible would be desired from our side. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks mostly good and I like the idea. I wouldn't rush so hard with such a breaking change though. Let's give the community some time to actually test Babel preset without breaking anything. IMHO, we can leave jest-preset-angular
to point to the build/ts-jest
and in the readme and release notes encourage people to try out Babel because of speed or something.
So, things to address:
- make it a non-breaking change (no point in breaking with an independent feature, isn't it?)
- keep
ts-jest
as dependency for now - consider adding a deprecation notice in the next major
True, we can keep the structure and just point it at ts-jest as default. I just liked the equality between the two options and disregarded backwards-compatibility. I would also suggest to create a new issue to gather babel feedback and link the issue next to the babel setup notes. Changes in last commit
|
Interesting! Can you create a gist just containing the classes that have injection issues (and the classes/providers that could not be injected)? This information would help a ton! |
looks like it is always the same class Technically I'm using a import { NgModule, Injectable, Optional } from '@angular/core';
// import { NGXLogger } from 'ngx-logger';
// import { MessageService } from 'primeng/api';
import {
MissingTranslationHandler,
MissingTranslationHandlerParams,
TranslateCompiler,
TranslateLoader,
TranslateModule,
TranslateService,
} from '@ngx-translate/core';
@Injectable({ providedIn: 'root' })
export class Logger {
constructor(/* private readonly _log: NGXLogger */) {}
}
@Injectable()
export class MessageService {
}
class MyHandler {
constructor(@Optional() private messageService: MessageService, private readonly _log: Logger) {}
handle(params: MissingTranslationHandlerParams) { return params.key; }
}
@NgModule({
imports: [ TranslateModule ],
})
export class SharedModule {
constructor(ts: TranslateService, private readonly _log: Logger) {}
}
describe('SharedModule', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot({
missingTranslationHandler: { provide: MissingTranslationHandler, useClass: MyHandler },
useDefaultLang: false,
}),
],
providers: [{ provide: MessageService, useValue: { add: jest.fn() } }],
}).compileComponents();
});
it('should create', () => {
expect(SharedModule).toBeDefined();
});
}); |
* Add preset `babel` as transpilation alternative to `ts-jest` ([#317](https://github.com/thymikee/jest-preset-angular/pull/317)). | ||
|
||
#### Migration Guide | ||
* The preset reference in the jest config has to be updated from `"jest-preset-angular"` to `"jest-preset-angular/build/ts-jest"`. To use babel, replace `ts-jest` with `babel`. Furthermore, when using `ts-jest`, it has to be added as `devDependency` to the project, or `babel` packages alternatively (see README.md). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is not relevant now
### v8.1.0 | ||
|
||
#### Features | ||
* Add preset `babel` as transpilation alternative to `ts-jest` ([#317](https://github.com/thymikee/jest-preset-angular/pull/317)). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
* Add preset `babel` as transpilation alternative to `ts-jest` ([#317](https://github.com/thymikee/jest-preset-angular/pull/317)). | |
* Expose a new preset `jest-preset-angular/build/babel` for transforming files with Babel instead of `ts-jest` ([#317](https://github.com/thymikee/jest-preset-angular/pull/317)). |
Side note: would be nice if we could get rid of build
part, just jest-preset-angular/babel
– easy enough with re-exporting from top-level.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree. Maybe we can just publish the build
folder with the package.json
? Have to check out how other projects solve this.
@@ -19,6 +22,19 @@ npm install -D jest jest-preset-angular @types/jest | |||
|
|||
This will install `jest`, `@types/jest`, `ts-jest` as dependencies needed to run with Angular projects. | |||
|
|||
Additionally you need `babel` packages if you want to use `babel`. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please remove, no need to mention it here
Additionally you need `babel` packages if you want to use `babel`. |
@@ -19,6 +22,19 @@ npm install -D jest jest-preset-angular @types/jest | |||
|
|||
This will install `jest`, `@types/jest`, `ts-jest` as dependencies needed to run with Angular projects. | |||
|
|||
Additionally you need `babel` packages if you want to use `babel`. | |||
|
|||
### babel |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How about:
### babel | |
### jest-preset-angular/babel |
Additionally you need `babel` packages if you want to use `babel`. | ||
|
||
### babel | ||
`babel` uses the babel compiler to generate JavaScript, without type-checking your test files before doing so. This might result in a different test run performance. You can still run type-checking using `tsc --noEmit`. For additional TypeScript-supported language features you might have to install more babel packages. Note that `babel` also can differ slightly from `tsc`, e. g. in compiling a class to a function. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
`babel` uses the babel compiler to generate JavaScript, without type-checking your test files before doing so. This might result in a different test run performance. You can still run type-checking using `tsc --noEmit`. For additional TypeScript-supported language features you might have to install more babel packages. Note that `babel` also can differ slightly from `tsc`, e. g. in compiling a class to a function. | |
`babel` preset uses the Babel compiler to generate JavaScript without type-checking your test files before doing so. This might result in a different test run performance. You can still run type-checking using `tsc --noEmit`. For additional TypeScript-supported language features you might have to install more babel packages. Note that `babel` also can differ slightly from `tsc`, e.g. in compiling a class to a function. |
@viceice I tried out the tests and as soon as I add Maybe we can figure it out in this minimal repro: wtho/jpa-babel-bug |
@wtho Next bug wtho/jpa-babel-bug#2 |
While we have to wait for leonardfactory/babel-plugin-transform-typescript-metadata#24, you guys can help us by doing further tests on bigger codebases. Please try out the babel preset using a branch where I included the babel-plugin PR and the built js files (which would not be included normally checking out a git branch as npm dep).
(make sure you followed the other instructions in the jest-preset-angular/babel README) Please report any problems. Feel free to open issues on https://github.com/wtho/jpa-babel-bug Thanks! |
News: Angular 9 is out and they require |
Finally! |
Yes, but fixes one of my bugs by design. 😊 |
FYI: kulshekhar/ts-jest#1549 will be in alpha version of ts-jest (possibly today). You can test the alpha version and give some feedbacks for kulshekhar/ts-jest#1115 |
I guess we can close this issue since we have to use |
I think we can keep open just in case this gets interesting again. I'll make it a draft though. |
This would add an alternative compiling method alongside
ts-jest
.Done so far
babel
folderbabel
folder, which can be used viapreset: 'jest-preset-angular/babel'
in jest configbabel.config.js
load-html-transformer.js
to deal withhtml
filesinline-template.plugin.js
to do whatInlineFilesTransformer.ts
doests-jest
from dependencies, which means it would have to be be installed when using this preset withts-jest
from now onThe following libraries have to be installed alongside the project, when setting up jest-preset-angular + babel
@babel/core
@babel/preset-env
@babel/preset-typescript
@babel/plugin-proposal-decorators
@babel/plugin-proposal-class-properties
babel-plugin-transform-typescript-metadata
babel-plugin-const-enum
This would be especially interesting regarding some feedback from the community about speed difference in bigger projects. Babel does no TypeChecking in the
.test.ts
/.spec.ts
files itself, but going through the issues ofts-jest
(e. g. kulshekhar/ts-jest#1115, surely ahnpnl knows more) some projects are falling back toisolatedModules: true
already, which is also skipping the type checking. Furthermore type checks can still be achieved separately usingtsc --noEmit
.Personally I think we need some more restructuring in the preset to keep
ts-jest
andbabel
separated as two exclusive usage options, so this might take some time. I think this can land some time later this year.TODOs
ts-jest
andbabel
separated (see discussion in comments below)PluginInlineAngularTemplate
to also removestyleUrls
to behave like thets-jest
transformerCloses #308
Edit1: updated list of babel dependencies
Edit2: added TODO list
Edit3: update TODOs