I have a simple composable useRoles which I need to test
import { computed } from "vue";
import { useStore } from "./store";
export default function useRoles() {
const store = useStore();
const isLearner = computed(() => store.state.profile.currentRole === "learner");
return {
isLearner
};
}
My approach of testing it is the following
import { afterEach, expect } from "vitest";
import useRoles from "./useRoles";
describe("useRoles", () => {
afterEach(() => {
vi.clearAllMocks();
vi.resetAllMocks();
});
it("should verify values when is:Learner", () => { // works
vi.mock("./store", () => ({
useStore: () => ({
state: {
profile: {
currentRole: "learner"
},
},
}),
}));
const { isLearner } = useRoles();
expect(isLearner.value).toBeTruthy();
});
it("should verify values when is:!Learner", () => { //fails
vi.mock("./store", () => ({
useStore: () => ({
state: {
profile: {
currentRole: "admin"
},
},
}),
}));
const { isLearner } = useRoles(); // Values are from prev mock
expect(isLearner.value).toBeFalsy();
});
});
And useStore is just a simple function that I intended to mock
export function useStore() {
return {/**/};
}
The first test runs successfully, it has all the mock values I implemented but the problem is that it's not resetting for each test (not resetting at all). The second test has the old values from the previous mock.
I have used
vi.clearAllMocks();
vi.resetAllMocks();
but for some reason clear or reset is not happening.
How can I clear vi.mock value for each test?
Solution
As it turned out I should not be called vi.mock multiple times. That was the main mistake
Substitutes all imported modules from provided path with another module. You can use configured Vite aliases inside a path. The call to vi.mock is hoisted, so it doesn't matter where you call it. It will always be executed before all imports.
Vitest statically analyzes your files to hoist vi.mock. It means that you cannot use vi that was not imported directly from vitest package (for example, from some utility file)
Docs
My fixed solution is below.
import useRoles from "./useRoles";
import { useStore } from "./store"; // Required the mock to work
vi.mock("./store");
describe("useRoles", () => {
afterEach(() => {
vi.clearAllMocks();
vi.resetAllMocks();
});
it("should verify values when is:Learner", () => {
// #ts-ignore it is a mocked instance so we can use any vitest methods
useStore.mockReturnValue({
state: {
profile: {
currentRole: "learner",
},
},
});
const { isLearner } = useRoles();
expect(isLearner.value).toBeTruthy();
});
it("should verify values when is:!Learner", () => {
// You need to use either #ts-ignore or typecast it
// as following (<MockedFunction<typeof useStore>>useStore)
// since original function has different type but vitest mock transformed it
(<MockedFunction<typeof useStore>>useStore).mockReturnValue({
state: {
profile: {
currentRole: "admin",
},
},
});
const { isLearner } = useRoles();
expect(isLearner.value).toBeFalsy();
});
});
vitest = v0.23.0
I ran into the same issue and was able to find a workaround. In your case it should look like this:
import { afterEach, expect } from "vitest";
import useRoles from "./useRoles";
vi.mock("./store");
describe("useRoles", () => {
it("should verify values when is:Learner", async () => {
const store = await import("./store");
store.useStore = await vi.fn().mockReturnValueOnce({
useStore: () => ({
state: {
profile: {
currentRole: "learner"
},
},
}),
});
const { isLearner } = useRoles();
expect(isLearner.value).toBeTruthy();
});
it("should verify values when is:!Learner", async () => {
const store = await import("./store");
store.useStore = await vi.fn().mockReturnValueOnce({
useStore: () => ({
state: {
profile: {
currentRole: "admin"
},
},
}),
});
const { isLearner } = useRoles(); // Value is from current mock
expect(isLearner.value).toBeFalsy();
});
});
Related
I have a button and will make an API call in the onclick function. The api .js is under the /api. It works well when I manually test it. However, I failed the unit test of the component because somehow it cannot find the api. I'm pretty new to the vuex test and not sure what is the correct way to mock the api call here.
Here is the click function in the component
methods: {
...mapActions([
'setNewField',
]),
async updateFields () {
const newField = {
value: this.fieldName,
text: this.fieldName,
}
await this.setNewField(newField)
}
}
Here is the related actions part in vue store. It calls the api and update the state
export const actions = {
async setNewField ({ commit }, field) {
await this.$app.$api.putField(field.value)
commit('SET_NEW_FIELD', field)
}
}
Here is the tester
describe('Selector', () => {
let store
let wrapper
let $app
const setNewFieldFunction = jest.fn()
beforeEach(() => {
jest.resetAllMocks()
$app = {
$api : {
putField: jest.fn()
}
}
store = new Vuex.Store({
modules: {
options: cloneDeep(optionsModule),
headers: {
actions: {
setNewField: setNewFieldFunction,
}
}
}
})
wrapper = shallowMount(Selector, { store, mocks: { $app } })
})
it('should add a field', async () => {
// add a field
expect(addButton.vm.disabled).toEqual(true)
fieldName.vm.$emit('input', 'TEST Field 1')
expect(addButton.vm.disabled).toEqual(false)
addButton.vm.$emit('click')
treeview.vm.$emit('input', ['TEST Field 1'])
await flushPromises()
expect(wrapper.vm.fieldName).toEqual('TEST Field 1')
expect(setNewFieldFunction).toHaveBeenCalled()
})
})
Thanks for any help!!
When using Jest to test a function I have that makes a call to external API I get an error about only being able to use a hooks inside of a functional component.
My function(useGetGophys) uses useQuery from react-query which is the hook.
I would like to be able to test the useGetGophy with jest please?
I am mocking the actual fetch request as can be seen in the test file code below.
useGetGophy.js
import { useMemo } from 'react'
import { useQuery } from 'react-query'
import urlGenerator from "../utils/urlGenerator"
export default function useGetGophys({ query, limit }) {
const url = urlGenerator({ query, limit })
const { data, status } = useQuery(["gophys", { url }], async () => {
const res = await fetch(url)
return res.json()
})
return {
status,
data,
}
}
Test file
useGetGophy.test.js
import useGetGophys from '../services/useGetGophys'
import { renderHook } from '#testing-library/react-hooks'
import { QueryClient, QueryClientProvider } from "react-query"
const desiredDataStructure = [{
id: expect.any(String),
images: {
fixed_width_downsampled: {
url: expect.any(String),
width: expect.any(String),
height: expect.any(String),
},
},
embed_url: expect.any(String),
bitly_gif_url: expect.any(String),
url: expect.any(String),
title: expect.any(String),
}]
global.fetch = jest.fn(() =>
Promise.resolve({
json: () => Promise.resolve(desiredDataStructure)
})
)
describe('getGetGophy - ', () => {
test('returns correctly structured data', async () => {
const gophys = useGetGophys('https://api.giphy.com/v1/gifs/trending?q=daniel&api_key=00000000&limit=15&rating=g')
expect(gophys).toBe(desiredDataStructure)
})
})
You would need to render your hook using testing-library/react-hooks. As long as you are returning an object, check for result.current.data, something like:
import { renderHook } from '#testing-library/react-hooks';
test('returns correctly structured data', () => {
const { result } = renderHook(() => useGetGophys('yourUrl'));
expect(result.current.data).toEqual(desiredDataStructure);
});
I'm mocking the #elastic/elasticsearch library and I want to test that the search method is called with the right arguments but I'm having issues accessing search from my tests.
In my ES mock I just export an object that includes a Client prop that returns another object that has the search prop. This is the way search is accessed from the library
const { Client } = require('#elastic/elasticsearch')
const client = new Client(...)
client.search(...)
__mocks__/#elastic/elasticsearch
module.exports = {
Client: jest.fn().mockImplementation(() => {
return {
search: (obj, cb) => {
return cb(
'',
{
statusCode: 200,
body: {
hits: {
hits: [
{
_source: esIndexes[obj.index]
}
]
}
}
}
)
}
}
})
}
__tests__/getAddresses.test.js
const { getAddresses } = require('../src/multiAddressLookup/utils/getAddresses')
const { Client } = require('#elastic/elasticsearch')
beforeEach(() => {
process.env.ES_CLUSTER_INDEX = 'foo'
process.env.ui = '*'
})
describe('multiAddressLookup', () => {
test('Should return the correct premises data with only the relevant "forecasted_outages"', async () => {
const event = {
foo: 'bar'
}
const esQueryResponse = {
"body": "\"foo\":\"bar\"",
"headers": {"Access-Control-Allow-Origin": '*'},
"statusCode": 200
}
await expect(getAddresses(event)).resolves.toEqual(esQueryResponse)
expect(Client().search).toHaveBeenCalled() // This fails with 0 calls registered
})
})
I'm not sure of any exact documentation for this scenario but I got the idea while looking through the Jest: The 4 ways to create an ES6 Mock Class - Automatic mock portion of the Jest documentation.
First, the search method in the ES mock, __mocks__/#elastic/elasticsearch, needs to be converted into a jest mock function, jest.fn(). Doing this gives us access to properties and values that jest mocks provide.
__mocks__/#elastic/elasticsearch.js converted
module.exports = {
Client: jest.fn().mockImplementation(() => {
return {
search: jest.fn((obj, cb) => {
return cb(
'',
{
statusCode: 200,
body: {
hits: {
hits: [
{
_source: esIndexes[obj.index]
}
]
}
}
}
)
})
}
})
}
Second, in our tests we need to follow the path from the Client mock class until we find out methods. The syntax is MockClass.mock.results[0].value.mockFunction.
Example Test
const { Client } = require('#elastic/elasticsearch') // This is located in the "__mocks__" folder in the root of your project
const { getAddresses } = require('../../src/getAddresses') // This is the file we wrote and what we are unit testing
describe('getAddresses', () => {
it('Should call the ES Search method', async () => {
const event = { ... }
const expected = { ... }
await expect(getAddresses(event)).resolves.toEqual(expected) // pass
expect(Client.mock.results[0].value.search).toHaveBeenCalled() // pass
})
})
I'm trying to figure out how to mock a constant (DEFAuLT_OPTIONS) with Jest in my test file
I have the following file structure:
src/
Builder/
- Constants.js
- Builder.js
- Builder.test.js
Files
// Constants.js
// Define a set of defaults to be used in my production build
const DEFAULT_OPTIONS = {
enableTransparency: true,
threshold: 100
};
export {
DEFAULT_OPTIONS
}
// Builder.js
// Exports a `buildTree` function, which uses the constants
import { DEFAULT_OPTIONS } from './Constants';
function buildTree(options) {
return {
root: '/',
options: { ...options, ...DEFAULT_OPTIONS }
};
}
export { buildTree };
// Builder.test.js
import { DEFAULT_OPTIONS } from './Constants';
import { buildTree } from './Builder';
describe('Builder', () => {
it('some description', () => {
// How to mock value of `DEFAULT_OPTIONS` here so that
// the call to `buildGTree` uses my mocked version?
const options = { foo: 'bar' };
const result = buildTree(options);
});
});
How can I -
Mock the value of DEFAULT_OPTIONS for a single test?
Mock the value of DEFAULT_OPTIONS for a suite of tests? (If different)
Thanks!
EDIT: I tried the following but the module seems to have a value of undefined
const mockDefaultOptions = {
optionA: 'a',
optionB: 'b'
}
jest.mock('./Constants', () => ({
DEFAULT_OPTIONS: mockDefaultOptions,
}));
You don't really need jest.mock as it's just a constant.
You can:
// import constants
import Constants from './Constants'
// modify DEFAULT_OPTIONS' value
Constants.DEFAULT_OPTIONS = {
threshold: 444
}
// then invoke your function
const result = buildTree(options);
and this is how you can modify it for a suit of tests
import { buildTree } from "./Builder";
describe("Builder", () => {
describe.each([333, 444, 555])(
"with DEFAULT_OPTIONS.threshhold = %d",
(threshold) => {
describe("buildTree", () => {
const Constants = require("./Constants");
const options = { foo: "bar" };
let result;
beforeAll(() => {
Constants.DEFAULT_OPTIONS = {
threshold,
};
result = buildTree(options);
});
it("some description", () => {
expect(result).toHaveProperty("options", {
...options,
threshold,
});
});
});
}
);
});
im having this method in my component that makes an API call with axios, I checked the docs on how to test it but I cant seem to figure out how to do so. Any help would be appreciated.
loadContents() {
axios.get('/vue_api/content/' + this.slug).then(response => {
this.page_data = response.data.merchandising_page
}).catch(error => {
console.log(error)
})
},
You could use moxios or axios-mock-adapter to automatically mock Axios requests. I prefer the latter for developer ergonomics.
Consider this UserList component that uses Axios to fetch user data:
// UserList.vue
export default {
data() {
return {
users: []
};
},
methods: {
async loadUsers() {
const { data } = await axios.get("https://api/users");
this.users = data;
}
}
};
With axios-mock-adapter, the related test stubs the Axios GET requests to the API URL, returning mock data instead:
import axios from "axios";
const MockAdapter = require("axios-mock-adapter");
const mock = new MockAdapter(axios);
import { shallowMount } from "#vue/test-utils";
import UserList from "#/components/UserList";
describe("UserList", () => {
afterAll(() => mock.restore());
beforeEach(() => mock.reset());
it("loads users", async () => {
mock
.onGet("https://api/users")
.reply(200, [{ name: "foo" }, { name: "bar" }, { name: "baz" }]);
const wrapper = shallowMount(UserList);
await wrapper.vm.loadUsers();
const listItems = wrapper.findAll("li");
expect(listItems).toHaveLength(3);
});
});
demo