How to properly test a debounced function in an asynchronous React component? - javascript

My react component runs an asynchronous query to obtain some data using lodash debounce - since user input can cause re-queries and I want to rate-limit the queries - and then sets the state of the component with the results that are returned.
MyComponent (React Component)
componentWillMount() {
this.runQuery();
}
handler = (response) => {
this.setState({ results: response.results });
}
runQuery = _.debounce((props = this.props) => {
// run the query
doStuff(mainParams)
.withSomeOtherStuff(moreParams)
.query()
.then(this.handler)
.catch((error) => {
this.props.catchError(error);
});
}, 200);
I am currently stubbing out my main api exit point that goes out and fetches the data which returns a promise thanks to the sinon-stub-promise package
before((done) => {
stub = stubGlobalFn('evaluate'); // returns stubbed promise, uses npm:sinon-stub-promise
});
This allows me the ability to use my custom Reader (tested elsewhere) to read in a mock response and then resolve it synchronously for testing purposes.
mytest.spec.jsx
let stub;
const testWithProps = props => (
new Promise((resolve, reject) => {
new Reader(histories).readGrid((err, grid) => {
try {
expect(err).to.be.a('null');
stub.resolves(grid);
// ....
Then in the same testWithProps function I'm able to mount the Table component with the props I specify in my test as sort of a test factory.
const wrapper = mount(<Table {...props} />);
And here's where I run into my confusion, I have stubbed out the promise that gets resolved when the main evaluate async function is invoked but not the state handler.
stub.thenable.then(() => {
// --------------------------
// PROBLEM: how to test without setting a timeout?
// --------------------------
setTimeout(() => {
resolve(wrapper.update());
}, 200);
// --------------------------
// --------------------------
});
Should I be stubbing my handler function inside of my react component instead if I'm wanting to test the state of the component after the async behavior? I'm not sure how to even stub that part out if that's even what's needed.
Ultimately my test looks like this by the end:
it('toggles the row for the value when clicked', () => {
const props = {
// some props that I use
};
return testWithProps(props).then((wrapper) => {
// simply testing that my mocked response made it in successfully to the rendered component
expect(wrapper.state().results.length).to.equal(4);
});
});

Related

How to test if method was called inside componentDidMount?

I have following componentDidMount lifecycle:
componentDidMount () {
window.scrollTo(0, 0);
this.setState({
loading: true,
});
if (token) return this.getUserData();
return this.guestUserData();
}
I want to test in jest/enzyme if componentDidMount ran and if guestUserData was called.
I wrote the following test:
test("should call method in componentDidMount", () => {
Component.prototype.guestUserData = jest.fn();
const spy = jest.spyOn(Component.prototype, 'guestUserData');
const wrapper = shallow(<Component {...defaultProps} />);
expect(spy).toHaveBeenCalled();
});
but I have error now:
TypeError: Cannot set property guestUserData of #<Component> which has only a getter
Can somebody advice how to test if method was called in lifecycle and if lifecycle was called itself in one test if possible
Just don't. I believe getUserData is calling some external API(rather sending XHR or working with session storage or whatever). So you just need to mock that external source and verify if it has been accessed right after component is created
const fetchUserData = jest.fn();
jest.mock('../api/someApi', () => ({
fetchUserData,
}));
beforeEach(() => {
fetchUserData.mockClear();
});
it('calls API on init', () => {
shallow(<Yourcomp {...propsItNeeds} />);
expect(fetchUserData).toHaveBeenCalledWith(paramsYouExpect);
});
it('does something if API call fails', () => {
fetchUserData.mockRejectedValue();
const wrapper = shallow(<Yourcomp {...propsItNeeds} />);
expect(wrapper.find(ErrorMessage).props().children).toEqual('Failed to load. Try again');
// or even
expect(wrapper).toMatchSnapshot();
});
This way you really test if
1. external API have been called on component init
2. API has been called with expected params
3. component knows what to do if API call fails
4. ...
In contrary checking if method this.getUserData has been called in cDM does not ensure any of items above. What if this.getUserData itself does not call API? what if API failure is not handled properly there? We would still unsure on that.

Checking a variable twice with jest in React [duplicate]

React v15.1.0
Jest v12.1.1
Enzyme v2.3.0
I'm trying to figure out how to test a component that calls a promise in a function invoked by a click. I was expecting Jest's runAllTicks() function to help me out here, but it doesn't seem to be executing the promise.
Component:
import React from 'react';
import Promise from 'bluebird';
function doSomethingWithAPromise() {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 50);
});
}
export default class AsyncTest extends React.Component {
constructor(props) {
super(props);
this.state = {
promiseText: '',
timeoutText: ''
};
this.setTextWithPromise = this.setTextWithPromise.bind(this);
this.setTextWithTimeout = this.setTextWithTimeout.bind(this);
}
setTextWithPromise() {
return doSomethingWithAPromise()
.then(() => {
this.setState({ promiseText: 'there is text!' });
});
}
setTextWithTimeout() {
setTimeout(() => {
this.setState({ timeoutText: 'there is text!' });
}, 50);
}
render() {
return (
<div>
<div id="promiseText">{this.state.promiseText}</div>
<button id="promiseBtn" onClick={this.setTextWithPromise}>Promise</button>
<div id="timeoutText">{this.state.timeoutText}</div>
<button id="timeoutBtn" onClick={this.setTextWithTimeout}>Timeout</button>
</div>
);
}
}
And the tests:
import AsyncTest from '../async';
import { shallow } from 'enzyme';
import React from 'react';
jest.unmock('../async');
describe('async-test.js', () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(<AsyncTest />);
});
// FAIL
it('displays the promise text after click of the button', () => {
wrapper.find('#promiseBtn').simulate('click');
jest.runAllTicks();
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('#promiseText').text()).toEqual('there is text!');
});
// PASS
it('displays the timeout text after click of the button', () => {
wrapper.find('#timeoutBtn').simulate('click');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('#timeoutText').text()).toEqual('there is text!');
});
});
Updated answer: using async / await leads to cleaner code. Old code below.
I've successfully solved this problem by combining the following elements:
Mock out the promise and make it resolve immediately
Make the test asynchronous by marking the test function async
After simulating the click, wait until the next macrotask to give the promise time to resolve
In your example, that might look like this:
// Mock the promise we're testing
global.doSomethingWithAPromise = () => Promise.resolve();
// Note that our test is an async function
it('displays the promise text after click of the button', async () => {
wrapper.find('#promiseBtn').simulate('click');
await tick();
expect(wrapper.find('#promiseText').text()).toEqual('there is text!');
});
// Helper function returns a promise that resolves after all other promise mocks,
// even if they are chained like Promise.resolve().then(...)
// Technically: this is designed to resolve on the next macrotask
function tick() {
return new Promise(resolve => {
setTimeout(resolve, 0);
})
}
Enzyme's update() is neither sufficient nor needed when using this method, because Promises never resolve in the same tick they are created -- by design. For a very detailed explanation of what is going on here, see this question.
Original answer: same logic but slightly less pretty. Use Node's setImmediate to defer the test until the next tick, which is when the promise will resolve. Then call Jest's done to finish the test asynchronously.
global.doSomethingWithAPromise = () => Promise.resolve({});
it('displays the promise text after click of the button', (done) => {
wrapper.find('#promiseBtn').simulate('click');
setImmediate( () => {
expect(wrapper.find('#promiseText').text()).toEqual('there is text!');
done();
})
});
This isn't as nice because you'll get big nested callbacks if you have to wait for more than one promise.
There isn't much around needing to somehow wait for the promise to fulfill before ending the test. There are two main ways of doing it from your code that I can see.
independently test that onClick and your promise methods. So check that onClick calls the correct function, but spying on setTextWithPromise, triggering a click and asserting that setTextWithPromise was called. Then you can also get the component instance and call that method which returns the promise you can attach a handler and assert it did the right thing.
expose a callback prop that you can pass in that is called when the promise resolves.

How to mock const method in jest?

I unit test code in typescript, use jest. Please teach me how to mock getData to return the expected value. My code as below:
// File util.ts
export const getData = async () => {
// Todo something
return data;
}
// File execution.ts import { getData } from './util';
function execute()
{
// todo something
const data = await getData();
// todo something
}
The problem is that your function returns a promise. Depends on how you use it there are several ways to mock it.
The simplest way would be to mock it directly, but then it will always return the same value:
// note, the path is relative to your test file
jest.mock('./util', () => ({ getData: () => 'someValue' }));
If you want to test both the resolved and the rejected case you need to mock getData so it will return a spy where you later on can change the implementation use mockImplementation. You also need to use async/await to make the test work, have a look at the docs about asynchronous testing:
import { getData } from './util';
jest.mock('./util', () => ({ getData: ()=> jest.fn() }));
it('success case', async () => {
const result = Promise.resolve('someValue');
getData.mockImplementation(() => result);
// call your function to test
await result; // you need to use await to make jest aware of the promise
});
it('error case', async () => {
const result = Promise.reject(new Error('someError'));
getData.mockImplementation(() => result);
// call your function to test
await expect(result).rejects.toThrow('someError');
});
Try the following in your test file.
Import the function from the module.
import { getData } from './util';
Then mock the module with the function and its return value after all the import statements
jest.mock('./util', () => ({ getData: jest.fn() }))
getData.mockReturnValue("abc");
Then use it in your tests.
Because mocking expression functions can be a real pain to get right, I'm posting a full example below.
Scenario
Let's say we want to test some code that performs some REST call, but we don't want the actual REST call to be made:
// doWithApi.ts
export const doSomethingWithRest = () => {
post("some-url", 123);
}
Where the post is a function expression in a separate file:
// apiHelpers.ts
export const post = (url: string, num: number) => {
throw Error("I'm a REST call that should not run during unit tests!");
}
Setup
Since the post function is used directly (and not passed in as a parameter), we must create a mock file that Jest can use during tests as a replacement for the real post function:
// __mocks__/apiHelpers.ts
export const post = jest.fn();
Spy and Test
Now, finally inside the actual test, we may do the following:
// mockAndSpyInternals.test.ts
import {doSomethingWithRest} from "./doWithApi";
afterEach(jest.clearAllMocks); // Resets the spy between tests
jest.mock("./apiHelpers"); // Replaces runtime functions inside 'apiHelpers' with those found inside __mocks__. Path is relative to current file. Note that we reference the file we want to replace, not the mock we replace it with.
test("When doSomethingWithRest is called, a REST call is performed.", () => {
// If we want to spy on the post method to perform assertions we must add the following lines.
// If no spy is wanted, these lines can be omitted.
const apiHelpers = require("./apiHelpers");
const postSpy = jest.spyOn(apiHelpers, "post");
// Alter the spy if desired (e.g by mocking a resolved promise)
// postSpy.mockImplementation(() => Promise.resolve({..some object}))
doSomethingWithRest();
expect(postSpy).toBeCalledTimes(1)
expect(postSpy).toHaveBeenCalledWith("some-url", 123);
});
Examples are made using Jest 24.9.0 and Typescript 3.7.4

Jest not recognizing spy is called

I'm having a little trouble confirming my function is called using Jest. I've got two mocked functions. One is just mocked to return a promise, the other is a simple spy that should be called in the then() block of the first.
Below, in the test, you will see two expectations. The first expectation passes. The second does not. i.e. expect(sendSpy).toHaveBeenCalled() passes but expect(sendCallbackSpy).toHaveBeenCalled() does not.
However, when I put the console.log statements in the file (as below), both execute (i.e. the 'before' and 'after'), and if I console log the window.props.onSend it confirms that the mocked function is present. So it looks like the function should be called.
Another thing of note is that my implementation requires me to pass in the callback in a props object from my window. Further, to mock things on the window in Jest, you just mock global as I'm doing below. I don't think that is relevant to the issue but worth pointing out nonetheless.
Could it be that the expectation is run before the actual function is called in the then() block?
export class MyButton extends Component {
handleClick = () => {
this.props.send(this.props.url).then(res => {
console.log('before', window.props.onSend)
window.props.onSend(res.data)
console.log('after')
})
}
render() {
return <button onClick={handleClick} />
}
}
//test
test('it calls the identity function when button is clicked', () => {
const sendSpy = jest.fn(() => { return Promise.resolve({ data: 'hello' }) })
const sendCallbackSpy = jest.fn()
global.props = { onSend: sendCallbackSpy }
wrapper = shallow(<MyButton send={sendSpy} } />)
const button = wrapper.find('button')
button.simulate('click')
expect(sendSpy).toHaveBeenCalled()
expect(sendCallbackSpy).toHaveBeenCalled()
})
You need to wait for the promise before testing the second spy:
test('it calls the identity function when button is clicked', async() => {
const request = Promise.resolve({ data: 'hello' })
const sendSpy = jest.fn(() => request)
const sendCallbackSpy = jest.fn()
global.props = { onSend: sendCallbackSpy }
wrapper = shallow(<MyButton send={sendSpy} } />)
const button = wrapper.find('button')
button.simulate('click')
expect(sendSpy).toHaveBeenCalled()
await request
expect(sendCallbackSpy).toHaveBeenCalled()
})

React and jest mock module

I am creating an application in which I use redux and node-fetch for remote data fetching.
I want to test the fact that I am well calling the fetch function with a good parameter.
This way, I am using jest.mock and jasmine.createSpy methods :
it('should have called the fetch method with URL constant', () => {
const spy = jasmine.createSpy('nodeFetch');
spy.and.callFake(() => new Promise(resolve => resolve('null')));
const mock = jest.mock('node-fetch', spy);
const slug = 'slug';
actionHandler[FETCH_REMOTE](slug);
expect(spy).toHaveBeenCalledWith(Constants.URL + slug);
});
Here's the function that I m trying to test :
[FETCH_REMOTE]: slug => {
return async dispatch => {
dispatch(loading());
console.log(fetch()); // Displays the default fetch promise result
await fetch(Constants.URL + slug);
addLocal();
};
}
AS you can see, I am trying to log the console.log(fetch()) behavior, and I am having the default promise to resolve given by node-fetch, and not the that I've mock with Jest and spied with jasmine.
Do you have an idea what it doesn't work ?
EDIT : My test displayed me an error like my spy has never been called
Your action-handler is actually a action handler factory. In actionHandler[FETCH_REMOTE], you are creating a new function. The returned function taskes dispatch as a parameter and invokes the code you are showing.
This means that your test code will never call any function on the spy, as the created function is never invoked.
I think you will need to create a mock dispatch function and do something like this:
let dispatchMock = jest.fn(); // create a mock function
actionHandler[FETCH_REMOTE](slug)(dispatchMock);
EDIT:
To me, your actionHandler looks more like an actionCreator, as it is usually called in redux terms, though I personally prefer to call them actionFactories because that is what they are: Factories that create actions.
As you are using thunks(?) your actionCreater (which is misleadingly named actionHandler) does not directly create an action but another function which is invoked as soon as the action is dispatched. For comparison, a regular actionCreator looks like this:
updateFilter: (filter) => ({type: actionNames.UPDATE_FILTER, payload: {filter: filter}}),
A actionHandler on the other hand reacts to actions being dispatched and evaluates their payload.
Here is what I would do in your case:
Create a new object called actionFactories like this:
const actionFactories = {
fetchRemote(slug): (slug) => {
return async dispatch => {
dispatch(loading());
console.log(fetch()); // Displays the default fetch promise result
let response = await fetch(Constants.URL + slug);
var responseAction;
if (/* determine success of response */) {
responseAction = actionFactories.fetchSuccessful(response);
} else {
responseAction = actionFactories.fetchFailed();
}
dispatch(responseAction);
};
}
fetchFailed(): () => ({type: FETCH_FAILED, }),
fetchSuccessful(response): () => ({type: FETCH_FAILED, payload: response })
};
Create an actionHandler for FETCH_FAILED and FETCH_SUCCESSFUL to update the store based on the response.
BTW: Your console.log statement does not make much sense too me, since fetch just returns a promise.

Categories