I am trying to launch the basic example from the Jest Tutorial Page, using Jest, React and Typescript
Link.tsx
import * as React from 'react';
const STATUS = {
NORMAL: 'normal',
HOVERED: 'hovered',
};
interface theProps {
page:string
}
export default class Link extends React.Component<theProps,any> {
constructor(props) {
super(props);
this._onMouseEnter = this._onMouseEnter.bind(this);
this._onMouseLeave = this._onMouseLeave.bind(this);
this.state = {
class: STATUS.NORMAL,
};
}
_onMouseEnter() {
this.setState({class: STATUS.HOVERED});
}
_onMouseLeave() {
this.setState({class: STATUS.NORMAL});
}
render() {
return (
<a
className={this.state.class}
href={this.props.page || '#'}
onMouseEnter={this._onMouseEnter}
onMouseLeave={this._onMouseLeave}>
{this.props.children}
</a>
);
}
}
test.tsx
import * as React from 'react';
import Link from '../app/Link';
import * as renderer from 'react-test-renderer';
it('Link changes the class when hovered', () => {
const component = renderer.create(
<Link page="http://www.facebook.com">Facebook</Link>
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
// manually trigger the callback
tree.props.onMouseEnter();
// re-renderingf
tree = component.toJSON();
expect(tree).toMatchSnapshot();
// manually trigger the callback
tree.props.onMouseLeave();
// re-rendering
tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
But even though the test run fine with jest, both Webpack and IntelliJ complain about the line tree.props.onMouseEnter();:
Unresolved function or method onMouseLeave()
This kind of makes sense as the props object has the type { [propName: string]: string }
Is there anything I can include the skip those warning/error messages ?
