I'm using vuejs, vue-testing-library, jest, axios, and axios-mock-adapter to test a component. I'm immediately running into the following error when trying to run my test:
TypeError: _axiosMockAdapter.MockAdapter is not a constructor
My test:
import GlobalSearch from '../src/components/global_search.vue';
import { render, fireEvent } from '@testing-library/vue';
import { axios } from 'axios';
import { MockAdapter } from 'axios-mock-adapter';
// jest.mock("axios", () => ({
// get: () => Promise.resolve(
// [{
// "content":"Keith's Company - Keith's First Project",
// "id":3,
// "searchable_type":"Project",
// "url":"/projects/1"
// }]
// )
// }))
describe('GlobalSearch', () => {
it('It renders its default state', async () => {
let mock = new MockAdapter(axios);
const { findByText, getByText } = render(GlobalSearch);
findByText('Companies, Contacts, Projects');
const searchResults = [{
"content":"Keith's Company - Keith's First Project",
"id":3,
"searchable_type":"Project",
"url":"/projects/1"
}]
mock.onGet('/search/index').reply(200, searchResults);
await fireEvent.update(getByText('Companies, contacts, projects'), 'ke')
getByText('First Project');
});
});
What am I doing wrong? Also, is this stack pretty standard?
MockAdapter is a default export, so remove the braces on the import statement:
import MockAdapter from 'axios-mock-adapter';
instead of:
import { MockAdapter } from 'axios-mock-adapter';