Closed cjohn001 closed 2 years ago
Could really need this too 😅
Isn't there already a PR for this https://github.com/kamilkisiela/apollo-angular/pull/1790
any idea what the timeline is for this, or should I try to make a project with an older version of angular
This is def needed pls
It's not a perfect solution but I've added an "overrides" property in my package.json and it allows me to successfully install apollo-angular with angular 14.
{
...
"dependencies": ...,
"devDependencies": ...,
"overrides": {
"apollo-angular": {
"@angular/core": "$@angular/core"
},
}
}
This requires npm 8.3 or greater to work. It effectively rewrites angular-apollo's @angular/core
to use whatever version is in the dependencies
field.
Also need this 🙏
https://github.com/kamilkisiela/apollo-angular/pull/1794
I'm having a hard time setting up Jest with Angular 14 and ESM. If you want to have Angular 14 support released, please help me with this one.
@kamilkisiela
I am also having a hard time with angular 14 and jest.
I have gotten my jest tests to run by modifying my jest config file for the given app/project to have an empty transformIgnorePatterns
property, below is my jest.config.ts
for my web project (using NX currently)
/* eslint-disable */
export default {
displayName: 'web',
preset: '../../jest.preset.js',
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
globals: {
'ts-jest': {
tsconfig: '<rootDir>/tsconfig.spec.json',
stringifyContentPathRegex: '\\.(html|svg)$',
},
},
coverageDirectory: '../../coverage/apps/web',
transform: {
'^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular',
},
transformIgnorePatterns: [],
snapshotSerializers: [
'jest-preset-angular/build/serializers/no-ng-attributes',
'jest-preset-angular/build/serializers/ng-snapshot',
'jest-preset-angular/build/serializers/html-comment',
],
};
This allows my tests to compile successfully. I haven't had any luck with dependency injection working in my components for code that's been generated by the graphql-codegen cli tools.
If I manually pass in a crafted GQL call I can get it to work, below you can see i set the table query property to new WatchUsersQueryGQL(apollo);
and this works as expected:
eg:
// ... imports
import { TableComponent } from './table.component';
describe('TableComponent', () => {
let controller: ApolloTestingController;
let component: TableComponent;
let fixture: ComponentFixture<TableComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [TableComponent],
imports: [ApolloTestingModule],
providers: [],
}).compileComponents();
fixture = TestBed.createComponent(TableComponent);
component = fixture.componentInstance;
const apollo = TestBed.inject(Apollo);
component.query = new WatchUsersQueryGQL(apollo);
fixture.detectChanges();
controller = TestBed.inject(ApolloTestingController);
});
it('should create', () => {
component.query
.watch()
.valueChanges.pipe(take(1))
.subscribe((response) => {
expect(response.data.rows.length).toBeTruthy();
expect(response.data.agg.count.value).toBeTruthy();
});
const op = controller.expectOne(WatchUsersQueryDocument);
op.flush({
data: {
rows: [
{
id: 1,
avatar_url: null,
email: 'example@example.com',
full_name: 'Chris Tunbridge',
last_login: '2020-01-01T00:00:00.000Z',
created_at: '2020-01-01T00:00:00.000Z',
},
],
agg: {
count: {
value: 1,
},
},
},
});
controller.verify();
});
});
I may need to instantiate my providers for other components and inject them manually to make them work better.
I would love to see more documentation and examples around testing.
edit: remove email address
If somebody solves it, please submit a PR
It's not a perfect solution but I've added an "overrides" property in my package.json and it allows me to successfully install apollo-angular with angular 14.
{ ... "dependencies": ..., "devDependencies": ..., "overrides": { "apollo-angular": { "@angular/core": "$@angular/core" }, } }
This requires npm 8.3 or greater to work. It effectively rewrites angular-apollo's
@angular/core
to use whatever version is in thedependencies
field.
I had to do this for now to get my app to work with angular 14.
Trying this config from jest-esm-isolated.config.mjs
import ngPreset from 'jest-preset-angular/presets/index.js';
export default {
...ngPreset.defaultsESM,
rootDir: '.',
extensionsToTreatAsEsm: ['.ts'],
moduleFileExtensions: ["ts", "js", "json", "mjs"],
globals: {
'ts-jest': {
...ngPreset.defaultsESM.globals["ts-jest"],
tsconfig: '<rootDir>/tsconfig.test.json',
isolatedModules: true,
}
},
globalSetup: 'jest-preset-angular/global-setup.js',
moduleNameMapper: {
'^apollo-angular': '<rootDir>/src',
tslib: '<rootDir>/../../node_modules/tslib/tslib.es6.js',
rxjs: '<rootDir>/../../node_modules/rxjs/dist/bundles/rxjs.umd.js',
'rxjs/operators': '<rootDir>/node_modules/rxjs/dist/bundles/rxjs.umd.js',
},
testRegex: '\\.spec\\.ts$',
setupFilesAfterEnv: ['<rootDir>/tests/_setup.ts'],
collectCoverage: false,
verbose: false,
errorOnDeprecated: true,
testEnvironmentOptions: {
url: 'http://localhost/',
},
testEnvironment: 'jsdom'
};
Got an error below
apollo-angular git:(kamil-angular-14) ✗ yarn test
yarn run v1.22.17
$ yarn workspaces run test
> apollo-angular
$ yarn node --experimental-vm-modules $(yarn bin jest)
(node:96098) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
Determining test suites to run...
ngcc-jest-processor: running ngcc
(node:96103) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:96104) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:96105) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:96108) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:96106) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:96109) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:96107) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
FAIL testing/tests/operation.spec.ts
● Test suite failed to run
SyntaxError: The requested module '@apollo/client/core' does not provide an export named 'ApolloLink'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
FAIL testing/tests/module.spec.ts
● Test suite failed to run
SyntaxError: The requested module './types' does not provide an export named 'Flags'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 4)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 4)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 4)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 5)
FAIL schematics/tests/ng-add.spec.ts
● Test suite failed to run
Cannot find module '/Users/siwatkaolueng/apollo-angular/node_modules/@schematics/angular/utility/test.js' from 'schematics/tests/ng-add.spec.ts'
at Resolver._throwModNotFoundError (../../node_modules/jest-resolve/build/resolver.js:491:11)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 4)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 4)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 4)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 5)
FAIL schematics/tests/migration-v2.spec.ts
● Test suite failed to run
Cannot find module '/Users/siwatkaolueng/apollo-angular/node_modules/@schematics/angular/utility/test.js' from 'schematics/tests/migration-v2.spec.ts'
at Resolver._throwModNotFoundError (../../node_modules/jest-resolve/build/resolver.js:491:11)
FAIL persisted-queries/tests/persisted-queries.spec.ts
● Test suite failed to run
SyntaxError: The requested module '@apollo/client/core' does not provide an export named 'ApolloLink'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
FAIL testing/tests/integration.spec.ts
● Test suite failed to run
SyntaxError: The requested module './types' does not provide an export named 'Flags'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
FAIL headers/tests/index.spec.ts
● Test suite failed to run
SyntaxError: The requested module '@apollo/client/core' does not provide an export named 'ApolloLink'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
FAIL tests/index.spec.ts
● Test suite failed to run
SyntaxError: The requested module './types' does not provide an export named 'Flags'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
FAIL http/tests/ssr.spec.ts
● Test suite failed to run
SyntaxError: The requested module '@apollo/client/core' does not provide an export named 'ApolloLink'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
FAIL tests/integration.spec.ts
● Test suite failed to run
SyntaxError: The requested module './types' does not provide an export named 'Flags'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
FAIL http/tests/http-link.spec.ts
● Test suite failed to run
SyntaxError: The requested module './types' does not provide an export named 'Flags'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
FAIL schematics/tests/utils.spec.ts
● Test suite failed to run
ReferenceError: __dirname is not defined
6 | } from '@angular-devkit/schematics/testing';
7 |
> 8 | const collectionPath = join(__dirname, '../collection.json');
| ^
9 |
10 | export async function createTestApp(appOptions = {}): Promise<UnitTestTree> {
11 | const runner = new SchematicTestRunner('apollo-angular', collectionPath);
at schematics/utils/test.ts:8:29
FAIL tests/Subscription.spec.ts
● Test suite failed to run
SyntaxError: The requested module './types' does not provide an export named 'Flags'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
FAIL http/tests/http-batch-link.spec.ts
● Test suite failed to run
SyntaxError: The requested module '@apollo/client/core' does not provide an export named 'ApolloLink'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
FAIL tests/Query.spec.ts
● Test suite failed to run
SyntaxError: The requested module './types' does not provide an export named 'Flags'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
FAIL tests/QueryRef.spec.ts
● Test suite failed to run
SyntaxError: The requested module '@apollo/client/testing' does not provide an export named 'mockSingleLink'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
FAIL tests/Mutation.spec.ts
● Test suite failed to run
SyntaxError: The requested module './types' does not provide an export named 'Flags'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
FAIL tests/Apollo.spec.ts
● Test suite failed to run
SyntaxError: The requested module './types' does not provide an export named 'Flags'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
Test Suites: 18 failed, 18 total
Tests: 0 total
Snapshots: 0 total
Time: 2.347 s
Ran all test suites.
error Command failed.
Exit code: 1
Command: /usr/local/bin/node
Arguments: --experimental-vm-modules /Users/siwatkaolueng/apollo-angular/node_modules/.bin/jest
Directory: /Users/siwatkaolueng/apollo-angular/packages/apollo-angular
Output:
info Visit https://yarnpkg.com/en/docs/cli/node for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1
Command: /usr/local/bin/node
Arguments: /opt/homebrew/Cellar/yarn/1.22.17_2/libexec/lib/cli.js run test
Directory: /Users/siwatkaolueng/apollo-angular/packages/apollo-angular
Output:
info Visit https://yarnpkg.com/en/docs/cli/workspaces for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I have no idea why error occur.
It seems there is https://github.com/kamilkisiela/apollo-angular/pull/1794 from @kamilkisiela to bring us the solution :) Let's give him some time.
@kamilkisiela let us know if you need anything from the community to help on it.
Totally missed it. I will have a look onto this :) Thanks for your work!
I've been working on it and I could move forward by doing some changes I have 45 tests passed from 48 with 11 failed suite tests.
These are the errors I'm having now. I could reduce a lot the number of errors from the begining.
You can see all the changes i've done here: https://github.com/ruizmarc/apollo-angular/tree/kamil-angular-14
@perjerz Maybe some of the changes I've done allows you to move forward.
@kamilkisiela I hope the progress can help you :) I will try to dig a bit more onto this, but I do not have plenty of time...
PASS persisted-queries/tests/persisted-queries.spec.ts
PASS testing/tests/operation.spec.ts
FAIL testing/tests/module.spec.ts
● Test suite failed to run
SyntaxError: The requested module './types' does not provide an export named 'Flags'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 4)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 4)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 4)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/ng-add.spec.ts.
at async Promise.all (index 5)
FAIL schematics/tests/ng-add.spec.ts
● Test suite failed to run
Cannot find module '/Users/marcruiz/Work/apollo-angular/node_modules/@schematics/angular/utility/test.js' from 'schematics/tests/ng-add.spec.ts'
at Resolver._throwModNotFoundError (../../node_modules/jest-resolve/build/resolver.js:491:11)
PASS headers/tests/index.spec.ts
FAIL testing/tests/integration.spec.ts
● Test suite failed to run
SyntaxError: The requested module './types' does not provide an export named 'Flags'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
FAIL http/tests/http-link.spec.ts
● Test suite failed to run
SyntaxError: The requested module './types' does not provide an export named 'Flags'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
FAIL tests/index.spec.ts
● Test suite failed to run
SyntaxError: The requested module './types' does not provide an export named 'Flags'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 4)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 4)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 4)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 5)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From schematics/tests/migration-v2.spec.ts.
at async Promise.all (index 5)
FAIL schematics/tests/migration-v2.spec.ts
● Test suite failed to run
Cannot find module '/Users/marcruiz/Work/apollo-angular/node_modules/@schematics/angular/utility/test.js' from 'schematics/tests/migration-v2.spec.ts'
at Resolver._throwModNotFoundError (../../node_modules/jest-resolve/build/resolver.js:491:11)
FAIL tests/Subscription.spec.ts
● Test suite failed to run
SyntaxError: The requested module './types' does not provide an export named 'Flags'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
FAIL tests/integration.spec.ts
● Test suite failed to run
SyntaxError: The requested module './types' does not provide an export named 'Flags'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
FAIL tests/Query.spec.ts
● Test suite failed to run
SyntaxError: The requested module './types' does not provide an export named 'Flags'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
FAIL tests/Mutation.spec.ts
● Test suite failed to run
SyntaxError: The requested module './types' does not provide an export named 'Flags'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
FAIL tests/Apollo.spec.ts
● Test suite failed to run
SyntaxError: The requested module './types' does not provide an export named 'Flags'
at Runtime.linkAndEvaluateModule (../../node_modules/jest-runtime/build/index.js:828:5)
PASS schematics/tests/utils.spec.ts
PASS tests/QueryRef.spec.ts
PASS http/tests/http-batch-link.spec.ts
Test Suites: 11 failed, 1 skipped, 6 passed, 17 of 18 total
Tests: 3 skipped, 45 passed, 48 total
Snapshots: 0 total
Time: 2.282 s
Ran all test suites.
error Command failed.
Exit code: 1
Any update on this? Did you manage to set up Jest in conjunction with Angular 14?
I'm waiting for a PR from community
A big thank you for those who can fix this issue 👍🏽
@kamilkisiela I have successfully upgraded to Angular 14 with yarn test and yarn build passing locally on my machine: #1803
Hopefully it also passes your CI pipe
@AshkanHovold : As I unfortunately cannot help on the issue here I am currently trying the override variant you mentioned. I have seen in kamilkisiela's patch that there were several more angular and also other packages including dev dependencies updated. Have you overwritten those as well? Or just the single angular package? And is the library then still working for you as expected? Thanks for your help!
For anyone else tracking this issue I was just able to get things building (until #1794 or #1803 are merged at least) using Node version 16.14 -- 16.15 and later all cause the peer dependency issues.
Obviously not an ideal fix, but may be an adequate band-aid for some.
4.0.0
I am getting the following error when using jest with ESM:
SyntaxError: The requested module '@apollo/client/core' does not provide an export named 'ApolloLink'
Anyone has an idea on how to solve this? I am on "apollo-angular": "6.0.0" and "@apollo/client": "3.9.11". Any help would be appreciated.
Currently the package seems to only support Angular 13.x. Please upgrade the package to allow for usage with Angular 14.
npm ERR! Could not resolve dependency: npm ERR! peer @angular/core@"^12.0.0 || ^13.0.0" from apollo-angular@3.0.1 npm ERR! node_modules/apollo-angular npm ERR! apollo-angular@"3.0.1" from the root project