Testing Error Result in an Event Handler of a React Component

Multi tool use


Testing Error Result in an Event Handler of a React Component
I'm stuck on trying to figure out how to use Jasmine to test the result of an event handler that is defined in the render()
function of a React Component. Specifically I'm testing if invalid parameters are passed into the event handler it should throw an error. Here is some sample code below:
render()
class App extends Component<{TestStore: any}, {}> {
handleChangeDate = (increaseDate: boolean, typeOfDate: string) => {
switch (typeOfDate) {
case "day":
currentTypeOfDate = store.returnDay;
minBoundary = 1;
maxBoundary = 31;
break;
case "month":
currentTypeOfDate = store.returnMonth;
minBoundary = 1;
maxBoundary = 12;
break;
case "year":
currentTypeOfDate = store.returnYear;
minBoundary = 2000;
maxBoundary = 2020;
break;
default:
try {
throw new TypeError("Incorrect typeOfdate given. Shoud be 'day', 'month', or 'year'");
} catch (e) {
console.log(e);
}
}
}
render() {
const {TestStore} = this.props;
return (
<div className="background">
<div id="top-arrow-container">
<i id="month-up" className="up" onClick={e => this.handleChangeDate(true, "month")}></i>
<i id="day-up" className="up" onClick={e => this.handleChangeDate(true, "day")}></i>
<i id="year-up" className="up" onClick={e => this.handleChangeDate(true, "year")}></i>
</div>
</div>
);
}
}
So I'm trying to test handleChangeDate(true, "test")
which should return a TypeError. How do I write a test for this? From what I've seen, do I use mount from enzyme, setFixtures from jasmine-jquery, TestUtils.renderIntoDocument() from React Test Utils, or something else?
handleChangeDate(true, "test")
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.