search

danielstern / vue-jest

22 stars 10 forks source link

Testing Asynchronous Methods: TypeError: (0 , _.ChatMessageService) is not a function #5

Open angela-mitchell-vmlyr opened 3 years ago

angela-mitchell-vmlyr commented 3 years ago

Issue

I attempted to run the following lines of code in chatMessageService.spec.js:

import { ChatMessageService } from './';

describe("the message service",() => {

    let chatMessageService;

    beforeEach(()=>{

        chatMessageService = ChatMessageService([]);

    });

    it("should add messages", () => {

        expect(chatMessageService.getMessages()).toHaveLength(0);

    });
});

When running the test, I received the following results:

 FAIL  src/services/chatMessageService/chatMessageService.spec.js
  ● the message service › should add messages

    TypeError: (0 , _.ChatMessageService) is not a function

       7 |     beforeEach(()=>{
       8 |         
    >  9 |         chatMessageService = ChatMessageService([]);
         |                              ^
      10 | 
      11 |     });
      12 | 

      at Object.<anonymous> (src/services/chatMessageService/chatMessageService.spec.js:9:30)

  ● the message service › should add messages

    TypeError: Cannot read property 'getMessages' of undefined

      14 |     it("should add messages", () => {
      15 | 
    > 16 |         expect(chatMessageService.getMessages()).toHaveLength(0);
         |                                   ^
      17 |     
      18 |     });
      19 | });

      at Object.<anonymous> (src/services/chatMessageService/chatMessageService.spec.js:16:35)

 PASS  src/routes/Chat/Chat.spec.js

I checked my index.js file to verify that the getMessages() property exists there. I also compared what I have for the associated files to my current ones. It looks like everything is matching. Is there an importing issue with Jest that has a fix available for this?

Resolution

I see that there are some differences in the video in the index.js file. This file should look like this for the appropriate Jest test results to print to the console:

import { v4 } from 'uuid';

const _messages = [{

    id: v4(),
    sender:"M",
    content: "Hello. This is customer support."

},{

    id: v4(),
    sender:"M",
    content: "How can we assist you today?"

}];

export const ChatMessageService = (messages = _messages) => ({
    async getMessages(){

        return messages;

    },
    async submitMessage({sender, content}){

        messages.push({
            sender,
            content,
            id: v4()
        })

    },
    subscribe(){

        return function*(){

            console.log("You subscribed");

        }

    }
});
danielstern commented 3 years ago

What is the read out of console.log(ChatMessageService)?

From: Angela Mitchell @.> Sent: July 31, 2021 8:41 PM To: danielstern/vue-jest @.> Cc: Subscribed @.***> Subject: [danielstern/vue-jest] Testing Asynchronous Methods: TypeError: (0 , _.ChatMessageService) is not a function (#5)

Issue

I attempted to run the following lines of code in chatMessageService.spec.js:

import { ChatMessageService } from './';

describe("the message service",() => {

let chatMessageService;

beforeEach(()=>{

    chatMessageService = ChatMessageService([]);

});

it("should add messages", () => {

    expect(chatMessageService.getMessages()).toHaveLength(0);

});

});

When running the test, I received the following results:

FAIL src/services/chatMessageService/chatMessageService.spec.js

● the message service › should add messages

TypeError: (0 , _.ChatMessageService) is not a function

   7 |     beforeEach(()=>{

   8 |

>  9 |         chatMessageService = ChatMessageService([]);

     |                              ^

  10 |

  11 |     });

  12 |

  at Object.<anonymous> (src/services/chatMessageService/chatMessageService.spec.js:9:30)

● the message service › should add messages

TypeError: Cannot read property 'getMessages' of undefined

  14 |     it("should add messages", () => {

  15 |

> 16 |         expect(chatMessageService.getMessages()).toHaveLength(0);

     |                                   ^

  17 |

  18 |     });

  19 | });

  at Object.<anonymous> (src/services/chatMessageService/chatMessageService.spec.js:16:35)

PASS src/routes/Chat/Chat.spec.js

I checked my index.js file to verify that the getMessages() property exists there. I also compared what I have for the associated files to my current ones. It looks like everything is matching. Is there an importing issue with Jest that has a fix available for this?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fdanielstern%2Fvue-jest%2Fissues%2F5&data=04%7C01%7C%7Ca6d1ebf3b76f4989b14208d9548526da%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637633753133745416%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=pynjG%2FmpIGCTm%2BKc0yA9ldpPMBUFnScCHuv2I9hAhN0%3D&reserved=0, or unsubscribehttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FABASA6C75VL7JXX3A35ONELT2SJ4TANCNFSM5BKRFGZQ&data=04%7C01%7C%7Ca6d1ebf3b76f4989b14208d9548526da%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637633753133755409%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=%2F4BEcQz55iB%2F6VuWkCn9FuUbs75%2BatvwguTzdtLBWps%3D&reserved=0.

angela-mitchell-vmlyr commented 3 years ago

@danielstern With the code I added from the video for the index.js file in the services/chatMessageService directory, console.log(ChatMessageService) returns the following in the browser dev tools:

ChatMessageService() {
  var messages = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _messages;
  return {
    getMessages: function getMessages() {
      return _babel_runtime…

There are errors that follow it, but I think I must be missing something from the video or it may get resolved once I work on the final section of the course:

[Vue warn]: Error in mounted hook (Promise/async): "TypeError: _services_chatMessageService_index_js__WEBPACK_IMPORTED_MODULE_3__.ChatMessageService.getMessages is not a function"

found in

---> <App> at src/App.vue
       <Root>
TypeError: _services_chatMessageService_index_js__WEBPACK_IMPORTED_MODULE_3__.ChatMessageService.getMessages is not a function
    at _callee$ (App.vue?./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options:42)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:293)
    at Generator.eval [as next] (runtime.js:118)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
    at eval (asyncToGenerator.js:32)
    at new Promise (<anonymous>)
    at eval (asyncToGenerator.js:21)
    at VueComponent.mounted (App.vue?./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options:55)

The tests seem be working as expected now, though.

gleekzorp commented 3 years ago

I ran into the same issue. Updating the chatMessageService/index.js with the code in @angela-mitchell-vmlyr Resolution section fixed it for me.

danielstern commented 3 years ago

Feel free to submit a PR

From: Daniel Floyd @.> Sent: October 12, 2021 6:47 PM To: danielstern/vue-jest @.> Cc: Daniel Stern @.>; Mention @.> Subject: Re: [danielstern/vue-jest] Testing Asynchronous Methods: TypeError: (0 , _.ChatMessageService) is not a function (#5)

I ran into the same issue. Updating the chatMessageService/index.js with the code in @angela-mitchell-vmlyrhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fangela-mitchell-vmlyr&data=04%7C01%7C%7C5585c1663ed145f7ea8208d98dd2479f%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637696756551502059%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=pOsxN26z3WhvrepZThauW9zBI1RvSFskTq9W%2FDQwUsE%3D&reserved=0 Resolution section fixed it for me.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fdanielstern%2Fvue-jest%2Fissues%2F5%23issuecomment-941701097&data=04%7C01%7C%7C5585c1663ed145f7ea8208d98dd2479f%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637696756551512012%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=WJDuQOJfnwOdm%2B8JhzOqkDQc4kq8QJp9xt1VP0Sv1Pg%3D&reserved=0, or unsubscribehttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FABASA6GA4DQEZMI2PVOG47TUGS3IDANCNFSM5BKRFGZQ&data=04%7C01%7C%7C5585c1663ed145f7ea8208d98dd2479f%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637696756551512012%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=MYD%2BHi1yxlbVkMxD%2Bww7qHrKIeOeIXh2%2BLMYY5dPHNM%3D&reserved=0. Triage notifications on the go with GitHub Mobile for iOShttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fapps.apple.com%2Fapp%2Fapple-store%2Fid1477376905%3Fct%3Dnotification-email%26mt%3D8%26pt%3D524675&data=04%7C01%7C%7C5585c1663ed145f7ea8208d98dd2479f%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637696756551521968%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=YZW7dnkjn%2BFJYd2v1%2FmIxPTg8vMR1OPgNB6QthqyfWw%3D&reserved=0 or Androidhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.github.android%26referrer%3Dutm_campaign%253Dnotification-email%2526utm_medium%253Demail%2526utm_source%253Dgithub&data=04%7C01%7C%7C5585c1663ed145f7ea8208d98dd2479f%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637696756551521968%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=J%2FYhqrJqYI00elf08%2BoVySbNLDVnwvbaQXrErchp5uk%3D&reserved=0.