Joseph O'Shea

Adding jest testing to Create Apollo App

apollojesttestingtypescript

Overview

The goal of this post is to show you how to take an app created with Create Apollo App and add testing with jest

This requires some changes to the configuration

Let's get started!

Outline

bonus:

Initial setup - basic server with create-apollo-app

First, create your apollo app:

yarn create apollo-app add-jest-to-apollo-app

Choose template "server"

Enter our new project directory and create a git repo

cd add-jest-to-apollo-app
git init

create-apollo-app does not provide a .gitignore file. So create one and add the contents from this template file. We will also want to add an additional line to ignore the build/ directory.

Now, add and commit:

git add .
git commit -m 'Initial commit - using create-apollo-app with "server" template'

Run the server

Run the server with

yarn start

This will open your browser to http://localhost:8080/api/swagger which results in an error Cannot GET /api/swagger. However, if you open http://localhost:8080/graphiql instead, you should see the GraphQL sandbox where you can test out queries

Fixing errors

At the time of writing, when I run yarn start I see the following errors:

ERROR in /Users/joey/dev/flux-labs/blog-demos/add-jest-to-apollo-app/src/server.ts(17,23):
TS2339: Property 'url' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'.
ERROR in /Users/joey/dev/flux-labs/blog-demos/add-jest-to-apollo-app/src/server.ts(17,44):
TS2339: Property 'url' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'.
ERROR in /Users/joey/dev/flux-labs/blog-demos/add-jest-to-apollo-app/src/server.ts(20,13):
TS2339: Property 'setHeader' does not exist on type 'Response<any, Record<string, any>>'.
ERROR in /Users/joey/dev/flux-labs/blog-demos/add-jest-to-apollo-app/src/server.ts(21,13):
TS2339: Property 'write' does not exist on type 'Response<any, Record<string, any>>'.
ERROR in /Users/joey/dev/flux-labs/blog-demos/add-jest-to-apollo-app/src/server.ts(22,13):
TS2339: Property 'end' does not exist on type 'Response<any, Record<string, any>>'.

While the server still seems to work, there is a simple solution to get rid of these. Simply open package.json and update the TypeScript version to

"typescript": "4.7.4",

(this version works at the time of writing, you may need to use a different version in the future)

and run yarn install to update your dependencies. Now running yarn start should give no error.

Note: this will lead to a peer dependency warning:

warning " > fork-ts-checker-webpack-plugin@0.5.2" has incorrect peer dependency "typescript@^2.1.0 || ^3.0.0".

For the purposes of this example we can ignore this for now. If you'd like to solve it, we can fix it by upgrading fork-ts-checker-webpack-plugin to 1.0.0 which is compatible with typescript 4.7.4 - update package.json:

"fork-ts-checker-webpack-plugin": "^1.0.0",

If you're curious how I figured out which version of fork-ts-checker-webpack-plugin to use, check out my blog post on how to find compatible versions to resolve peer dependency issues.

Optional - add remote and push

If you would like, create a repository on github or gitlab and push.

For example, my repo is

git@github.com:joshea0/example-add-jest-to-apollo-app.git

So I run

git remote add origin git@github.com:joshea0/example-add-jest-to-apollo-app.git
git push --set-upstream origin main

You will have to replace git@github.com:joshea0/example-add-jest-to-apollo-app.git with the appropriate value for your repository

Adding jest

Initial jest setup

For this we will follow the offical jest docs:

Install jest and other dependencies

yarn add --dev jest @types/jest ts-jest

Create a new file jest.config.js with the contents:

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node'
};

Add a test command to package.json under scripts

--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
   "private": true,
   "scripts": {
     "start": "zen start",
-    "build": "zen build"
+    "build": "zen build",
+    "test": "jest"

Let's create a simple test in src/resolvers.spec.ts

import resolvers from './resolvers';

describe('resolver queries', () => {
    describe('hello', () => {
        it('returns the expected string', () => {
            const hello = resolvers.Query.hello

            const message = hello(null, { subject: 'jest'})
            expect(message).toBe(`Hello, jest! from Server`)
        })
    })
})

Try running it:

yarn test

You should see:

$ yarn test
yarn run v1.22.19
$ jest
 PASS  src/resolvers.spec.ts
  resolver queries
    hello
      ✓ returns the expected string (3 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.295 s, estimated 4 s
Ran all test suites.
✨  Done in 3.53s.

That's it!

Now we have jest working alongside our Apollo app. We can write more tests alongside our server code as we develop it.