debugging undefined jest snapshot

Question

I have some react code that I am trying to test that looks like this:

beforeEach(() => {
  wrapper = mount(
    <Provider store={store} >
      <MyPage params={params} location={location} />
    </Provider>
  );
});

test('renders My Page', () => {
  expect(wrapper).toMatchSnapshot();
});

I am trying to pass location down from react-router, such that I can access the query params in my page and it's components. I have a snapshot in place that works (e.g. shows DOM, etc), but as soon as I add in this new property wrapper returns undefined.

I've debugged this and it does not seem to be rendering <MyPage ...> at all anymore. I've tried moving the <MyPage ...> call into it's own variable, but that did not work either. Finally, I've also tried changing it from mount to shallow (not sure what that does). I've looked at the docs and I can't seem to find anything specifying how I can tell why it would not render\mount.

Are there any tools, techniques or means of detecting why a mounted page\component does not render\mount?

EDIT 1

With the help of a colleague, I've figured out my issue - the problem was I was using PropTypes.shape instead of PropTypes.shape(). I can reproduce this locally, but none of the online sandbox tools seem to make this simple. Further, as it was (with the invalid PropType) it did in fact silently fail in jest. So, is there a way I could have detected this using standard tools and techniques?

Answer 1

Paraphrasing my comment, React itself throws invalid PropType errors so reading its console log should solve your problem. As you noted: The log might get suppressed if you're using any wrapper for the tests, so running them from bare cli helped.