So I have a React application, and I've written lots of unit tests for my components. One such component is my VideoNavbar component. My tests were running perfectly for it, until I decided to wrap the default export of the component with withRouter(). Now my Jest tests fail to even start to run, with the following error:
FAIL test/components/AppContent/VideoNavbar/VideoNavbar.Spec.js
● Test suite failed to run
TypeError: (0 , _reactRouterDom.withRouter) is not a function
Again, the test itself hasn't been changed at all. It was working perfectly, up until I added the withRouter() to it.
To make things even stranger, I have another component that I wrap with withRouter(), and it has Jest tests as well, and it doesn't get this error.
Lastly, the application still runs perfectly. I can start the whole thing up, and everything, including the VideoNavbar component, works. It's only in the Jest tests that this happens.
Anyone have any ideas for what this could be?
Edit: Here is a reduced version of my component to show how I'm importing and using withRouter(). I left a bunch of stuff out to focus on the important parts.
import React, { useState } from 'react';
import { Link, withRouter } from 'react-router-dom';
const VideoNavbar = (props) => {
const [ isOpen, setOpen ] = useState(false);
const { isScanning, history, startFileScan } = props;
const pathname = history.location.pathname;
return (
<JsxIsHere />
);
};
export default withRouter(VideoNavbar);
Ok, so it was a silly problem. I was importing withRouter() like this:
import { withRouter } from 'react-router-dom';
This was based on an auto-complete import that I got from WebStorm. However, the real import is:
import { withRouter } from 'react-router';
With that, everything works.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With