You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have multiple tests in one file, one is to check whether the state is changed correctly if the response returns 200. The other should check if a 401 is handled correctly. When I run them separately, meaning I comment one of the two out the work fine. However when running them side-by-side the second one returns the reply from the first one.
Here is my file
describe('HouseList', () => {
let store;
let mock;
let wrapper;
beforeEach(() => {
mock = new MockAdapter(axios);
store = createStore();
});
afterEach(() => {
mock.reset();
});
test('Renders', () => {
mock.onGet(`${BACKEND_URL}/user/users?size=100`).reply(200, {});
let wrapper = mount(HouseList, {
store,
vuetify
});
expect(wrapper.find('.content').exists()).toBeTruthy();
});
test('Users are Loaded on Mount', async () => {
const response = {
content: [
{id: 1, firstname: 'The', lastname: 'Hulk', status: 'ACTIVE'}]}}
]
}
mock.onGet(`${BACKEND_URL}/user/users?size=100`).reply(200, response);
mount(HouseList, {
store,
vuetify
});
await flushPromises(); // Waiting for Axios async
expect(mock.history.get[0].url).toEqual(`${BACKEND_URL}/user/users?size=100`);
expect(store.state.view.userList.loaded).toBeTruthy();
expect(store.state.view.userList.users.length).eq(1);
expect(store.state.view.userList.users[0].lastname).equals('Hulk');
});
test('Opens Error Message, when Receiving Error on User Load', async () => {
mock.onGet(`${BACKEND_URL}/user/users?size=100`).reply(401, {});
let wrapper = mount(HouseList, {
store,
vuetify
});
async flushPromises();
expect(store.state.error.show).toBeTruthy();
expect(wrapper.find("v-dialog")).toBeTruthy();
});
});
❯ test/components/Characters/HouseList.test.js (3) 437ms
❯ HouseList (3) 436ms
✓ Renders 302ms
✓ Users are Loaded on Mount
× Opens Error Message, when Receiving Error on User Load
When inspecting mock.history the history of the second test is empty, where as for the first one the get shows. Am I missing sth here?
One addition: The axios call I'm stubbing is called on beforeMount in my Vue Component, which is why I mount it after setting up the mock instead of setting the wrapper in beforeEach of the test file.
The text was updated successfully, but these errors were encountered:
@macskay I go through the source code. What I found is if we create new axios instance every time, then it will work. This is not the problem with onGet. This problem come up in every HTTP methods if we use the same url.
If mock.reset(); is triggered in the afterEach, it should resets the handlers between each test meaning that it should wipe all mocks for all mocked routes, shouldn't it?
I have multiple tests in one file, one is to check whether the state is changed correctly if the response returns 200. The other should check if a 401 is handled correctly. When I run them separately, meaning I comment one of the two out the work fine. However when running them side-by-side the second one returns the reply from the first one.
Here is my file
When inspecting
mock.history
the history of the second test is empty, where as for the first one the get shows. Am I missing sth here?One addition: The axios call I'm stubbing is called on beforeMount in my Vue Component, which is why I mount it after setting up the mock instead of setting the wrapper in beforeEach of the test file.
The text was updated successfully, but these errors were encountered: