question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unit test jest upload issue

See original GitHub issue

I am having the following error

{
      errors: [
        GraphQLError [Object]: Variable "$file" got invalid value {}; Upload value invalid.
            at C:\Users\alejo\WebstormProjects\cm-appointments-bed\node_modules\graphql\execution\values.js:116:15
            at coerceInputValueImpl (C:\Users\alejo\WebstormProjects\cm-appointments-bed\node_modules\graphql\utilities\coerceInputValue.js:132:9)
            at coerceInputValueImpl (C:\Users\alejo\WebstormProjects\cm-appointments-bed\node_modules\graphql\utilities\coerceInputValue.js:56:14)
            at coerceInputValue (C:\Users\alejo\WebstormProjects\cm-appointments-bed\node_modules\graphql\utilities\coerceInputValue.js:39:10)
            at _loop (C:\Users\alejo\WebstormProjects\cm-appointments-bed\node_modules\graphql\execution\values.js:109:69)
            at coerceVariableValues (C:\Users\alejo\WebstormProjects\cm-appointments-bed\node_modules\graphql\execution\values.js:121:16)
            at getVariableValues (C:\Users\alejo\WebstormProjects\cm-appointments-bed\node_modules\graphql\execution\values.js:50:19)
            at buildExecutionContext (C:\Users\alejo\WebstormProjects\cm-appointments-bed\node_modules\graphql\execution\execute.js:190:61)
            at executeImpl (C:\Users\alejo\WebstormProjects\cm-appointments-bed\node_modules\graphql\execution\execute.js:87:20)
            at execute (C:\Users\alejo\WebstormProjects\cm-appointments-bed\node_modules\graphql\execution\execute.js:62:35)
            at graphqlImpl (C:\Users\alejo\WebstormProjects\cm-appointments-bed\node_modules\graphql\graphql.js:108:31)
            at C:\Users\alejo\WebstormProjects\cm-appointments-bed\node_modules\graphql\graphql.js:28:31
            at new Promise (<anonymous>)
            at Object.graphql (C:\Users\alejo\WebstormProjects\cm-appointments-bed\node_modules\graphql\graphql.js:26:10)
            at Object.exports.graphqlTestCall (C:\Users\alejo\WebstormProjects\cm-appointments-bed\src\utils\test\graphqlTestCall.ts:30:10)
            at processTicksAndRejections (internal/process/task_queues.js:93:5)
            at Object.<anonymous> (C:\Users\alejo\WebstormProjects\cm-appointments-bed\src\test\user.spec.ts:498:24) {
          locations: [Array]
        }
      ]
    }

Right now is only failing in the unit test, with the productive app it is working the uploading file functionality. I had the same error message with the productive app and I solved it adding the following to the package.json

 "resolutions": {
    "graphql-upload": "^11.0.0"
  },

I will share with you the unit test code

    test('Add profile picture', async () => {
      const fileName = 'logo.png';
      const file = fs.createReadStream(
        path.resolve(__dirname, `../utils/test/factory/${fileName}`)
      );
      const fileStream = new Promise((resolve) =>
        resolve({
          createReadStream: () => file,
          stream: file,
          filename: fileName,
          mimetype: 'application/png',
        })
      );
      const { id } = await createCoach({
        ...userData,
        userType: UserType.US,
      });
      await createRefreshToken({
        ...userData,
        valid: true,
        id,
      });
      const response = await graphqlTestCall({
        source: addProfilePictureMutation,
        variableValues: {
          id: { id },
          file: fileStream,
        },
      });
      console.log(response);
      expect(response.data.addProfilePicture).toEqual({
        id,
        profilePicture: true,
      });
      expect(sharp.mock.calls.length).toBe(resolutions.length);
    });

In addition this is the graphqlTestCall code

import { graphql, GraphQLSchema } from 'graphql';
import { buildSchema, Maybe } from 'type-graphql';
import { allResolvers } from '../../resolvers';
import { customAuthChecker } from '../../middleware/auth';
import { mockShortToken } from './shortToken';

interface Options {
  source: string;
  variableValues?: Maybe<{
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    [key: string]: any;
  }>;
  shortToken?: string;
}

let schema: GraphQLSchema;

export const graphqlTestCall = async ({
  source,
  variableValues,
  shortToken = mockShortToken(),
}: Options) => {
  if (!schema) {
    schema = await buildSchema({
      resolvers: allResolvers,
      validate: true,
      authChecker: customAuthChecker,
    });
  }
  return graphql({
    schema,
    source,
    contextValue: {
      ...(shortToken && {
        req: {
          headers: {
            authorization: `Bearer ${shortToken}`,
          },
        },
      }),
    },
    variableValues,
  });
};

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

8reactions
jaimepatercommented, Mar 17, 2021

I had the same issue, I resolved changing

      const fileStream = new Promise((resolve) =>
        resolve({
          createReadStream: () => file,
          stream: file,
          filename: fileName,
          mimetype: 'application/png',
        })
      );

for

  const upload = new Upload();
      upload.resolve({
        createReadStream: () => file,
        stream: file,
        filename: fileName,
        encoding: '7bit',
        mimetype: 'application/png',
      });
      
0reactions
alejocg20commented, Mar 17, 2021

I had the same issue, I resolved changing

      const fileStream = new Promise((resolve) =>
        resolve({
          createReadStream: () => file,
          stream: file,
          filename: fileName,
          mimetype: 'application/png',
        })
      );

for

  const upload = new Upload();
      upload.resolve({
        createReadStream: () => file,
        stream: file,
        filename: fileName,
        encoding: '7bit',
        mimetype: 'application/png',
      });
      

Thanks @jaimepater worked

Read more comments on GitHub >

github_iconTop Results From Across the Web

Test file upload in react jest - Stack Overflow
Test file upload in react jest ; import user from '@testing-library/user-event' ; import someValues from '../somefile.json' ; import { render } ...
Read more >
Testing a React file upload component with Jest
We are creating a simple React file upload component, test it with Jest and refactor it to make testing easier.
Read more >
Unit-Testing REST API File Upload with Jest, Supertest and ...
In the tests, we will upload the test file to the CDN host, rename it, and delete it in the end. And the...
Read more >
Simulating uploading file · Issue #93 · testing-library/react ...
Is there a way to simulate or fire event to trigger change event on input that is used for uploading files?
Read more >
Mocking File Upload in Vue with Jest - Zaengle Corp
In this post, we'll discuss how to combine Vue Test Utils helpers with Jest helpers to mock and test file upload in Vue...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found