1

I'm trying to create a unit test for a react component, using jest + enzyme:

it('renders the problem view without crashing', () => {
  // TODO: tell the test fixure that the current URL is /problems
  const wrapper = shallow(<App />);
  // ... check that the problem view is actually rendered...
});

Depending on the URL (suffix), the App component should render a different page (using react-router v4). I don't know how to inject an URL into the test fixture:

  • Do I have to inject this into jsdom? If yes, how?
  • Is there another way to achieve this?

Any pointers to the right direction are highly appreciated!

Edit 1: The answer on this post (How to test react-router with enzyme) suggest to write a kind of white-box unit test, where the Router object is retrieved and its URL->component mapping table is checked for correctness. However, I'd like to write a black-box unit test: given the right environment (i.e. URL) the component under test shall render the right stuff, irrespective of the fact which client-side routing library is used.

Edit 2: The Jest config parameter testURL looks almost like what I need, but it seems that it cannot be set from inside a test. The answer from this question gives some hints, but I didn't find anything about injecting a custom jsdom object from within a test into Jest in the official Jest docs.

Paul Stephenson
  • 67,682
  • 9
  • 49
  • 51
Valentin Huber
  • 134
  • 8
  • 1
    What does your React Router code look like? It would be helpful to know the props you are passing into the app component for the various routes – Michael Jul 12 '17 at 15:12
  • 1
    This might help https://stackoverflow.com/questions/41531465/how-to-test-react-router-by-enzyme – Max Millington Jul 12 '17 at 15:17
  • @Michael: I'm not passing on any props to the App component: the App component should figure out the correct route from the URL and render the right stuff – Valentin Huber Jul 13 '17 at 10:38
  • @ValentinHuber - I think you need to need to look into testing your Routes component not your App component. It is the Routes component which determines which nested components to pass into your App component (as props.children) based on the URL. – Michael Jul 13 '17 at 13:14

0 Answers0