Cannot read property 'id' of undefined - REACT JS

Question

I have most of the test running correctly, but based on the test, my match props seems wrong. I have 3 other props and they are all passing.

Here is what i have so far: EditUser.test.js

describe('EditUser', () => {

let tree;
let baseProps;
let mockmatch = {
    params: {
        id:{
            URLParams: "test edit user and add user"
        },
        type: "test",
    }
};

beforeEach(() => {
    baseProps = { 
        match: mockmatch 
 }
})

it (' Should render without a mockmatch props',() => {
  baseProps = {
  ...baseProps,
 match: {},  
 };
     tree = renderer.create(<EditUser {...baseProps } />)
     let treeJson = tree.toJSON(); 
     expect(treeJson).toMatchSnapshot(); 
     tree.unmount() 
  });

EditUser.js : this is the location of the error, right under render()

render() {
let URLParams = this.props.match.params;
let title = URLParams.id ? 'Edit User' : 'Add User';
let type = URLParams.type;

Ana Liza Pandac · Accepted Answer · 2019-01-15 15:41:24Z

3

The reason is that match is an empty {} when you assigned an updated value to baseProps inside your it block.

baseProps = {...baseProps, match: {} };

Which means it doesn't contain the params object when you accessed it here:

let URLParams = this.props.match.params;

And that is why it's throwing that error when you tried to access id since URLParams is undefined.

There's two ways to solve this.

Solution #1

In your test, instead of assigning an empty object to match, you can give it a value of an empty params.

baseProps = {...baseProps, match: { params: {} } };

Solution #2

Or you can assign a fallback value URLParams when you're getting the value from props which in this case will be an empty object.

let URLParams = this.props.match.params || {};

edited Jan 15, 2019 at 15:41

answered Jan 15, 2019 at 15:25

Ana Liza Pandac

4,8912 gold badges26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user91 Over a year ago

Thanks. I am new to unit testing but I put the value and the test passed all with all of the props.

user91 Over a year ago

I just ran into a similar problem in another file : this.props.services.Dashboard.URL , that means when i do baseProps = {..baseProps,services { dashboard: {} } }; right ? Would you recommend mocking props for unit testing and see what renders based on snapshot ?

Ana Liza Pandac Over a year ago

Yes, exactly. Mind the different casing of Dashboard and dashboard, I forgot but I think it might cause some issue.

Ana Liza Pandac Over a year ago

"Would you recommend mocking props for unit testing and see what renders based on snapshot ?" IMO, using a consistent mocked props is important especially if you are snapshot testing cause you are sure that it's not your data that was changed but it's your component if it ever fails.

user91 Over a year ago

it caused the same problem, i included Dashboard value and it worked. Thanks . I think i will be able to fix some previous tests based on your previous answers. thank you

|

Collectives™ on Stack Overflow

Cannot read property 'id' of undefined - REACT JS

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related