Adds TypeScript usage validation

package.json

@@ -12,11 +12,12 @@
     "start": "cross-env NODE_ENV=development rollup -c rollup.config.ts -w",
     "clean": "rimraf lib node/**/*.js",
     "lint": "eslint \"{cli,config,src,test}/**/*.ts\"",
-    "build": "yarn clean && cross-env NODE_ENV=production rollup -c rollup.config.ts",
+    "build": "yarn clean && yarn lint && cross-env NODE_ENV=production rollup -c rollup.config.ts && yarn test:ts",
     "test": "yarn test:unit && yarn test:integration",
     "test:unit": "cross-env BABEL_ENV=test jest --runInBand",
     "test:integration": "node --max_old_space_size=8000 node_modules/jest/bin/jest.js --config=test/jest.config.js --runInBand",
     "test:smoke": "config/scripts/smoke.sh",
+    "test:ts": "tsc -p test/typings/tsconfig.json",
     "test:focused": "node node_modules/ts-node/dist/bin.js --project=test/tsconfig.json test/focusedTest.ts",
     "prepublishOnly": "yarn lint && yarn test:unit && yarn build && yarn test:integration"
   },

src/context/errors.ts

@@ -22,6 +22,6 @@ export const errors = <
     const prevBody = jsonParse(res.body) || {}
     const nextBody = mergeRight(prevBody, { errors: errorsList })
 
-    return json(nextBody)(res)
+    return json(nextBody)(res as any) as any
   }
 }

src/context/json.ts

@@ -12,10 +12,10 @@ import { ResponseTransformer } from '../response'
  */
 export const json = <BodyTypeJSON>(
   body: BodyTypeJSON,
-): ResponseTransformer<string> => {
+): ResponseTransformer<BodyTypeJSON> => {
   return (res) => {
     res.headers.set('Content-Type', 'application/json')
-    res.body = JSON.stringify(body)
+    res.body = JSON.stringify(body) as any
 
     return res
   }

src/graphql.ts

@@ -14,7 +14,7 @@ function createScopedGraphQLHandler(
   url: Mask,
 ) {
   return <
-    QueryType,
+    QueryType extends Record<string, any>,
     VariablesType extends GraphQLVariablesType = GraphQLVariablesType
   >(
     operationName: GraphQLHandlerNameSelector,
@@ -29,7 +29,7 @@ function createScopedGraphQLHandler(
 
 function createGraphQLOperationHandler(url: Mask) {
   return <
-    QueryType,
+    QueryType extends Record<string, any>,
     VariablesType extends GraphQLVariablesType = GraphQLVariablesType
   >(
     resolver: ResponseResolver<

src/handlers/RestHandler.ts

@@ -76,8 +76,9 @@ export type RequestQuery = {
 }
 
 export interface RestRequestType<
+  BodyType extends DefaultRequestBodyType = DefaultRequestBodyType,
   ParamsType extends RequestParams = Record<string, any>
-> extends MockedRequest {
+> extends MockedRequest<BodyType> {
   params: ParamsType
 }
 
@@ -146,7 +147,7 @@ ${queryParams
   protected getPublicRequest(
     request: RequestType,
     parsedResult: ParsedResult,
-  ): RestRequestType<RequestParams> {
+  ): RestRequestType<any, RequestParams> {
     return {
       ...request,
       params: parsedResult.params,

src/index.ts

@@ -38,6 +38,10 @@ export { graphql } from './graphql'
 export {
   GraphQLHandler,
   GraphQLContext,
+  GraphQLVariablesType,
+  GraphQLRequestType,
+  GraphQLRequestBodyType,
+  GraphQLJsonRequestBody,
   graphqlContext,
 } from './handlers/GraphQLHandler'
 

src/rest.ts

@@ -16,13 +16,13 @@ function createRestHandler(method: RESTMethods) {
     /**
      * @fixme Propagate request body type generic to the handler.
      */
-    RequestBodyType = DefaultRequestBodyType,
-    ResponseBodyType = any,
+    RequestBodyType extends DefaultRequestBodyType = DefaultRequestBodyType,
+    ResponseBodyType extends DefaultRequestBodyType = any,
     RequestParamsType extends RequestParams = RequestParams
   >(
     mask: Mask,
     resolver: ResponseResolver<
-      RestRequestType<RequestParamsType>,
+      RestRequestType<RequestBodyType, RequestParamsType>,
       RestContext,
       ResponseBodyType
     >,

test/typings/graphql.test-d.ts

@@ -0,0 +1,52 @@
+import { graphql } from 'msw'
+
+graphql.query<{ key: string }>('', (req, res, ctx) => {
+  return res(
+    ctx.data(
+      // @ts-expect-error Response data doesn't match the query type.
+      {},
+    ),
+  )
+})
+
+graphql.query<
+  { key: string },
+  // @ts-expect-error `null` is not a valid variables type.
+  null
+>('', (req, res, ctx) => {
+  return res(ctx.data({ key: 'pass' }))
+})
+
+graphql.mutation<{ key: string }>('', (req, res, ctx) =>
+  res(
+    ctx.data(
+      // @ts-expect-error Response data doesn't match the query type.
+      {},
+    ),
+  ),
+)
+
+graphql.mutation<
+  { key: string },
+  // @ts-expect-error `null` is not a valid variables type.
+  null
+>('', (req, res, ctx) => {
+  return res(ctx.data({ key: 'pass' }))
+})
+
+graphql.operation<{ key: string }>((req, res, ctx) => {
+  return res(
+    ctx.data(
+      // @ts-expect-error Response data doesn't match the query type.
+      {},
+    ),
+  )
+})
+
+graphql.operation<
+  { key: string },
+  // @ts-expect-error `null` is not a valid variables type.
+  null
+>((req, res, ctx) => {
+  return res(ctx.data({ key: 'pass' }))
+})

test/typings/rest.test-d.ts

@@ -0,0 +1,39 @@
+import { rest } from 'msw'
+
+rest.get<{ userId: string }, { postCount: number }>(
+  '/user',
+  (req, res, ctx) => {
+    req.body.userId
+
+    // @ts-expect-error `session` property is not defined on the request body type.
+    req.body.session
+
+    res(
+      // @ts-expect-error JSON doesn't match given response body generic type.
+      ctx.json({ unknown: true }),
+    )
+
+    res(
+      // @ts-expect-error value types do not match
+      ctx.json({ postCount: 'this is not a number' }),
+    )
+
+    return res(ctx.json({ postCount: 2 }))
+  },
+)
+
+rest.get<any, any, { userId: string }>('/user/:userId', (req, res, ctx) => {
+  req.params.userId
+
+  // @ts-expect-error `unknown` is not defined in the request params type.
+  req.params.unknown
+})
+
+rest.post<// @ts-expect-error `null` is not a valid request body type.
+null>('/submit', () => null)
+
+rest.get<
+  any,
+  // @ts-expect-error `null` is not a valid response body type.
+  null
+>('/user', () => null)

test/typings/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "Node",
+    "lib": ["dom"],
+    "baseUrl": ".",
+    "paths": {
+      "msw": ["../../"]
+    }
+  },
+  "include": ["../../global.d.ts", "**/*.test-d.ts"],
+  "exclude": ["node_modules"]
+}