I use prisma to interact with my database and i would like to use jest-mock to mock the findMany call. https://jestjs.io/docs/jest-object#jestmockedtitem-t-deep--false
brands.test.ts
import { PrismaService } from "#services/mysql.service";
import { mocked } from "jest-mock";
import faker from "#faker-js/faker";
import { GetBrands } from "./brand";
jest.mock("#services/mysql.service");
/**
* #group unit
*/
describe("Brand", () => {
afterAll(async () => {});
const mockedPrismaService = mocked(PrismaService, true);
it("should get a list of brands", async () => {
const mockedData = [
{
id: faker.datatype.uuid(),
name: faker.datatype.string(),
image: {
source: "some_source",
dtype: "some_dtype",
},
},
];
//#ts-ignore - because of relational data mockedData.image
mockedPrismaService.brand.findMany.mockResolvedValueOnce(mockedData);
const [response, error] = await GetBrands();
console.log(response, error);
});
});
mysql.service.ts
import mysql from "mysql2/promise";
import { Config } from "#config";
import { PrismaClient, Prisma } from "#prisma/client";
export const MySQLEscape = mysql.escape;
export const MySQLPreparedStatement = mysql.format;
export const PrismaService = new PrismaClient({});
export const PrismaHelper = Prisma;
However when i run this test i get the following error.
TypeError: Cannot read properties of undefined (reading 'brand')
Factory Mock
One option is to option use the factory approach when mocking your client.
jest.mock("#services/mysql.service", () => ({
PrismaService: {
brand: {
findMany: jest.fn(() => { })
}
},
}));
Then within your test, you can mock the findMany function to return your test data, then call the function being tested.
const mockedData = [...];
PrismaService.brand.findMany.mockResolvedValueOnce(mockedData);
const result = await GetBrands();
It's a bit cumbersome, but it works.
Note that in my example, I've implemented GetBrands as follows:
import { PrismaService } from "#services/mysql.service"
export const GetBrands = async () => {
const data = await PrismaService.brand.findMany();
return data;
}
Your example
In your example, you're using automatic mocking, and I'm not too familiar with it so I'm not sure how to get it working.
What seems to be happening to cause the error is your PrismaService is undefined when it's imported here:
import { PrismaService } from "#services/mysql.service";
And then calling the mocked function with an undefined parameter returns undefined:
const mockedPrismaService = mocked(undefined, true); // returns undefined
And finally, calling the following is what throws the error:
mockedPrismaService.brand.findMany.mockResolvedValueOnce(mockedData);
// TypeError: Cannot read properties of undefined (reading 'brand')
I would have thought something like this would be what you're after, but this throws an error:
jest.mock("#services/mysql.service", () => ({
PrismaService: mocked(PrismaService, true)
}));
// 6 |
// 7 | jest.mock("#services/mysql.service", () => ({
//> 8 | PrismaService: mocked(PrismaClient, true)
// | ^
// 9 | }));
Check out the docs
Might be worth checking out the Prismas documentation on unit testing, as they suggest a couple of pretty different approaches.
Related
I'm trying to test my controller function which is:
import { InstalledPackages } from '../parser/parser.service';
import {
getOutdatedPackages,
InstalledPackageStatus,
} from './version-control.service';
interface OutdatedPackages {
dependencies: InstalledPackageStatus[];
devDependencies: InstalledPackageStatus[];
}
export async function getPackagesUpdatesToNotify(
packages: InstalledPackages,
type = 'package.json',
): Promise<OutdatedPackages> {
return getOutdatedPackages(packages.dependencies, type);
}
And having my service like this:
import { fetch } from "../common/http.service";
export async function getLastPackageVersion(
packageName: string
): Promise<VersionType> {
const url = `https://registry.npmjs.org/-/package/${packageName}/dist-tags`;
return await (<Promise<VersionType>>fetch(url));
}
export async function getOutdatedPackages(
installedPackages: PackagesVersion,
type: string
): Promise<InstalledPackageStatus[]> {
return Promise.all(
Object.keys(installedPackages).map(async (packageName) =>
getLastPackageVersion(packageName)
)
);
}
I've already tried both solutions:
import * as myService from './my.service';
it('my test', async () => {
const getLastPackageVersionSpy = jest.spyOn(myService, 'getLastPackageVersion').mockReturnValue(
Promise.resolve(42),
await getPackagesUpdatesToNotify(packages, type)
});
and
import { getLastPackageVersion } from './my.service';
import { getPackagesUpdatesToNotify } from './version-control.controller';
jest.mock('./myse.service', () => ({
...jest.requireActual('./myse.service'),
getLastPackageVersion: jest.fn(),
}));
it('my test', async () => {
(getLastPackageVersion as jest.Mock).mockResolvedValue(
Promise.resolve(42),
);
await getPackagesUpdatesToNotify(packages, type)
});
But the original function is always called instead of the mocked one.
How to mock the getLastPackageVersion method.
I'm trying to avoid using tools like rewire if possible.
Thank you
Move the getLastPackageVersion to different file, import it in the my.service and then mock it.
my.service:
import { fetch } from "../common/http.service";
import { getLastPackageVersion } from '../last-package-version';
export async function getOutdatedPackages(
installedPackages: PackagesVersion,
type: string
): Promise<InstalledPackageStatus[]> {
return Promise.all(
Object.keys(installedPackages).map(async (packageName) =>
getLastPackageVersion(packageName)
)
);
}
import * as lastPackageVersion from '../last-package-version';
it('my test', async () => {
const getLastPackageVersionSpy = jest.spyOn(lastPackageVersion, 'getLastPackageVersion').mockResolvedValue(42);
await getPackagesUpdatesToNotify(packages, type)
});
getOutdatedPackages is in the same file as the getLastPackageVersion so it cannot be mocked. In your case the getOutdatedPackages is still using the original getLastPackageVersion method.
I'm trying to mock out axios that is inside an async function that is being wrapped in useQuery:
import { useQuery, QueryKey } from 'react-query'
export const fetchWithAxios = async () => {
...
...
...
const response = await someAxiosCall()
...
return data
}
export const useFetchWithQuery = () => useQuery(key, fetchWithAxios, {
refetchInterval: false,
refetchOnReconnect: true,
refetchOnWindowFocus: true,
retry: 1,
})
and I want to use moxios
moxios.stubRequest('/some-url', {
status: 200,
response: fakeInputData,
})
useFetchWithQuery()
moxios.wait(function () {
done()
})
but I'm getting all sorts of issues with missing context, store, etc which I'm iterested in mocking out completely.
Don't mock useQuery, mock Axios!
The pattern you should follow in order to test your usages of useQuery should look something like this:
const fetchWithAxios = (axios, ...parameters) => {
const data = axios.someAxiosCall(parameters);
return data;
}
export const useFetchWithQuery = (...parameters) => {
const axios = useAxios();
return useQuery(key, fetchWithAxios(axios, ...parameters), {
// options
})
}
Where does useAxios come from? You need to write a context to pass an axios instance through the application.
This will allow your tests to look something like this in the end:
const { result, waitFor, waitForNextUpdate } = renderHook(() => useFetchWithQuery(..., {
wrapper: makeWrapper(withQueryClient, withAxios(mockedAxios)),
});
await waitFor(() => expect(result.current.isFetching).toBeFalsy());
When I run test, it show TypeError: Cannot destructure property 'travelDatas' of '(0 , _GetTravelDatas.getTravelDatas)(...)' as it is undefined.
As you see the screenshot: unit test
There isn't any console error or warning.
Could anyone help please
travelListTest.spec.js
import { mount, shallowMount } from '#vue/test-utils'
import TravelList from '../../src/components/TravelList.vue'
import { getTravelDatas } from '../../src/composables/GetTravelDatas'
import ElementPlus from 'element-plus'
const wrapper = shallowMount(TravelList, {
global: {
plugins: [ElementPlus]
}
})
jest.mock('../../src/composables/GetTravelDatas')
describe('TravelList Test', () => {
test('click more will call GoToTravelDetailPage', () => {
wrapper.vm.GoToTravelDetailPage = jest.fn()
console.log(wrapper.html())
wrapper.find('.el-button').trigger('click')
expect(wrapper.vm.GoToTravelDetailPage).toHaveBeenCalled()
})
})
TravelList.vue
.....
<script>
import { ref } from '#vue/reactivity';
import { useRouter } from "vue-router";
import { getTravelDatas } from '../composables/GetTravelDatas'
export default {
name: 'TravelList',
setup() {
const { travelDatas } = getTravelDatas();
const router = useRouter();
function GoToTravelDetailPage(acctractionId) {
router.push({ path: `/travelDetail/${acctractionId}` })
}
return { travelDatas, GoToTravelDetailPage };
},
};
</script>
GetTravelDatas.js
import axios from "axios";
import { ref } from '#vue/runtime-core';
export function getTravelDatas() {
const travelDatas = ref([])
axios.get('https://localhost:5001/MyTravel/GetTravelData')
.then((response) => {
if (!response.data.success) {
alert(response.data.errorMessage)
}else{
travelDatas.value = response.data.travelDetail
}
}).catch((error) => {
alert('Unexpected Error: ', error.message)
console.log(error)
});
return { travelDatas }
}
You are mocking the GetTravelDatas module with an auto-mock version by calling:
jest.mock('../../src/composables/GetTravelDatas')
That means that all the methods exported from that module will be mocked (the real code of the method will not be called) and the mocked version will return undefined when called.
In the code you are testing you then have:
const { travelDatas } = getTravelDatas();
Reading the travelDatas property from undefined is causing the error you are seeing.
You should mock the getTravelDatas method so that it returns the appropriate data. For example, returning an empty array would look like:
getTravelDatas.mockReturnValue([]);
Hi i wrote following code to fetch blobs from Azure Blob Storage.
import { BlobServiceClient, ContainerClient, ServiceFindBlobsByTagsSegmentResponse } from '#azure/storage-blob';
import { GetBlobPageInput, GetBlobPageOutput, PutBlobItemsInput, GetBlobItem } from './interfaces/blob.service.interface';
export const getBlobsPage = async<T>(input: GetBlobPageInput) => {
const blobServiceClient = BlobServiceClient.fromConnectionString(input.blobConnectionString);
const iterator = blobServiceClient
.findBlobsByTags(input.condition)
.byPage({ maxPageSize: input.pageSize });
return getNextPage<T>({
iterator,
blobServiceClient,
blobContainer: input.blobContainer,
});
};
[...]
I am trying to write a unit test for it, but i have trouble when i try to mock BlobServiceClient from #azure/storage-blob. I wrote sample test and mock as this:
import { getBlobsPage } from './../../services/blob.service';
const fromConnectionStringMock = jest.fn();
jest.mock('#azure/storage-blob', () => ({
BlobServiceClient: jest.fn().mockImplementation(() => ({
fromConnectionString: fromConnectionStringMock,
})),
}));
describe('BLOB service tests', () => {
beforeEach(() => {
jest.clearAllMocks();
});
it('should fetch first page and return function to get next', async () => {
const input = {
blobConnectionString: 'testConnectionString',
blobContainer: 'testContainer',
condition: "ATTRIBUTE = 'test'",
pageSize: 1,
};
const result = await getBlobsPage(input);
expect(fromConnectionStringMock).toHaveBeenCalledTimes(1);
});
});
But when i try to run test i am getting:
TypeError: storage_blob_1.BlobServiceClient.fromConnectionString is not a function
24 |
25 | export const getBlobsPage = async<T>(input: GetBlobPageInput) => {
> 26 | const blobServiceClient = BlobServiceClient.fromConnectionString(input.blobConnectionString);
| ^
27 |
28 | const iterator = blobServiceClient
29 | .findBlobsByTags(input.condition)
at nhsdIntegration/services/blob.service.ts:26:47
at nhsdIntegration/services/blob.service.ts:1854:40
at Object.<anonymous>.__awaiter (nhsdIntegration/services/blob.service.ts:1797:10)
at Object.getBlobsPage (nhsdIntegration/services/blob.service.ts:25:65)
at tests/services/blob.service.test.ts:27:26
at tests/services/blob.service.test.ts:8:71
Any tips on how should I properly implement mock for azure module?
I've tried following several diffrent answers on StackOverflow and looked through articles on web (like: https://dev.to/codedivoire/how-to-mock-an-imported-typescript-class-with-jest-2g7j). And most of them show that this is the proper solution, so i guess i am missing some small thing here but can't figure it out.
The exported BlobServiceClient is supposed to be a literal object but you're now mocking as function which is the issue.
So you might need to simply mock returning a literal object. Another issue is to access a var fromConnectionStringMock from outside of the mock scope would end up with another issue.
So here's possibly the right mock:
jest.mock('#azure/storage-blob', () => ({
...jest.requireActual('#azure/storage-blob'), // keep other props as they are
BlobServiceClient: {
fromConnectionString: jest.fn().mockReturnValue({
findBlobsByTags: jest.fn().mockReturnValue({
byPage: jest.fn(),
}),
}),
},
}));
This test:
import { render } from '#testing-library/svelte';
import { setRoutes } from '../router';
import SLink from '../router/components/SLink.svelte';
import routes from '../routes';
beforeAll(() => setRoutes(routes));
test('Instantiates components', () => {
expect(() => render(SLink, { props: { name: 'About' } })).not.toThrow();
});
Produces this error:
Error name: "TypeError"
Error message: "Cannot read property 'forEach' of undefined"
137 |
138 | const matchRoute = passedRoutes => {
> 139 | passedRoutes.forEach(compare => {
| ^
140 | if (matchedRoute) return;
141 |
142 | const { regex, fullRegex } = compare as FormattedRoute;
Which comes from this function:
const compareRoutes = (routes, route) => {
let matchedRoute;
const matchRoute = passedRoutes => {
passedRoutes.forEach(compare => {
// ...
});
};
matchRoute(routes);
return matchedRoute;
};
Which is called by the component I'm trying to render in the test:
<script>
import { routes } from '../logic';
import { compareRoutes } from '../static';
export let name;
// Error stems from 'routes' being undefined here
const route = compareRoutes(routes, { name });
</script>
This line:
beforeAll(() => setRoutes(routes));
Sets the routes imported by SLink which are then passed to compareRoutes, so they shouldn't be undefined.
I've used the same line for other functions and the tests run as expected.
Can #testing-library/svelte not resolve imports? Or, is there another reason for this?
setRoutes:
let routes;
const setRoutes = (userRoutes) => {
// ...
routes = userRoutes;
};
export { routes };
I guess this is rendered in JSDom, and I suspect it might not support live bindings like what you're doing with your export { routes }.
Try exporting a function instead, to confirm:
export const getRoutes = () => routes
Also, this is off topic, but it really feels like your compareRoutes function could be simplified as a filter (or map, or reduce) operation. Something like that:
const compareRoutes = (routes, route) => routes.filter(
x => route.path.startsWith(x.path)
)