I am trying to test some api calls in Jest, however the test is failing as the api call is dependent on another call to complete first, so the returned value is empty as opposed to what should be in there. I am using react-query for the api calls. Or is there a better or other way to test async calls? I am using MSW also, to intercept the api calls.
Async call
const getApi = async (): Promise<any> => {
const response = await axios.get(`https://www.xxxxx`).then(res => res.data);
return response;
}
test
const queryClient = new QueryClient()
describe('Comp1 tests', (): void => {
beforeEach(() => {
jest.useFakeTimers();
});
it('Should give correct response with render', async () => {
renderWithQueryClient(<QueryClientProvider client={queryClient}><Comp1 /></QueryClientProvider>);
expect(await screen.findByTestId('main-header')).toBeInTheDocument();
});
});
I get:
Unable to find an element by: [data-testid="main-header"]
Related
I have the following jest test configuration for my collection of AWS JS Node Lambdas. I have a module called dynamoStore I reference in several different lambdas package.json and use within the lambdas. I am trying to get test one of these lambdas by mocking the dynamo store module as it makes calls to dynamoDb. The problem is that the jest.fn implementation never gets called. I confirmed this by sticking a breakpoint in that line as well as logging the value the calling methods returns from it.
When I check lambda1/index.js in the debugger getVehicleMetaKeysFromDeviceId() is a jest object but when it is called it doesn't use my mock implementation
How do I get this implementation to work? Have I set up my mock incorrectly?
dynamoStore/vehicleMetaConstraints
exports.getVehicleMetaKeysFromDeviceId= async (data) => {
return data
};
dynamoStore/index.js
exports.vehicleMetaConstraints = require("./vehicleMetaConstraints");
...
lambda1/index.js
const { vehicleMetaStore } = require("dynamo-store");
exports.handler = async (event, context, callback) => {
const message = event;
let vehicle_ids = await vehicleMetaStore.getVehicleMetaKeysFromDeviceId(message.id);
// vehicle_ids end up undefined when running the test
}
lambda1/index.test.js
const { vehicleMetaStore } = require("dynamo-store");
jest.mock("dynamo-store", () => {
return {
vehicleMetaStore: {
getVehicleMetaKeysFromDeviceId: jest.fn(),
},
};
});
describe("VehicleStorageLambda", () => {
beforeEach(() => {
jest.resetModules();
process.env = { ...env };
});
afterEach(() => {
jest.clearAllMocks();
});
test("Handles first time publish with existing device", async () => {
let functionHandler = require("./index");
vehicleMetaStore.getVehicleMetaKeysFromDeviceId.mockImplementationOnce(() =>
// This never gets called
Promise.resolve({
device_id: "333936303238510e00210022",
})
);
await functionHandler.handler({});
});
});
Remove the call to jest.resetModules() in beforeEach. That's re-importing your modules before each test, and wiping out your mocks.
https://stackoverflow.com/a/59792748/3084820
I am using Jest testing Library for some simple async/await functions. But it's failing again and again as I am very new to jest. and can you please answer what expect.assertions(1) do here
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
id: 1,
name: "test",
age: 20,
});
}, 1000);
});
}
test("test async await", async () => {
const data = await fetchData();
expect(data.id).toBe(1);
});
test("async await error", async () => {
expect.assertions(1);
try {
await fetchData();
} catch (e) {
expect(e).toMatch("error");
}
});
As I pointed out in the comments, the test for the "failure" case doesn't really make sense if this fetchData is the real function because it never 'rejects'. To test the failure case in Jest, you'd need to somehow trigger the Promise.reject case.
If we assume this fetchData is a wrapper on an api call or something else, we could imagine something like this.
You might have a library or module that is making api calls like:
// api.js
const api = {
actualFetchData: () => {
// this is the function that actually connects
// to a data source and returns data
},
};
module.exports = api;
And your fetchData function which you're trying to test looks like:
// fetchData.js
const api = require("./api");
function fetchData() {
return api.actualFetchData();
}
module.exports = fetchData;
Then, assuming this structure matches what you're working on, you can mock the internals of fetchData and test both success and failure cases by mocking actualFetchData and using mockResolvedValue and mockRejectedValue.
// fetchData.test.js
const fetchData = require("./fetchData");
const api = require("./api");
jest.mock("./api");
const mockApiFetch = jest.fn();
api.actualFetchData = mockApiFetch;
describe("when the underlying fetch resolves", () => {
beforeEach(() => {
mockApiFetch.mockResolvedValue({
id: 1,
name: "test",
age: 20,
});
});
test("test async await", async () => {
const data = await fetchData();
expect(data.id).toBe(1);
});
});
describe("when the underlying fetch fails", () => {
beforeEach(() => {
mockApiFetch.mockRejectedValue(new Error("failed to get data"));
});
test("async await error", async () => {
expect(() => fetchData()).rejects.toThrow("failed to get data");
});
});
You'll notice I didn't use the expect.assertions because it didn't seem like it added anything to the test. Instead, just used toThrow with text that matches the error.
I realize this is making some assumptions about a system that you haven't fully described in the initial question so this may not be exactly what you're trying to get at. Hopefully it's close.
I have a function which has 2 APi calls. Iam destructuring the response and sending each response to different functions to perform some operation. I need to write test case to make API call., fetch response & pass it to respective functions.
This is my code
async _fetchComponentDetails() {
const [firstResponse, secondResponse] = await Promise.all([
this._getfirstApiResponse(param1, param2),
this._getSecondApiResponse(param1, param2),
]);
this.formatFirstApiResult = await componentSerives.formatFirstResponseData(firstResponse);
this.formatSecondApiResult = await componentSerives.formatSecondResponseData(secondResponse);
}
This is my Service call
async _getfirstApiResponse(param1, param2) {
const url = 'api/firstApi';
const firstResponse = await componentSerives.fetchApiDetails(url, param1, param2);
return firstResponse;
}
async _getSecondApiResponse(param1, param2) {
const url = 'api/secondApi';
const secondResponse = await componentSerives.fetchApiDetails(url, param1, param2);
return secondResponse;
}
This is the Test case I written
it('it should make make API calls for first and second',async () => {
sinon.stub(componentSerives, 'fetchApiDetails').resolves(bannerResponse);
});
The issue iam facing is., I dont know how to send both first & second APi response in resolves();
on passing it as an array of objects like below., I see firstResponse & secondResponse loading in both objects.
[{firstResponse, secondResponse}]
can you help me how to stub both the APis and assign it to different responses in destructuring?
You are stubbing the wrong thing, according to your own test:
it('it should make make API calls for first and second',async () => {
If you are testing fetchApiDetails you cannot stub that function out. That makes no sense! Then you would just be testing your own stub.
What you need to stub out or inject, are its dependencies: _getfirstApiResponse and _getSecondApiResponse. Stub those out simply by having them just resolve some value:
const firstResponse = 42;
const secondResponse = -42;
sinon.replace(componentSerives, '_getfirstApiResponse', sinon.fake.resolves(firstResponse));
sinon.replace(componentSerives, '_getSecondApiResponse', sinon.fake.resolves(secondResponse ));
await componentSerives.fetchApiDetails();
assertEquals(componentSerives.formatFirstApiResult, "Result: 42");
assertEquals(componentSerives.formatSecondApiResult, "Result: -42");
I have a DataService which is responsible for my API calls - I am trying to mock the api call in jest but it does not seem to be working. I am not sure what I am doing wrong - my DataService seems to be undefined.
Here is the function
const getStepData = (id) => {
return async dispatch => {
try {
dispatch(fetchStepBegin());
const res = await DataService.fetchStepData(id);
const sortedTask = sortedTaskData(res)
const sortedStepData = sortStepData(res)
const newData = createSortedDataForDragAndDrop(sortedTask, sortedStepData)
dispatch(fetchRawStepDataSuccess(res.data))
dispatch(fetchStepDataSuccess(newData))
}
catch (err) {
dispatch(fetchStepError(err))
throw (err)
}
}
}
Here is the test that I have written - I am pretty sure I am mocking incorrectly
it('Data Api end point called with corrent studyId', () => {
jest.mock(DataService);
DataService.fetchStepData() = jest.fn()
CellStepManagementOperations.getStepData(5);
expect(DataService.fetchStepData).toHaveBeenCalledWith(5);
});
I think the problem here is that you are trying to test asynchronous action creators, synchronously. So your expect function doesn't wait for your getStepData to finish before running.
I've had to something very similar to what you're trying to do and I used a library called redux-testkit. Please see the part about testing async action creators with services here. You can even set mock return values for your API services which I've found very helpful when testing.
Using this library, you will be able to await for your getStepData async action creator to complete before running your expect function.
You will have to play around with your code but it might look something like this:
it('Data Api end point called with corrent studyId', () => {
jest.mock(DataService);
DataService.fetchStepData() = jest.fn()
const dispatches = await Thunk(CellStepManagementOperations.getStepData).execute(5);
expect(DataService.fetchStepData).toHaveBeenCalledWith(5);
});
As part of my redux action, it makes several sequential api requests. The apiCall method returns a Promise with some value, and that value is used by a subsequent apiCall to make another request, and so on. I'm using Jest to test these api calls.
const myAPI = {
apiCall(param: any): Promise<any> {
return new Promise((resolve, reject) => {
resolve('result');
});
},
};
const serialAPIRequests = () => {
myAPI.apiCall('first_param')
.then((result) => {
console.log(result);
return myAPI.apiCall(result);
})
.then((result) => {
console.log(result);
return myAPI.apiCall(result);
})
.then((result) => {
console.log(result);
return Promise.resolve(result);
});
};
I am trying to write a test to ensure apiCall has been called the correct number of times and with the right parameters.
describe.only('my test', () => {
it('should test api stuff', () => {
myAPI.apiCall = jest.fn()
.mockReturnValueOnce(Promise.resolve('result1'))
.mockReturnValueOnce(Promise.resolve('result2'))
.mockReturnValueOnce(Promise.resolve('result3'));
serialAPIRequests();
expect(myAPI.apiCall).toHaveBeenCalledTimes(3);
});
});
What happens is that Jest report Expected mock function to have been called three times, but it was called one time.
Jest test result shows that
● Console
console.log
result1
console.log
result2
console.log
result3
● my test › should test api stuff
expect(jest.fn()).toHaveBeenCalledTimes(3)
Expected mock function to have been called three times, but it was called one time.
The fact that console.log showed different values means the mocked return was properly passed through the mock function and it was called 3 times.
What could be causing this and how do I properly test this function?
Use async/await to test async code. Read more here: https://facebook.github.io/jest/docs/en/tutorial-async.html
describe.only('my test', () => {
it('should test api stuff', async () => {
myAPI.apiCall = jest.fn()
.mockReturnValueOnce(Promise.resolve('result1'))
.mockReturnValueOnce(Promise.resolve('result2'))
.mockReturnValueOnce(Promise.resolve('result3'));
await serialAPIRequests();
expect(myAPI.apiCall).toHaveBeenCalledTimes(3);
});
});
Promises are async so by the time you do you check the mock was actually called once.
You could do this instead. Wait for all calls to be done and return a promise to indicate the test is async.
return serialAPIRequests().then(() => {
expect(myAPI.apiCall).toHaveBeenCalledTimes(3);
})