I'm having trouble typing decorators in two plugins (scopes):
import Fastify, { FastifyInstance } from 'fastify'
const fastify = Fastify()
// scope A
fastify.register((instance) => {
instance.decorate('utilA', 'AAA')
instance.get('/', (req, reply) => {
const data = instance.utilA // Property 'utilA' does not exist on type 'FastifyInstance<...>'
reply.send(data)
})
}, { prefix: '/A/' })
// scope B
fastify.register((instance) => {
instance.decorate('utilB', () => 'BBB')
instance.get('/', (req, reply) => {
const data = instance.utilB() // Property 'utilB' does not exist on type 'FastifyInstance<...>'
reply.send(data)
})
}, { prefix: '/B/' })
I can define types globally:
declare module 'fastify' {
interface FastifyInstance {
utilA: string
utilB: () => string
}
}
And it solves the compiler errors. But since utilA and utilB are defined globally compiler allows me to use utilB in the scope A and vice versa.
Is there a way to do the same but independently per scope?
No I do not think this is possible with the declare module '' syntax due to the way that TypeScript works (although someone smarter than me might be able to figure out how).
One thing you can do is create a sub type of the FastifyInstance with your new properties (they will need to be optional or TypeScript might get mad at you depending on your tsconfig settings) and type your plugins fastify instance with that type. For example:
// Scope A
import { FastifyInstance } from 'fastify';
type MyPluginsFastifyInstance = FastifyInstance & { myThing?: MyType; }
export default async (fastify: MyPluginFastifyInstance) => {
... // Implementation.
fastify.myThing // TypeScript is happy :)
}
// Scope B
export default async (fastify) => {
fastify.myThing // TypeScript is mad at you >:(
}
Related
I am reading a code like below:
import { MongoMemoryServer } from "mongodb-memory-server";
import mongoose from "mongoose";
import request from "supertest";
import { app } from "../app";
declare global {
function signin(): Promise<string[]>;
}
let mongo: any;
beforeAll(async () => {
process.env.JWT_KEY = "asdfasdf";
process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
const mongo = await MongoMemoryServer.create();
const mongoUri = mongo.getUri();
await mongoose.connect(mongoUri, {});
});
beforeEach(async () => {
const collections = await mongoose.connection.db.collections();
for (let collection of collections) {
await collection.deleteMany({});
}
});
afterAll(async () => {
if (mongo) {
await mongo.stop();
}
await mongoose.connection.close();
});
global.signin = async () => {
const email = "test#test.com";
const password = "password";
const response = await request(app)
.post("/api/users/signup")
.send({
email,
password,
})
.expect(201);
const cookie = response.get("Set-Cookie");
return cookie;
};
I can't understand the purpose of global.signin function and how does it work? I guess it has something to do with Jest but as long as I know the Jest codes should be inside the __test__ folder with the same file name and .test.ts extension. But the above function is defined and used inside the setup.ts file in the root of the application.
I also see some codes like following:
declare global {
namespace Express {
interface Request {
currentUser?: UserPayload;
}
}
}
In some .ts files of the project as well that I am not sure are these global variables the same as the other globals I mentioned above or these are different things? I am interested to know how this global variables work as well?
The piece of code you shared is making use of global augmentation https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation
// Hint typescript that your global object will have a custom signin function
declare global {
function signin(): Promise<string[]>;
}
// Assign value to global.signin
global.signin = async () => { /* implementation */ };
Likely one or multiple modules ("mongoose", "supertest", "../app") imported by the test file is using global.signin (or window.signin) at some point (or maybe one of their nested imports is => look for "signin(" in the project). Thus for testing purposes, global.signin needed to be mocked. However just adding global.signin = something would raise a typescript error, because signin is not a standard global variable. This is where declare global comes into play. It hints typescript that in your particular context, a signin function is expected to exist in global scope.
JavaScript/TypeScript running in node will try to resolve anything it can't find in the current local scope in global (the same way a browser would look in window). Any function or variable you can access globally (e.g. setTimeout()), can also be accessed with global. as prefix. It just makes it explicit.
What happens in your code are two things:
declare global {
function signin(): Promise<string[]>;
}
Here it tells typescript's type system that the global object also has a function called signin. This part is not required but it makes sense required for typescript to allow you to access / define that function, in JavaScript you simply define it.
https://www.typescriptlang.org/docs/handbook/declaration-merging.html has some details how declare works.
global.signin = async () => {
// code ...
};
And here it is actually added to the global object.
In JavaScript non strict mode you could even write (notice the lack of var/let/const/global.)
signin = async () => {
// code ...
};
I don't see signin getting used anywhere in that code so the reason for it is unclear to me. As long as the file that defines it gets loaded you can call the function simply by referring to it as signin(). The global. is added implicitly.
The purpose of
declare global {
namespace Express {
interface Request {
currentUser?: UserPayload;
}
}
}
is more practical, in express you may want to add properties to your requests that get added by middleware. By declaring that the Express Request has a property called currentUser you get to do
app.get((req, res) => {
const user: UserPayload = req.currentUser
...
})
without typescript complaining about an unknown property.
More on that for example https://blog.logrocket.com/extend-express-request-object-typescript/
I'm trying to use Jest in conjunction with ts-jest to write unit tests for a nodeJS server. I have something set up very similar to below:
impl.ts
export const dependency = () => {}
index.ts
import { dependency } from './impl.ts';
export { dependency };
consumer.ts
import { dependency } from '../impl' <- importing from index.ts
export const consumer = () => {
try {
dependecy();
return true;
} catch (error) {
return false;
}
}
consumer.test.ts
import * as dependencies from '../impl'
import { consumer } from './consumer'
const mockDependency = jest.spyOn(dependencies, 'depenedncy');
describe('function consumer', function () {
beforeEach(function () {
mockDependency.mockReturnValueOnce(false);
});
test('should return true', () => {});
})
This is just toy code, but the actual export / import / test files follow a similar structure. I'm getting typescript errors along these lines:
TS2769: No overload matches this call.
Specifically, that the method being spied on is not part of the overload of the import for dependencies, so I can't stub it out. I am doing literally the same thing in a different test file and it has no issues. Anyone know how to resolve the typing issue?
The issue turned out to be in the typing of the dependency function itself. The return value typing was incorrect and that was what was resulting in the Typescript error. Essentially I had this:
export const dependency: Handler = () => {
return () => {} <- is of type Handler
}
rather than this
export const dependency = (): Handler => {
return () => {} <- is of type Handler
}
Stupid mistake, hope it helps someone else in the future. My take away is that if you have a type error that doesn't make sense make sure you check the typing of all variables involved.
I am trying to setup testing for a node.js / typescript / apollo-server / typegrapql / typeorm project using jest, ts-jest and apollo-server-testing. My test server and client are setup like this:
import 'dotenv/config';
import { ApolloServer } from 'apollo-server-express';
import connectToDatabase from '../database/createConnection';
import buildApolloSchema from './buildApolloSchema';
import { createTestClient } from 'apollo-server-testing';
let server: ApolloServer;
let query: any; // <- Type here??
let mutate: any; // <- Type here??
export { server, query, mutate };
const setupTestEnvironment = async () => {
await connectToDatabase();
const schema = await buildApolloSchema();
if (schema) {
const server = new ApolloServer({
schema,
context: ({ req, res }) => ({
req,
res,
}),
});
const testClient = createTestClient(server);
query = testClient.query; // <- Error here: Avoid referencing unbound methods...
mutate = testClient.mutate; // <- Error here: Avoid referencing unbound methods...
}
};
Any idea of how can I type variables query and mutate to avoid implicit any errors? There seems to be some type inference but I don't seem to be able to import types from the apollo-server-testing package and so far I have left them as any (quickfix suggests never).
Right now the assignments at the end are also throwing the error Avoid referencing unbound methods which may cause unintentional scoping of this.
I have tried all sorts of destructuring assignments (including const {query, mutate} = createTestClient(server) as it appears in the docs) and I get the same error.
Any clues?
You should be able to type query and mutate with the types from apollo-server-testing like this:
import {
ApolloServerTestClient,
createTestClient,
} from "apollo-server-testing";
let server: ApolloServer;
let query: ApolloServerTestClient["query"];
let mutate: ApolloServerTestClient["mutate"];
The Avoid referencing unbound methods which may cause unintentional scoping of this. error is related to the way the types of createTestClient are defined. Since that's apollo-server-testing code, that's hard for you to resolve. Consider disabling the rule for these lines:
const testClient = createTestClient(server);
// eslint-disable-next-line #typescript-eslint/unbound-method
query = testClient.query;
// eslint-disable-next-line #typescript-eslint/unbound-method
mutate = testClient.mutate;
The root of the issue seems to be this definition in apollo-server-testing:
export interface ApolloServerTestClient {
query<TData = any, TVariables = Record<string, any>>(query: Query<TVariables>): Promise<GraphQLResponse<TData>>;
mutate<TData = any, TVariables = Record<string, any>>(mutation: Mutation<TVariables>): Promise<GraphQLResponse<TData>>;
}
If the definition would be like this, the rule shouldn't trigger:
export interface ApolloServerTestClient {
query: <TData = any, TVariables = Record<string, any>>(query: Query<TVariables>) => Promise<GraphQLResponse<TData>>;
mutate: <TData = any, TVariables = Record<string, any>>(mutation: Mutation<TVariables>) => Promise<GraphQLResponse<TData>>;
}
Edit: Related to issue 4724 in apollo-server-testing
I'm using Node with TypeScript, TypeDI and Jest.
I'm creating services that depend on each other, let's say:
#Service()
export class MainService{
constructor(private secondService: SecondService){}
public someMethod(someString: string) // implementation depends on secondService
}
#Service()
export class SecondService{
constructor(private thirdService: ThirdService){}
}
#Service()
export class ThirdService{
constructor(){}
}
I want to test MainService, but to instantiate it I need to pass dependency and that dependency needs another dependecy.
I tried to do this like, it works, but is ugly:
const secondService = new SecondService(new ThirdService());
jest
.spyOn(secondService, "someMethod")
.mockImplementation((someString: string) => {
// do something
return something;
});
const mainService = new MainService(secondService);
// use mainService in tests
Of course creating new instance of dependency is not always an option, and defienetly not an option when it has many dependencies.
I think it should look more like:
const secondService = SomeMockFactory.create(SecondService);
but i can't find any way to create mock while cutting off dependencies. I tried using
const secondService = jest.genMockFromModule("path/to/second/service");
but after trying to spyOn secondService methods TS is throwing error that "someMethod" is not a function.
What am I missing / doing wrong? Do I need some other library than Jest?
After a while I found out how to do this using default jest behaviour.
First, you need to create mock of SecondService in path/to/second/service/__mocks__, like:
// path/to/second/service/__mocks__/SecondService.ts
const mock = jest.fn().mockImplementation(() => ({
async thingSecondServiceDoInFirstService(
param: number
): number {
return 1;
}));
export default mock;
SecondService has to be default export, like:
// path/to/second/service/SecondService.ts
#Service()
export default class SecondService {
constructor(private thirdService: ThirdService) {}
async thingSecondServiceDoInFirstService(
param: number
): number {
return this.thirdService.thingThirdServiceDoInSecond(param);
}
}
In test file you have to use jest.mock before importing SecondService, and then create SecondService instance from mock:
jest.mock("path/to/second/service/SecondService");
import SecondService from "path/to/second/service/SecondService";
import MainService from "path/to/main/service/MainService";
describe("Test main service", () => {
const SecondServiceMock = <jest.Mock<SecondService>>SecondService;
let secondService = new SecondServiceMock();
beforeEach(() => {
mainService = new MainService(secondService);
});
// test logic...
}
As requested, ThirdService is not needed anymore.
I'm working on an experimental refactoring of my express app and chose to go with TypeScript as I prefer strong typing with any language. I saw the potential of using TypeScript's decorators as a powerful method to build a well-structured project as DRY as possible.
I'm having issues in accessing a property from a class that is extended by a class where I have the decorator set up.
example:
class BaseRouter {
app: express.Application = express;
// some other common stuff
}
function PostMethod(route: string = '/') {
return (target: BaseRouter, key: string, descriptor: PropertyDescriptor): void {
// This is where things don't work out
// descriptor.value correctly returns the RequestHandler which I can attach to express
// target.app is undefined
target.app.post(route, descriptor.value);
}
}
router.ts
#ResourceRouter() // <= this is optional, can I access all decorators inside the class from this decorator? That would also lead me to a solution
export class BlogRouter extends BaseRouter {
#GetMethod()
index(req, res) {
// req.send(...); return posts
}
#GetMethod('/:modelId')
show(req, res, next) {
// find req.params.modelId
}
#PostMethod()
createPost() {}
#DeleteMethod()
deletePost() {}
#UpdateMethod()
updatePost() {}
}
I know this is not perfect I'm just experimenting with decorators at the moment as I have successfully used them in other scenarios that works really well. Note that this is not in any way Angular 2+ related.