How To Unit Test NextJS API Route That Uses Repository Pattern? - next.js

I am new prisma / nextjs user and I am trying to understand how to unit test an API route that uses prisma. I have read the unit testing guide.
I like the dependency injection approach and have started trying to implement it. However I am struggling with the following development issue. Can anybody help?
With the dependency injection approach the unit testing guide explains how to setup the mock context and use this in the data access layer. Does anyone have any examples of how and where the real context could be initialised and used with an API route that uses a repository pattern? Is it possible to expand the next.js api handler with middleware to include the context to facilitate testing?
import type { NextApiRequest, NextApiResponse } from 'next'
import { PublishRepository } from '../../../repository'
// PUT /api/publish/:id
export default async function handle(
req: NextApiRequest,
res: NextApiResponse
) {
if (req.method == 'PUT') {
const postId = req.query.id;
let repo = new PublishRepository( // where does the live context come from and how is it initialised??? )
const post = repo.set_published(postId)
res.json(post);
}
}
Repository - Initialised using Context instance - How is this initialise for development and how is it mocked?
import { Post, PrismaClient } from "#prisma/client"
import { Context } from "../context"
import prisma from "lib/prisma"
export class PublishRepository {
private prisma: PrismaClient
constructor(context: Context) {
this.prisma = context.prisma
}
async set_published(post_id: string | string[]): Promise<Post> {
return await prisma.post.update({
where: { id: Number(post_id) },
data: { published: true },
});
}
}

Related

Next.js 13 - Idiomatic access of route params on edge API functions

I'm trying to understand more about dynamic APIs with Next.
Specifically, I'm working on an Edge functions w/ native web APIs. ^1
The documentation for next handlers suggests the idiomatic way to get the dynamic component from a route is to use req.query. ^2
query does't exist on a Node request, however.
// pages/api/user/[id].ts
import { jsonResponse } from "src/utils/jsonResponse";
export const config = {
runtime: 'edge',
}
export default async function handler(
req: Request,
) {
const {id} = req.query // doesn't work because query isn't on the request
}
This makes sense to me since the id isn't actually a query parameter, but part of the route.
So, now I'm on a standard web question I guess, but in the context of Next and I'm curious if there's an idiomatic way to do this.
Right now, my solution is:
// pages/api/user/[id].ts
import { jsonResponse } from "src/utils/jsonResponse";
export const config = {
runtime: 'edge',
}
export default async function handler(
req: Request,
) {
const { searchParams, pathname, } = new URL(req.url)
const parts = pathname.split('/')
const id = parts.pop();
}

Next js - Next Auth - Keep having error=OAuthCreateAccount (google provider)

I have set up next-auth with the GoogleProvider.
Everything works fine locally, however in production, I am having aOAuthCreateAccount error: api/auth/signin?error=OAuthCreateAccount
stating "Try signing in with a different account."
I have provided the ID & Secret of the Provider, I have dropped my DB, tried to log with multiples accounts... I do not understand. Is there something that my production environment is not accessing?
Here's my nextauth.js:
`
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import CredentialsProvider from "next-auth/providers/credentials";
import { MongoDBAdapter } from "#next-auth/mongodb-adapter";
import clientPromise from "../../../lib/mongodb";
export default NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
// ...add more providers here
],
secret: process.env.NEXTAUTH_SECRET,
// Can custom page & path
pages: {
signOut: "/auth/signout",
error: "/auth/error", // Error code passed in query string as ?error=
verifyRequest: "/auth/verify-request", // (used for check email message)
// newUser: "/auth/new-user", // New users will be directed here on first sign in (leave the property out if not of interest)
newUser: "/recruiter/2", // New users will be directed here on first sign in (leave the property out if not of interest)
},
adapter: MongoDBAdapter(clientPromise),
});
`
And my mongodb.js:
`
import { MongoClient } from "mongodb";
const uri = process.env.MONGODB_URI;
const options = {
useUnifiedTopology: true,
useNewUrlParser: true,
};
let client;
let clientPromise;
if (!process.env.MONGODB_URI) {
throw new Error("Please add your Mongo URI to .env.local");
}
if (process.env.NODE_ENV === "development") {
// In development mode, use a global variable so that the value
// is preserved across module reloads caused by HMR (Hot Module Replacement).
if (!global._mongoClientPromise) {
client = new MongoClient(uri, options);
global._mongoClientPromise = client.connect();
}
clientPromise = global._mongoClientPromise;
} else {
// In production mode, it's best to not use a global variable.
client = new MongoClient(uri, options);
clientPromise = client.connect();
}
// Export a module-scoped MongoClient promise. By doing this in a
// separate module, the client can be shared across functions.
export default clientPromise;
`
Thank you!
Read the documentations.
Look on Stackoverflow and github thread, tried all the offered solutions, in vain.
I have managed to fix it reading this thorough article: https://medium.com/geekculture/why-and-how-to-get-started-with-next-auth-61740558b45b
I was missing the database variable in my deployment system (vercel) :)

How to use runtime config in composable?

I want to do this
composables/apiFetch.ts
import { $fetch } from 'ohmyfetch'
export const useApiFetch = $fetch.create({ baseURL: useRuntimeConfig().apiUrl })
And use it within Pinia so I don't repeat myself writing $fetch.create over and over again for every single API call.
somewhere_in_pinia.ts
...TRIM...
actions: {
async doSomething(payload: SomeNicePayload): Promise<void> {
const response = await useApiFetch('/something', { method: 'POST', body: payload })
}
}
...TRIM...
But Nuxt won't allow me
[nuxt] [request error] nuxt instance unavailable
at useNuxtApp (/D:/XXXX/frontend/prms-fe/.nuxt/dist/server/server.mjs:472:13)
at Module.useRuntimeConfig (/D:/XXXX/frontend/prms-fe/.nuxt/dist/server/server.mjs:480:10)
at $id_Yl353ZXbaH (/D:/XXXX/frontend/prms-fe/.nuxt/dist/server/server.mjs:38358:90)
at async __instantiateModule__ (/D:/XXXX/frontend/prms-fe/.nuxt/dist/server/server.mjs:40864:3)
I have been looking for solution online, followed instruction from the official discussion to no avail.
EDIT
I don't want to use Nitro, since my backend is already written on Laravel. I need to access the host without re-typing it all over the place so I thought I could use .env and runtimeConfig.
you are trying to access Nuxt instance while it's not ready yet. To make it work, write your composable as a function :
import { $fetch } from 'ohmyfetch'
export const useApiFetch = (url, params) => {
const instance = $fetch.create({ baseURL: useRuntimeConfig().apiUrl })
return instance(url, params)
}

How to configure apollo server with meteor with the meteor/apollo package?

I'm trying to build an app with meteor, apollo/graphql for the first time and the tutorial I'm watching might have outdated versions of apollo. I set up my server as:
import { createApolloServer } from "meteor/apollo";
import { makeExecutableSchema } from "graphql-tools";
const typeDefs = `
type Query {
hi: String
}
`;
const resolvers = {
Query: {
hi() {
return "Hello world";
}
}
};
const schema = makeExecutableSchema({
typeDefs,
resolvers
});
createApolloServer({ schema });
However I usually get this as an error:
TypeError: graphqlExpress is not a function
I know it has to do with the apollo package, but I don't know how to get the migration changes made for apollo 2.0.0 into the meteor/apollo file from the migration doc on apollo's site. Any help is appreciated!

Jest Test - The current environment does not support the specified persistence type

I use jest to run some test on my Create React App with Firebase Web SDK coupled with FirebaseUI
Whenever I try to run some tests with --env=jsdom - I run into :
The current environment does not support the specified persistence type. seems related to Auth
Are there any known related issue/workaround ? the code seems to work/compile properly aside from the tests.
Google didn't help much
Here is the test, pretty basic.
HAd to add import "firebase/storage"; because of this : firebase.storage() is not a function in jest test cases
Thanks in advance
import React from "react";
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import "firebase/storage";
import {filterIngredientsToRemove} from "./shoppingList-reducer";
Enzyme.configure({adapter: new Adapter()});
describe("", () => {
let shoppingList;
let recipeId;
beforeEach(() => {
shoppingList = {
shoppingListItems: {
"1234": {ingredientId: 987, name: "patate", recipeId: 1234},
"2345": {ingredientId: 987, name: "patate", recipeId: 5432}
},
shoppingListRecipes: {
"1234": {portion: 3}
}
};
recipeId = 1234;
});
it("should filter out the shoppinglistItems with the provided recipeId", () => {
const result = filterIngredientsToRemove(recipeId, shoppingList.shoppingListItems);
expect(result).toEqual([{ingredientId: 987, name: "patate", recipeId: 1234}]);
});
});
Are you setting persistence in your firebase config? Persistence is not supported in the test environment, so you can do something like this to circumvent it:
firebase.auth().setPersistence(process.env.NODE_ENV === 'test'
? firebase.auth.Auth.Persistence.NONE
: firebase.auth.Auth.Persistence.LOCAL);
I ran into this issue too. The problem seems to come from the firebaseui constructor, specifically this line of code in my app:
new firebaseui.auth.AuthUI(this.firebase.auth())
What I did to solve it was initialize the ui object only when actually using it to sign on, not just as a static (typescript) variable. This let me run jest tests that didn't try to sign on just fine.
private static ui: firebaseui.auth.AuthUI | undefined
static startAuthOnElement (selectorToUse: string, onSignedIn: () => void) {
if (this.ui === undefined) this.ui = new firebaseui.auth.AuthUI(this.firebase.auth())
// more code
}
This way all the code that doesn't call startAuthOnElement never runs the firebaseui constructor. This lets me run my jest tests just fine and auth still works in the app.

Resources