I am testing react native app using jest and react native testing library which uses redux saga for api calls.Below is my generators and watchers.
//dispatch action
deleteStock: stock => {
console.log(stock);
dispatch({type: DELETE_STOCK.REQUEST, payload: stock});
}
The above function is called from the component while testing as console log prints the stock but logs are not getting printed in generator function which implies that this generator function is not calling. But the app works perfectly!
yield takeLatest(DELETE_STOCK.REQUEST, deleteStockFromWatchlist);
function* deleteStockFromWatchlist(stock) {
console.log('stock before delete', stock);
try {
const res = yield call(
request,
REMOVE_SYMBOL,
DELETE,
{},
{},
stock.payload,
true,
);
console.log('stock after delete', res);
if (res?.success) {
yield put({type: DELETE_STOCK.SUCCESS, data: stock?.payload});
} else {
yield put({type: DELETE_STOCK.FAILED});
}
} catch (error) {
yield put({type: DELETE_STOCK.FAILED});
}
}
My test case :
test('stock removes on deleting', async () => {
fireEvent.press(screen.getByRole('button', {name: 'delete INFY'}));
axios.mockResolvedValueOnce({status: 200, data: 'stock deleted'});
await screen.findByRole('tab', {name: 'INFY'});
})
Related
Node version: v12.18.3
Sails version (sails): 1.2.3
I am unable to stub a sails helper when performing unit tests. I have a helper that handles all the communication with a database. Moreover, I have an API, which uses this helper. In my tests, I am trying to stub the helper using sinon as such:
The API:
fn: async function (inputs, exits) {
// Stuff done here
// I need to stub this helper
let result = await sails.helpers.arangoQuery.with({
requestId: REQUEST_ID,
query: query,
queryParams: params
});
}
My test:
describe('Get Organization', () => {
it('Server Error - Simulates a failure in fetching the data from ArangoDB', (done) => {
sinon.stub(sails.helpers, 'arangoQuery').returns(null, {status: "success"});
supertest(sails.hooks.http.app)
.get('/organization')
//.expect(200)
.end((error, response) => {
return done()
}
})
})
When I run the test, I get the following error:
error: Error: cannot GET /organization (500)
at Response.toError (/opt/designhubz/organization-service/node_modules/superagent/lib/node/response.js:94:15)
at ResponseBase._setStatusProperties (/opt/designhubz/organization-service/node_modules/superagent/lib/response-base.js:123:16)
at new Response (/opt/designhubz/organization-service/node_modules/superagent/lib/node/response.js:41:8)
at Test.Request._emitResponse (/opt/designhubz/organization-service/node_modules/superagent/lib/node/index.js:752:20)
at /opt/designhubz/organization-service/node_modules/superagent/lib/node/index.js:916:38
at IncomingMessage.<anonymous> (/opt/designhubz/organization-service/node_modules/superagent/lib/node/parsers/json.js:19:7)
at IncomingMessage.emit (events.js:327:22)
at endReadableNT (_stream_readable.js:1220:12)
at processTicksAndRejections (internal/process/task_queues.js:84:21) {
status: 500,
text: '{}',
method: 'GET',
path: '/organization'
}
There are no documentations at all regarding this issue. Can anyone tell me how I can stub a helper?
Sails helpers uses machine, this makes stub making trickier.
AFAIK, the alternative to stub sails helpers is by stubbing the real fn function, because machine will call helper's fn function.
Update: change example that use supertest.
For example:
I create endpoint GET /hello using HelloController,
I use helpers format-welcome-message from helper's example,
I create test spec for endpoint GET /hello.
I run it using mocha without lifecycle.js but embed the lifecycle inside test spec (reference).
Endpoint GET /hello definition:
// File: HelloController.js
module.exports = {
hello: async function (req, res) {
// Dummy usage of helper with predefined input test.
const output = await sails.helpers.formatWelcomeMessage.with({ name: 'test' });
// Just send the output.
res.send(output);
}
};
And do not forget to add route: 'GET /hello': 'HelloController.hello' at config/routes.js.
Test spec contains 3 cases (normal call, stub error, and stub success).
// File: hello.test.js
const sails = require('sails');
const sinon = require('sinon');
const { expect } = require('chai');
const supertest = require('supertest');
describe('Test', function () {
let fwm;
// Copy from example testing lifecycle.
before(function(done) {
sails.lift({
hooks: { grunt: false },
log: { level: 'warn' },
}, function(err) {
if (err) { return done(err); }
// Require helper format welcome message here!
fwm = require('../api/helpers/format-welcome-message');
return done();
});
});
after(function(done) {
sails.lower(done);
});
it('normal case', function (done) {
// Create spy to make sure that real helper fn get called.
const spy = sinon.spy(fwm, 'fn');
supertest(sails.hooks.http.app)
.get('/hello')
.expect(200)
// Expect endpoint output default value.
.expect('Hello, test!')
.end(function() {
// Make sure spy is called.
expect(spy.calledOnce).to.equal(true);
// Restore spy.
spy.restore();
done();
});
});
it('case stub error', function (done) {
// Stub the real fn function inside custom helper.
const stubError = sinon.stub(fwm, 'fn');
stubError.callsFake(async function (input, exits) {
// Setup your error here.
exits.error(new Error('XXX'));
});
supertest(sails.hooks.http.app)
.get('/hello')
.expect(500)
.end(function() {
// Make sure stub get called once.
expect(stubError.calledOnce).to.equal(true);
// Restore stub.
stubError.restore();
done();
});
});
it('case stub success', function (done) {
// Define fake result.
const fakeResult = 'test';
// Stub the real fn function inside custom helper.
const stubSuccess = sinon.stub(fwm, 'fn');
stubSuccess.callsFake(async function (input, exits) {
// Setup your success result here.
exits.success(fakeResult);
});
supertest(sails.hooks.http.app)
.get('/hello')
// Expect endpoint to output fake result.
.expect(fakeResult)
.end(function() {
// Make sure stub get called once.
expect(stubSuccess.calledOnce).to.equal(true);
// Restore stub.
stubSuccess.restore();
done();
});
});
});
When I run it using mocha:
$ npx mocha test/hello.test.js
Test
✓ normal case
error: Sending 500 ("Server Error") response:
Error: XXX
at Object.<anonymous> ...
✓ case stub error
✓ case stub success
3 passing (407ms)
$
I'm using Jest to test a function from a service that uses axios to make some api calls. The problem is that Jest keeps calling the actual services function instead of the mocked service function. Here is all of the code:
The tests:
// __tests__/NotificationService.spec.js
const mockService = require('../NotificationService').default;
beforeEach(() => {
jest.mock('../NotificationService');
});
describe('NotificationService.js', () => {
it('returns the bell property', async () => {
expect.assertions(1);
const data = await mockService.fetchNotifications();
console.log(data);
expect(data).toHaveProperty('data.bell');
});
});
The mock:
// __mocks__/NotificationService.js
const notifData = {
bell: false,
rollups: [
{
id: 'hidden',
modifiedAt: 123,
read: true,
type: 'PLAYLIST_SUBSCRIBED',
visited: false,
muted: false,
count: 3,
user: {
id: 'hidden',
name: 'hidden'
},
reference: {
id: 'hidden',
title: 'hidden',
url: ''
}
}
],
system: [],
total: 1
};
export default function fetchNotifications(isResolved) {
return new Promise((resolve, reject) => {
process.nextTick(() =>
isResolved ? resolve(notifData) : reject({ error: 'It threw an error' })
);
});
}
The service:
import axios from 'axios';
// hardcoded user guid
export const userId = 'hidden';
// axios instance with hardcoded url and auth header
export const instance = axios.create({
baseURL: 'hidden',
headers: {
Authorization:
'JWT ey'
}
});
/**
* Notification Service
* Call these methods from the Notification Vuex Module
*/
export default class NotificationService {
/**
* #GET Gets a list of Notifications for a User
* #returns {AxiosPromise<any>}
* #param query
*/
static async fetchNotifications(query) {
try {
const res = await instance.get(`/rollups/user/${userId}`, {
query: query
});
return res;
} catch (error) {
console.error(error);
}
}
}
I've tried a couple of variations of using require instead of importing the NotificationService, but it gave some other cryptic errors...
I feel like I'm missing something simple.
Help me please :)
The problem is that Jest keeps calling the actual services function instead of the mocked service function.
babel-jest hoists jest.mock calls so that they run before everything else (even import calls), but the hoisting is local to the code block as described in issue 2582.
I feel like I'm missing something simple.
Move your jest.mock call outside the beforeEach and it will be hoisted to the top of your entire test so your mock is returned by require:
const mockService = require('../NotificationService').default; // mockService is your mock...
jest.mock('../NotificationService'); // ...because this runs first
describe('NotificationService.js', () => {
it('returns the bell property', async () => {
...
});
});
How to make my test wait for the result of my api?
I'm using vue and jest to test my components.
I want to test the method that writes a client to my database. In my component I have the following method:
methods: {
onSubmitClient(){
axios.post(`urlApi`, this.dados).then(res => {
return res;
})
}
}
in my test
describe('login.vue', () => {
let wrapper
beforeAll(()=>{
wrapper = mount(client, {
stubs: ['router-link'],
store,
data() {
return {
dados: {
name: 'tes name',
city: 'test city'
},
};
}
})
})
it('store client', () => {
res = wrapper.vm.onSubmitLogin()
console.log(res);
})
})
My test does not wait for the API call to complete. I need to wait for the API call to know if the test worked. How can I make my test wait for API return?
There are several issues in your code.
First, you cannot return from an async call. Instead, you should be probably setting up some data in your onSubmitClient, and returning the whole axioscall, which is a Promise. for instance:
onSubmitClient(){
return axios.post(`urlApi`, this.dados).then(res => {
this.result = res;
return res;
})
}
I assume the method here is storing a result from the server. Maybe you don't want that; it is just an example. I'll come back to it later.
Ok, so now, you could call onSubmitClient in your wrapper and see if this.result is already set. As you already know, this does not work straightforward.
In order for a jest test to wait for asynchronous code, you need either to provide a done callback function or return a promise. I'll show an example with the former:
it('store client', (done) => {
wrapper.vm.onSubmitLogin().then((res) => {
expect(wrapper.vm.dados).toEqual(res);
done();
})
});
Now this code should just work, but still there is an issue with it, as #jonsharpe says in a comment.
You usually don't want to perform real network requests in unitary tests because they are slow and unrealiable. Also, unitary tests are meant to test components in isolation, and here we are testing not only that our component sets this.result properly when the request is made. We are also testing that there is a webserver up and running that is actually working.
So, what I would do in this scenario to test that single piece of functionality, is to extract the request to another method, mock it with vue-test-utils and jest.fn, and then assert that onSubmitClient does its work:
The component:
export default {
data() {
return {
http: axios,
...
},
methods: {
onSubmitClient(){
this.http.post(`urlApi`, this.dados).then(res => {
this.result = res;
})
}
}
}
}
The test:
it('store client', (done) => {
const fakeResponse = {foo: 'bar'};
var post = jest.fn();
var http : {
post,
};
var wrapper = mount(client, {
stubs: ['router-link'],
store,
data() {
return {
dados: {
name: 'tes name',
city: 'test city'
},
http, //now, the component under test will user a mock to perform the http post request.
}
}
});
wrapper.vm.onSubmitLogin().then( () => {
expect(post).toHaveBeenCalled();
expect(wrapper.vm.result).toEqual(fakeResponse);
done();
})
});
Now, your test asserts two things:
post gets called.
this.result is set as it should be.
If you don't want to store anything in your component from the server, just drop the second assertion and the this.result = res line in the method.
So basically this covers why your test is not waiting for the async request and some issues in your code. There are still some things to consider (f.i. I think a global wrapper is bad idea, and I would always prefer shallowMount over mount when testing components behavior), but this answer should help you a lot.
PS: didn't test the code, so maybe I messed up something. If the thing just doesn't work, look for syntax errors or similar issues.
Trying to test some services I'm writing that interact with a 3rd party API and wondering how to test it efficiently.
I have the next method:
function getMemberProfile(memberId) {
//Make sure memberId is defined and that it is a number
if (!isNaN(memberId)) {
return Client.authorizedApiRequest('/members/' + memberId).get();
}
return Promise.reject(new Error('Proper memberId was not supplied'));
}
When Client.authorizedApiRequest('/members/' + memberId).get() calls a 3rd party API and returns a Promise that resolves to some Object (i.e. {id:12,name:'John Doe'}).
So, how should I test the getMemberProfile function? I was thinking about mocking out the Client.authorizedApiRequest("some params").get() with sinon but I can't get it working.
Thanks
OK, got it working. First you'll need to install chai. Then, in your spec file:
beforeEach(function () {
fakeMember = {
member: {
id: 10002,
first_name: 'John',
last_name: 'Doe'
}
};
});
it('should get a member\'s profile by memberId', function () {
//mock
sinon.stub(Client, 'authorizedApiRequest').withArgs('/members/' + fakeMember.member.id).returns({
get: function () {
return Promise.resolve(fakeMember);
}
});
return Members.getMemberProfile(fakeMember.member.id).then(function (response) {
expect(response).to.have.property('member');
expect(response.member).to.have.property('id', fakeMember.member.id);
expect(response.member).to.have.property('first_name', fakeMember.member.first_name);
expect(response.member).to.have.property('last_name', fakeMember.member.last_name);
});
});
I am getting a timeout of 2000ms exceeded message when running the following tests for my Backbone application.
How can I get this test to pass?
I am also trying to listen for the event's being triggered when calling more. How could this be tested?
describe("Foo.Collection.Items/Discover", function () {
describe("More method", function () {
beforeEach(function () {
this.server = sinon.fakeServer.create();
this.hasLength = sinon.spy(Foo.View.ItemFeed.prototype, "toggleFeedback");
this.noLength = sinon.spy(Foo.View.ItemFeed.prototype, "stopLazyload");
this.item1 = new Foo.Model.item({
description: "A swell minions movie!",
for_sale: false,
title: "Minions: Goldfinger",
link: "/discover",
'private': false,
'main_image': false
});
this.item2 = new Foo.Model.item({
description: "A round pot",
for_sale: true,
title: "Pot",
link: "/discover",
'private': true,
'main_image': true
});
this.itemsDiscover = new Foo.Collection.Items([this.item1, this.item2], {url: "/discover"});
});
afterEach(function () {
this.server.restore();
this.hasLength.restore();
this.noLength.restore();
});
it("should fetch items and trigger moreFetched", function (done) {
this.server.respondWith('GET', "/discover", [
200,
{"Content-type": "application/json"},
JSON.stringify([this.item1, this.item2])
]);
this.itemsDiscover.once("add", function () {
expect(this.itemsDiscover).to.have.length(2);
expect(this.hasLength).to.be.calledOnce();
done();
});
this.itemsDiscover.more();
});
});
});
The part of the Backbone Collection I am trying to test:
more: function () {
var collection = this;
this.fetch({
success: function (collection, response) {
if (response.length) {
collection.trigger('moreFetched');
} else {
collection.trigger('emptyFetched');
}
},
reset: false,
remove: false
});
}
I guess that you have an exception that avoids to call done, try
this.itemsDiscover.once("add", function () {
try {
expect(this.itemsDiscover).to.have.length(2);
expect(this.hasLength).to.be.calledOnce();
done();
} catch(e) {
done(e);
}
});
If you get an error then post it, because I think what it is.
I think I see what's going on: your test method is dependent on the add event being triggered in order to get into the callback that verifies the data. However, the way you've set up this.itemsDiscover, it contains this.item1 and this.item2 already:
....
this.itemsDiscover = new Foo.Collection.Items([this.item1, this.item2], {url: "/discover"});
Then, your mocking out of the URL will also return the string version of an array containing this.item1 and this.item2:
...
this.server.respondWith('GET', "/discover", [
200,
{"Content-type": "application/json"},
JSON.stringify([this.item1, this.item2])
]);
...
Here's the kicker: the add event will never be fired by the collection, because the two items returned already exist in the collection. D'oh.
I suggest changing the test to wait for a sync event instead, which is always fired after a successful fetch:
this.itemsDiscover.once("sync", function () {
expect(this.itemsDiscover).to.have.length(2);
expect(this.hasLength).to.be.calledOnce();
done();
});
I expect that will get your test code running.