diff --git a/src/app/Link.js b/src/app/Link.js index 4e60603..d73edef 100644 --- a/src/app/Link.js +++ b/src/app/Link.js @@ -30,16 +30,23 @@ type LinkProps = $ReadOnly<{ }>; export default class Link extends Component { render() { - const linkClass = css(styles.link, this.props.styles); + const {styles: customStyles, children, ...rest} = this.props; + const linkClass = css(styles.link, customStyles); const className = this.props.className ? `${linkClass} ${this.props.className}` : linkClass; - const Tag = "to" in this.props ? RouterLink : "a"; - return ( - - {this.props.children} + const make = (Tag) => ( + + {children} ); + if ("to" in this.props) { + return make(RouterLink); + } else if ("href" in this.props) { + return make("a"); + } else { + throw new Error("Must specify either 'to' or 'href'."); + } } } diff --git a/src/app/Link.test.js b/src/app/Link.test.js index 33ae496..ca535b5 100644 --- a/src/app/Link.test.js +++ b/src/app/Link.test.js @@ -45,6 +45,14 @@ describe("src/app/Link", () => { expect(typeof element.prop("className")).toBe("string"); }); + it("fails if neither `to` nor `href` is provided", () => { + // $ExpectFlowError + const component = uhhhhh; + expect(() => { + shallow(component); + }).toThrow("Must specify either 'to' or 'href'."); + }); + it("has deterministic className", () => { const e1 = shallow(); const e2 = shallow(); @@ -55,6 +63,7 @@ describe("src/app/Link", () => { const e1 = shallow(); const e2 = shallow(); expect(e2.prop("className")).not.toEqual(e1.prop("className")); + expect(e2.props()).not.toHaveProperty("styles"); }); it("forwards class name", () => {