I have below react code and i am using webpack for unit test.
export function fetchFiltersIfNeeded(filterData) {
let sendDate = (new Date()).getTime();
return (dispatch, getState) => {
if (shouldFetchFilters(getState(), filterData)) {
return dispatch(fetchFilters(filterData, sendDate));
}
};
}
How do I test the function fetchFiltersIfNeeded ? How do I mock it ?
Use redux-mock-store to mock the store
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
const mockStore = configureMockStore([thunk])
describe('Actions', () => {
it('fetchFiltersIfNeeded', () => {
const store = mockStore({ /* you can put initial state here */ })
store.dispatch(fetchFiltersIfNeeded(yourTestData))
// store.getActions() will return an array of dispatched actions
expect(store.getActions()[0]).to.deep.equal({ type: 'FETCH_FILTERS' })
})
})
Related
I need to switch out my backend in-memory DB for testing due to memory issues. Below is my code
import { fireEvent, render, screen, waitFor } from "#testing-library/react";
import userEvent from "#testing-library/user-event";
import App from "App";
import axios from "axios";
import MockAdapter from "axios-mock-adapter";
import { AccessLevel, ResponseApi, SystemUserApi } from "types";
let mock: MockAdapter;
beforeAll(() => {
mock = new MockAdapter(axios);
});
afterEach(() => {
mock.reset();
});
beforeEach(() => {
jest.resetModules();
});
describe("<App />", () => {
test("login", async () => {
mock.onPost('/Hello').reply(200, getPost);
const result = render(<App />);
const user = userEvent.setup();
const btnLogin = screen.getByText(/Login/i) as HTMLButtonElement;
await userEvent.click(btnLogin);
let btnOk = screen.queryByText(/OK/i) as HTMLButtonElement;
expect(btnOk.disabled).toBe(true);
let btnCancel = screen.getByText(/Cancel/i) as HTMLButtonElement;
expect(btnCancel.disabled).toBe(false);
fireEvent.change(screen.getByLabelText(/Access Code/i) as HTMLInputElement, { target: { value: 'USER' } });
expect(btnOk.disabled).toBe(false);
await userEvent.click(btnOk);
//At this point I was expecting the onPost to be clicked
});
});
function getPost(config: any): any {
console.log(config);
debugger;
return {
data: {
access_code: 'USER'.toUpperCase(),
access_level: AccessLevel.USER ,
lock_level:true
} as SystemUserApi,
error: false,
} as ResponseApi
}
Deep down in the is a call axios post to /Hello but my function within the test is not called. I do not know if it has to do with the actual call being axios.request vs axios.post. I have tried switching to mock.onAny, but that did not seem to work. Not sure what to do here.
I am having vue3 app with vite and vitest and trying to mock the Quasar useQuasar composable which I am using in my custom Composable like:
// useLoginRequestBuilder.ts
import { makeUserAuthentication } from "#/main/factories"
import { useQuasar } from "quasar"
export function useLoginRequestBuilder() {
const $q = useQuasar()
async function login() {
try {
$q.loading.show()
const auth = makeUserAuthentication()
return await auth.signinRedirect()
} catch (e) {
console.log(e)
$q.loading.hide()
$q.notify({
color: "red-4",
textColor: "white",
icon: "o_warning",
message: "Login Failed!",
})
}
}
return {
login,
}
}
and I am trying to mock quasar in tests like:
// useLoginRequestBuilder.spec.ts
import { useLoginRequestBuilder } from "#/main/builders"
vi.mock("quasar", () => ({ // <--- this is not really mocking quasar
useQuasar: () => ({
loading: {
show: () => true,
hide: () => true,
},
}),
}))
const spyAuth = vi.fn(() => Promise.resolve(true))
vi.mock("#/main/factories", () => ({
makeUserAuthentication: () => ({
signinRedirect: () => spyAuth(),
}),
}))
describe("test useLoginRequestBuilder", () => {
test("should call signinRedirect", async () => {
const { login } = useLoginRequestBuilder()
const sut = await login()
expect(sut).toBe(true)
})
})
vi.mock("quasar"... is failing to mock quasar and I am getting below error. That means, it failed to mock and failed to get the $q.loading.... object.
TypeError: Cannot read properties of undefined (reading 'loading')
I understand that there is a separate testing lib for quasar, here but I think this is not really the case here.
Bordering on a necro-post, but I had a similar issue that the mocking factory wasn't creating the plugins being used in non-Vue components, and had to mock each call individually in the end.
Though I'd add it here for anyone else
vitest.mock("quasar", () => vi.fn()); // this doesn't mock out calls
// use individual mocks as below
import { Loading } from "quasar";
vi.spyOn(Loading, "show").mockImplementation(() => vi.fn());
vi.spyOn(Loading, "hide").mockImplementation(() => vi.fn());
I can't seem to get this simple test to work in react-testing-library & react-native-testing-library. I've tried various combinations of wrapping the render function in act, or using waitFor and other async utils, but the test never waits for the component to re-render after useEffect causes the async api call to set the new state.
Also worth noting I receive the warning: An update to TestComponent inside a test was not wrapped in act(...).`. I'm aware of this issue but no method that I've seen solved it for me.
import React, { useEffect, useState } from 'react'
import { View, Text } from 'react-native'
import { render, waitFor } from 'test-utils'
import { rest } from 'msw'
import { setupServer } from 'msw/node'
import { useApi } from './index'
const server = setupServer(
rest.get('http://localhost/MOCK_VAR/some-endpoint', (req, res, ctx) => {
return res(ctx.json({ greeting: 'hello there' }))
})
)
beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())
function TestComponent() {
const { apiRequest } = useApi()
const [result, setResult] = useState(null)
useEffect(() => {
makeApiCall()
})
const makeApiCall = async () => {
const apiResult = await apiRequest({ url: '/some-endpoint' })
console.log(apiResult.greeting) // <-- 'hello there'
setResult(apiResult.greeting)
}
return (
<View>
<Text>{result}</Text>
</View>
)
}
describe('Test useApi hook', () => {
test('test post request', async () => {
const { findByText } = render(<TestComponent />)
const greeting = await findByText('hello there')
await waitFor(() => { // <-- never waits
expect(greeting).toBeTruthy()
})
})
})
My issue was awaiting the findBy function. From the docs it says findBy* methods have waitFor already built in. So simply removing the await solved the issue.
What worked for me:
test('test post request', async () => {
const { findByText } = render(<TestComponent />)
const greeting = findByText('hello there')
waitFor(() => expect(greeting).toBeTruthy())
})
I am writing unit tests for a pagination module, and it has a simple VueX store module.
I am using Vue.js 2.5 and Mocha/Chai/Sinon for tests. Setup is with Vue CLI 3.
The problem is that when the currentPage is incremented in the store in one unit test, this state persists into the next test even when I try to create a fresh store.
I have attempted to return a fresh pagination module by using a function that returns an Object.assign() fresh copy but this did not work. I have left this in the code as shown in the spec below.
store/pagination.js
const state = {
currentPage: 0
}
export const getters = {
currentPage: state => {
return state.currentPage
}
}
export const actions = {
nextPage ({ commit, state }) {
commit('setCurrentPage', state.currentPage + 1)
}
}
export const mutations = {
setCurrentPage (state, page) {
state.currentPage = page
}
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}
Pagination.spec.js
function getPaginationStore () {
return Object.assign({}, pagination)
}
describe('Paginate.vue', () => {
let localVue
let wrapper
let store
beforeEach(() => {
localVue = createLocalVue()
localVue.use(Vuex)
store = new Vuex.Store({
modules: {
pagination: getPaginationStore()
}
})
wrapper = shallowMount(Pagination, {
localVue,
propsData: {
items: [],
size: 24
},
store
})
})
afterEach(() => {
store = null
})
it('state should be 0', () => {
expect(wrapper.vm.pageNumber).to.equal(0)
wrapper.vm.$store.dispatch('pagination/nextPage')
expect(wrapper.vm.pageNumber).to.equal(1)
})
it('state should be 0 again but is 1', () => {
// THIS TEST FAILS. IT IS ACTUALLY 1
expect(wrapper.vm.pageNumber).to.equal(0)
})
})
The solution was to use a function for the state in the module rather than a plain old javascript object. Here is my new store state code:
export const state = () => {
return {
currentPage: 0
}
}
Answer was provided by #SumNeuron from the Vue discord channel.
I have a spec code to test like this
it('login test', () => {
const fixture = TestBed.createComponent(component);
fixture.detectChanges();
let authService = fixture.debugElement.injector.get(Auth);
spyOn(authService, 'login').and.returnValue('');
const elements = fixture.nativeElement;
fixture.componentInstance.login();
expect(authService.login).toHaveBeenCalled();
});
and the implementation code like this
login() {
this.auth.login(this.username, this.password).subscribe(() => {
}
});
}
it gives error:
this.auth.login(...).subscribe is not a function
Why does this error happen?
You need to return something with a subscribe method, as the component calls subscribe directly from login. A string does not. You could just return an object with a subscribe function and it should work
and.returnValue({ subscribe: () => {} });
Or if you want to pass a real observable, you could
and.returnValue(Observable.of('some value'));
You might need to import rxjs/add/observable/of
On rxjs v6 you should use of instead of Observable.of or Observable.from e.g
const loginService: any = {
getUser: () => of(['Adam West']),
};
and import
import { of } from 'rxjs';
Change your spy for the 'login' method on your authService to return an observable instead of a value. You'll need to import:
import 'rxjs/add/observable/from';
import {Observable} from 'rxjs/Observable';
Setup your spy:
const loginResult = '';
const spy = spyOn(authService, 'login').and.callFake(() => {
return Observable.from([loginResult]);
})
Call login:
fixture.componentInstance.login();
Assert:
expect(spy).toHaveBeenCalled();