-
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
FAQ for issues and solutions which can appear #79
Comments
Awesome you share this, thank you! There is Troubleshooting section on the Readme, where we can add extra information you provided. |
Probably we can create a Wiki for this project, and store all information there. I think put it into readme not a good idea. The main thing, that this wiki page should be well prepared for google, that other developers may just copy/paste error message and find a solution. |
in additional to first post
Issue for tracking angular/angular#15127 |
Could not find Angular Material core themeFull error message:
SolutionA possible fix is to trick angular material into thinking that the core theme is loaded by adding a selector to the JSDOM page in your declare var global: any;
const style = global.document.createElement('style');
style.innerHTML = `
.mat-theme-loaded-marker {
display: none;
}
`;
global.document.head.appendChild(style); This is an ugly workaround and will break if future versions of angular material do theme detection differently. |
Not an Angular developer, but rather node + TS. Still @thekip saved me a lot of headache with his 3. tip! 😍 Just here to say thank you! |
Thanks for warm words. Add couple thinks which figured out after updating to Angular 5 and latest material. Q: While testing components which used Material Design lib, you receive an error
A: Material Design library uses add this to Object.defineProperty(window, 'matchMedia', { value: () => (
{
matches : false,
addListener: () => { },
removeListener: () => { },
}
) }); Q: While testing components with animation in Angular 5 you receive an error:
Object.defineProperty(document.body.style, 'transform', {
value: () =>
({
enumerable: true,
configurable: true,
}),
}); |
The solution above no longer works (at least not for me) |
in you test you can set in providers this:
|
Hi all! I'm far from being a build/test expert, so I run into an issue with testing code using a WebWorker created with the Running the test gives me
I tried my best to make my way thru the docs - without success. Can somebody give me a hand? |
import meta is an ESM feature which doesn’t work with default NodeJs commonjs mode. You need to run Jest in ESM mode. you can check our documentation how to use ESM mode with Jest. |
Wow ... that was quick. I tried the following w/o success. Something more to do?
|
Only make sure you run Jest with node esm flag, run ngcc (or use our ngcc script), set tsconfig to use module ESNext. You can also check our |
Thank you so far ... I cannot find a difference. Using |
Having trouble using If i run
|
That sounds strange because under the hood that util script invokes the same way as |
yes, cleared local jest cache seems to fix my local tests, but having issues on ci. it's running inside ephemeral docker containers. Only the workspace is held but there is a git clean before any other commands. also currently no yarn cache involved. very strange 🤔 |
The script is optional to use anyways :) Its purpose was to remind others not to “forget”to run |
it's getting more strange. running it on ci fails with same error. when i then run the same docker image and jest command, it succeeds as it does locally. BTW: I'm using a nrwl nx workspace |
I think |
i think it's not an nx issue, as i'm running jest directly. I got it back working. I exclude the |
Seem like |
This is the tslib diff from v2.3.0 to v2.3.1. I'm not sure how this small change can cause those big issues 🤔 https://app.renovatebot.com/package-diff?name=tslib&from=2.3.0&to=2.3.1 |
I just corrected ESM tests in |
Has anyone found a way to enable this for a whole Nx monorepo? Visiting all tests and testbeds to add this |
Your tests use jest-preset-angular/examples/example-app-v12-monorepo/yarn.lock Lines 8441 to 8444 in ce41947
the |
I upgraded |
I would like to know how to handle this globally in an Nx repo, as well. Doing this for every component might be a challenge. |
Just an idea. You can create a
|
Hello everyone, maybe someone knows the reasons why this warning "Could not find Angular Material core theme.." may appear at all? Thank you in advance |
The warning comes from Angular Material itself. You can bypass it by
|
Here's one that I've encountered recently. Previously, our tsconfig had: "include": [
"**/*.spec.ts"
], We did this to minimize the surface area that jest processes (since the *.spec files are the entrypoints). This worked fine before migrating to ES modules. After migrating to ES modules, we started seeing some difficult-to-fix errors that seemed to indicate the interface imports are occasionally missing. For example:
The file has the exported interface The "fix" turned out to be updating tsconfig.spec.json to:
This seems to slow the tests down, but they work. There's a case to be made that this should be filed as a bug instead of an issue + solution, but as far as I can tell from looking at the code this is in the ts compiler, not jest-preset-angular. I have not been able to create a simple repro for this - it definitely doesn't happen for all interface imports. My theory is that it happens when there are multiple files importing the interface, and it may be a race condition related to ordering of file transformation. |
Here's another one that you'll probably run into when migrating to ES modules. When migrating to ESM, you'll need to add
The cause it that the type that |
I got this during latest update o the angular13, what can be the reason?
|
Hmm I haven't seen that one before, but I would start with checking your The missing of |
@Bjeaurn I take an example_v13 from this repository as an example and it's not reproduces there. But there are some differences for yarn install in them
I do not know what can cause this behaviour? Both installs happens on same machine, same yarn, without yarn.lock & root node_modules |
@Lonli-Lokli I would open a separate issue for that, lest this thread become a place to post new issues. The problem you're having is due to tslib requiring special handling. This is related to ESM vs CJS detection in jest, and the technique it uses doesn't match what tslib provides (I opened a bug on this in tslib). The fix is to override the path for tslib in |
While converting an Angular 12 app from Jasmine I am seeing some strange issues like...
here is the test...
|
@jbeckton - your describe should not be async; move the |
In last PrimeNg releases (> v16), they have added
Looks like JSDom is not supporting at-rules: jsdom/jsdom#2177. setup-jest.ts: function hideJsdomCssParsingIssue() {
const originalConsoleError = console.error;
const jsDomCssError = 'Error: Could not parse CSS stylesheet';
console.error = (...params) => {
if (!params.find(p => p.toString().includes(jsDomCssError))) {
originalConsoleError(...params);
}
};
} But I am not sure how to fix entirely this issue. |
@Trolejbus - I would look at the source for jsdom stylesheets.js. jsdom doesn't handle CSS, and doesn't do any layout. So it's not surprising that a DOM CSS method is stubbed out, thought I do find the error message a little surprising. If you need layout (or CSS) support for your test, move it to karma. |
@johncrim - I have created issue for it: #2194. Case here is that it is sounds like not an issue with jest-preset-angular itself, but it will occur when installing most recent angular with most recent primeng version and trying to use jest-preset-angular. So I believe it is very common setup. This issue is also reported for PrimeNg team: primefaces/primeng#14085 |
I've tried to migrate to es modules, as in v17 example, but haven't noticed performance improvements, it even work slower for me.
the issue is that overrides everything that has rxjs in path, for example angular
when I log the webSocket, I get
instead of
Not sure that is a proper way to fix it, I've added the following to
I've fixed it by adding following to
|
I think this not a secret that "Angular + Jest" isn't a popular solution. So it's quite hard to find any information in the internet if you face any problems.
I have a quite big project, (about 30mb in mono-repo) and while migrating to Jest I faced lot of issues which not described anywhere in the internet.
So my proposal, we can create a Wiki page on this github and start gather issues with solutions. To make use of Jest + Angular delightful and painless.
I can start from some:
Q:
ReferenceError: CSS is not defined
when testing components which used Material Design lib.A: Material Design library has a special check whether it run in browser environment or not. This check fails in
jsdom
, environment, because it's emulate browser, but not for all cases.add this to
setup-jest.ts
Q:
Could not find Angular Material core theme..
orCould not find HammerJS
when testing components which used Material Design lib.A: There few possible solutions, but most bulletproof:
add this to
setup-jest.ts
3: Q: When run with coverage get this errors
A: this errors appears only for index.ts files which has only import/export statements,actually I don't know why it happens (may be typescript compilation output is empty for this files), but as a workaround you can just add this
index.ts
files to coverage ignore pattern. Even more, thisindex.ts
files don't have any value for coveragepackage.json
A: Probably there is a require of file type which is not supported by Jest itself. For instance "png".
Follow jest documentation: https://facebook.github.io/jest/docs/en/webpack.html#content
The text was updated successfully, but these errors were encountered: