I am trying to make a test run of an application using graphql. But I get the error
types resolvers
src/api/Hello/sayBye/sayBye.graphql
type Query {
sayBye: String!
}
src/api/Hello/sayBye/sayBye.resolvers.ts
const resolvers = {
Query: {
sayBye: () => "Hello from sayBye"
}
}
export default resolvers;
src/api/Hello/sayHello/sayHello.graphql
type Query {
sayHello: String!
}
src/api/Hello/sayHello/sayHello.resolvers.ts
const resolvers = {
Query: {
sayHello: () => "Hello from sayHello"
}
}
export default resolvers;
merge types and resolvers
src/schema.ts
import { GraphQLSchema } from "graphql";
import { makeExecutableSchema } from '#graphql-tools/schema';
import { fileLoader, mergeTypes, mergeResolvers } from "merge-graphql-schemas";
import * as path from "path";
const allTypes: GraphQLSchema[] = fileLoader(
path.join(__dirname, "./api/**/*.graphql")
);
const allResolvers = fileLoader(
path.join(__dirname, "./api/**/*.resolvers.*")
);
const mergedTypes = mergeTypes(allTypes);
const mergedResolvers = mergeResolvers(allResolvers);
const schema = makeExecutableSchema({
typeDefs: mergedTypes,
resolvers: mergedResolvers
});
export default schema;
error
[nodemon] starting ts-node index.ts
/var/www/html/dist/utils/src/mapSchema.js:205
Object.keys(originalTypeMap).forEach(typeName => { ^ TypeError:
originalType.toConfig is not a function at
/var/www/html/dist/utils/src/mapSchema.js:217:41 at Array.forEach
() at mapArguments
(/var/www/html/dist/utils/src/mapSchema.js:205:34) at mapDefaultValues
(/var/www/html/dist/utils/src/mapSchema.js:97:24) at Object.mapSchema
(/var/www/html/dist/utils/src/mapSchema.js:7:22) at
createNewSchemaWithResolvers
(/var/www/html/dist/schema/src/addResolversToSchema.js:200:14) at
addResolversToSchema
(/var/www/html/dist/schema/src/addResolversToSchema.js:87:11) at
schemaTransforms
(/var/www/html/dist/schema/src/makeExecutableSchema.js:66:41) at
/var/www/html/dist/schema/src/makeExecutableSchema.js:108:65 at
Array.reduce () [nodemon] app crashed - waiting for file
changes before starting...
Related
Overview
I have been having A LOT of problems running basic unit tests with shopify's node app setup: https://github.com/Shopify/shopify-app-template-node
When trying to use the #shopify/react-testing library, with Jest as the runner, I keep getting this TypeError of testUtils.act is not a function.
TextFieldComponent.test.tsx
import { mount } from '#shopify/react-testing';
import TextFieldComponent from "../../components/atoms/TextFieldComponent";
describe("TextFieldComponent", () => {
it("renders TextFieldComponent", () => {
const testId = "text-field";
const value = "test";
const label = "test";
const type = "text";
const autoComplete = "off";
const wrapper = mount( <TextFieldComponent
value={value}
type={type}
autoComplete={autoComplete}
label={label}
/>);
});
});
jest.config.js
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom'
}
The Error:
testUtils.act is not a function
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.
When I run my bot, the ready event doesn't fire but the bot is online. My event handler is in the start method in the Client.ts class,
and I execute the start method in the index.ts file.
My client class: ./classes/Client.ts
import { Client as DiscordClient, ClientOptions, Collection } from 'discord.js';
import fs from 'fs';
import path from 'path';
export class Client extends DiscordClient {
commandarray: any[] = [];
commands: Collection<string, any> = new Collection();
constructor (options: ClientOptions, token: string) {
super(options);
this.login(token);
}
async start() {
//Event Handler
const eventDirectories = await fs.readdirSync('./events');
for (const dir of eventDirectories) {
const eventFiles = await fs.readdirSync(`./events/${dir}`).filter(file => file.endsWith(".ts"));
if (eventFiles.length <= 0)
return console.log("[EVENT HANDLER] - Cannot find any events!");
for (const file of eventFiles) {
const event = require(`../events/${dir}/${file}`);
if (event.once) {
this.once(event.name, (...args) => event.execute(...args, this));
} else {
this.on(event.name, (...args) => event.execute(...args));
}
}
}
// Slash Command Handler
const cmdDirectories = await fs.readdirSync('./commands');
for (const dir of cmdDirectories) {
const cmdFiles = await fs.readdirSync(`./commands/${dir}`).filter(file => file.endsWith(".ts"));
if (cmdFiles.length <= 0)
return console.log("[COMMAND HANDLER] - Cannot find any commands!");
for (const file of cmdFiles) {
const command = require(`../commands/${dir}/${file}`)
await this.commandarray.push(command);
await this.commands.set(command.name, command);
}
}
}
};
My index.ts file: ./index.ts
import { Client } from "./classes/Client";
import { config } from "dotenv";
config();
export const client: Client = new Client({ intents: 515 }, process.env.token!);
client.start();
My ready event: ./events/Client/ready.ts
import { Client } from '../../classes/Client';
export default {
name: 'ready',
once: true,
async execute(client: Client) {
await console.log(`Logged in as ${client.user?.tag}`);
await client.application?.commands.set(client.commandarray);
}
}
Edit, I fixed the first issue thanks to Rahuletto, but found a new one and have updated the question accordingly.
It's a wrong path. You should show ur path structure (file format).
I think it's ../events/Client/ready.ts.
I used export default to export the event
So, instead of using event.<property/function> in the handler, I should use event.default.<property/function>
I am very new to jest and enzyme. In my Project I will use a SPA React based Application. Containing a Context Provider for the data, also several hooks. I Using now Jest (with ts-jest and enzyme)
My jest.config looks like this
module.exports = {
"roots": [
"<rootDir>/src"
],
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"snapshotSerializers": ["enzyme-to-json/serializer"]
So my first stept so test UI components works.
Next step was to test componentes with mocked data. But there I got the error described at the bottom.
I have a functional component like this:
export default function CurrentWeather(props: ICurrentWeatherProps) {
const [data, Reload] = useCurrentWeather(props.locationID);
return (<div>......</div>)
}
You will notice the useCurrentWeather hook, here is the code for this:
import { useEffect, useState } from 'react';
import { useLocationState } from '../context/locationContext';
import { ILocationData } from './useLocations';
import _ from 'lodash';
...
export default function useCurrentWeater(locationId: number) {
const locationState = useLocationState();
const Reload = () => { GetData() }
const [Data, SetData] = useState<IWeatherDataInfo>({Id:0,ConditionIcon:'',Date:new Date(),MaxTemp:0, MinTemp:0});
async function GetData() { .... }
useEffect(Reload, [locationState.data, locationId]);
return [Data, Reload] as const;
}
Now I wand to mock these Hook. I tried following
import React from 'react';
import { configure, shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import CurrentWeather from '../components/Weather/CurrentWeather';
import { IWeatherDataInfo } from '../Hooks/useWeaters';
configure({ adapter: new Adapter() });
const mockWeatherReload = jest.fn();
const mockdata: IWeatherDataInfo = { Date: new Date(), ConditionIcon: "", MinTemp: 0, MaxTemp: 10 };
jest.mock('../Hooks/useCurrentWeather', () => ({
useCurrentWeather: jest.fn(()=>{ [mockdata, mockWeatherReload]})
}));
describe("WeatherWidget", () => {
it("RenderOnlyAddButton", () => {
const container = shallow(<CurrentWeather locationID={1} hidden={false} />);
});
});
Now, when I execute this test, I will get this error result:
src/tests/WeatherWidget.test.tsx
● WeatherWidget › RenderOnlyAddButton
TypeError: (0 , _useCurrentWeather.default) is not a function or its return value is not iterable
9 |
10 | export default function CurrentWeather(props: ICurrentWeatherProps) {
> 11 | const [data, Reload] = useCurrentWeather(props.locationID);
| ^
12 | return (
What I'm doing wrong here? Is there what I'm missing?
Try like this:(below should be your functional component's test file)
const mockUseCurrentWeather = jest.fn();
jest.mock("put here the absolute path", () => ({
__esModule: true,
useCurrentWeather: (...args: any) => mockUseCurrentWeather(...args),
}));
describe("WeatherWidget", () => {
beforeEach(() => {
mockUseCurrentWeather.mockClear();
mockUseCurrentWeather.mockReturnValue([undefined, undefined]);
});
it("RenderOnlyAddButton", () => {
mockUseCurrentWeather.mockClear();
mockUseCurrentWeather.mockReturnValue([undefined, undefined]);
const container = shallow(<CurrentWeather locationID={1} hidden={false} />);
});
});
I want to upload a file through GraphQL, and followed this article.
Here's the my schema:
extend type Mutation {
bannerAdd(
title: String!
image: Upload
): ID
}
However when I run the app, this gives me this error:
Unknown type "Upload". Did you mean "Float"?
Followed above article, Apollo Server will automatically generate Upload scalar, but why this is happening?
Also define Upload scalar manually also not working:
scalar Upload
...
Gives me this error:
Error: There can be only one type named "Upload".
Seems nothing wrong with my code. Is there an anything that I missed? Using Node#10.14.2, Apollo Server#2.6.1, Apollo Server Express#2.6.1 and polka#0.5.2.
Any advice will very appreciate it.
Fix this problem with GraphQLUpload of Apollo Server for create a custom scalar called FileUpload.
Server setup with Apollo Server:
const {ApolloServer, gql, GraphQLUpload} = require('apollo-server');
const typeDefs = gql`
scalar FileUpload
type File {
filename: String!
mimetype: String!
encoding: String!
}
type Query {
uploads: [File]
}
type Mutation {
singleUpload(file: FileUpload!): File!
}
`;
const resolvers = {
FileUpload: GraphQLUpload,
Query: {
uploads: (parent, args) => {},
},
Mutation: {
singleUpload: async (_, {file}) => {
const {createReadStream, filename, mimetype, encoding} = await file;
const stream = createReadStream();
// Rest of your code: validate file, save in your DB and static storage
return {filename, mimetype, encoding};
},
},
};
const server = new ApolloServer({
typeDefs,
resolvers,
});
server.listen().then(({url}) => {
console.log(`🚀 Server ready at ${url}`);
});
Client Setup with Apollo Client and React.js:
You need to install the apollo-upload-client package too.
import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloClient, InMemoryCache, ApolloProvider, gql, useMutation } from '#apollo/client';
import { createUploadLink } from 'apollo-upload-client';
const httpLink = createUploadLink({
uri: 'http://localhost:4000'
});
const client = new ApolloClient({
link: httpLink,
cache: new InMemoryCache()
});
const UPLOAD_FILE = gql`
mutation uploadFile($file: FileUpload!) {
singleUpload(file: $file) {
filename
mimetype
encoding
}
}
`;
function FileInput() {
const [uploadFile] = useMutation(UPLOAD_FILE);
return (
<input
type="file"
required
onChange={({target: {validity, files: [file]}}) =>
validity.valid && uploadFile({variables: {file}})
}
/>
);
}
function App() {
return (
<ApolloProvider client={client}>
<div>
<FileInput/>
</div>
</ApolloProvider>
);
}
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById('root')
);
Here's the solution what I did, adding custom scalar named "FileUpload" and add GraphQLUpload as resolver like this:
import { GraphQLUpload } from 'graphql-upload';
export const resolvers = {
FileUpload: GraphQLUpload
};
It works great, but it could be not perfect solution. Hope apollo fix this soon.
P.S. To upload file from your browser, you also need to set upload link in Apollo Client properly. Here's my code:
import { ApolloLink, split } from 'apollo-link';
import { createHttpLink } from 'apollo-link-http';
import { createUploadLink } from 'apollo-upload-client';
// Create HTTP Link
const httpLink = createHttpLink({
uri: ...,
credentials: 'include'
});
// Create File Upload Link
const isFile = value =>
(typeof File !== 'undefined' && value instanceof File) || (typeof Blob !== 'undefined' && value instanceof Blob);
const isUpload = ({ variables }) => Object.values(variables).some(isFile);
const uploadLink = createUploadLink({
uri: ...
credentials: 'include'
});
const terminatingLink = (isUpload, uploadLink, httpLink);
const link = ApolloLink.from([<Some Other Link...>, <Another Other Link...>, terminatingLink]);
const apolloClient = new ApolloClient({
link,
...
});
This issue can be caused by passing an executable schema (schema option) when initializing your server instead of the newer API of passing typeDefs and resolvers separately.
Old:
const server = new ApolloServer({
schema: makeExecutableSchema({ typeDefs, resolvers })
})
New:
const server = new ApolloServer({
typeDefs,
resolvers,
})
Or as explained in the docs:
Note: When using typeDefs, Apollo Server adds scalar Upload to your schema, so any existing declaration of scalar Upload in the type definitions should be removed. If you create your schema with makeExecutableSchema and pass it to ApolloServer constructor using the schema param, make sure to include scalar Upload.