ckyzm
ckyzm

Reputation: 1

How do I make a Jest test to check that a post is being rendered correctly in VueJS?

I'm trying to test that a GET request is working correctly for Jest, and I can fetch posts by their ID. Please bear with me, I'm very new to front-end testing and not fully sure about how to go about this.

This is my GET request:

getPost() {
  this.refreshToken();
  http
    .get(`/posts/${this.$cookie.get('id')}`, {
      headers: {
        "Authorization": `Bearer ${this.$cookie.get('token')}`,
        "Content-type": "application/json",
      },
    })
    .then((response) => {
      this.post = response.data;
    })
    .catch((error) => {
      console.log(error.response);
    });
},

I'm not fully sure how to test this, as there aren't many examples online about this.

So far, my Jest test looks like this:

import Post from '@/views/Posts.vue'
import { shallowMount } from '@vue/test-utils';


const axios = require('axios');
jest.mock('axios');

jest.mock('@/common.js', () => {
    return{
        baseURL: 'http://localhost:8080/api',
        request: jest.fn().mockResolvedValue({
            data: [
                {   
                    postTitle: null,
                    postContents: null, 
                    ranking: 3, 
                    createdTime: '2021-04-05', 
                    modifiedTime: null, 
                    subforum: 'test', 
                    user: 'tester',
                    comments: ['render? i dont know her']
                }
            ]
        }),
    }
});


describe('test get Post Title', () => {
    afterEach(() => jest.resetAllMocks());
    it('fetches post by post id', async () => {
        const post = await getPost();
        expect(axios.request).toHaveBeenCalledWith({ method: 'get', url: '/posts/${this.$cookie.get('postid')}' });
    });
});

Sorry if this is an extremely stupid question, I'm just quite confused.

Upvotes: 0

Views: 897

Answers (0)

Related Questions