I am trying to test my function for ComponentDidMount. But I get this error:Cannot destructure property params on null or undefined.

The function I want to test is this one:

  ponentDidMount() {
    this.fetchUser();
  }

And it is depended on this one:

  fetchUser = () => {
    getUser(this.getUserUsername()).then(username => {
      this.setState({
        user: username.data
      });
    });
  };

which in return is depended on this one:

  getUserUsername = () => {
    const { match } = this.props;
    const { params } = match;
    console.log(params, 'params'); // return an object { username: "john" }
    console.log(match, 'match');
    **// return an object
    // { isExact: true
    //  params:
    // username: "john" .
    // __proto__: Object
    // path: "/management/users/:username"
    // url: "/management/users/john" }**
    return params.username;
  };

And here is my test:

  describe('ponentDidMount', () => {
    it('should call fetchUsers function', () => {
      const match = { params: 'testName' };
      const params = match;
      const fetchUserFn = jest.fn(params);
      const wrapper = shallow(<UserDetailsScreen fetchUsers={fetchUserFn} />, {
        disableLifecycleMethods: true
      });
      wrapper.instance()ponentDidMount();
      expect(fetchUserFn).toHaveBeenCalledTimes(1);
    });
  });

But I get the above error. Not sure what I need to do, and while I found answers similar to this problem, the answers don't solve my problem.

CODE for getUser:

export const getUser = username => {
  const options = {
    method: httpMethod.GET,
    url: endpoint.GET_USER(username)
    // The GET_USER is an endpoint for 
    // that specific username
  };
  return instance(options);
};

The above returns a promise.

I am trying to test my function for ComponentDidMount. But I get this error:Cannot destructure property params on null or undefined.

The function I want to test is this one:

  ponentDidMount() {
    this.fetchUser();
  }

And it is depended on this one:

  fetchUser = () => {
    getUser(this.getUserUsername()).then(username => {
      this.setState({
        user: username.data
      });
    });
  };

which in return is depended on this one:

  getUserUsername = () => {
    const { match } = this.props;
    const { params } = match;
    console.log(params, 'params'); // return an object { username: "john" }
    console.log(match, 'match');
    **// return an object
    // { isExact: true
    //  params:
    // username: "john" .
    // __proto__: Object
    // path: "/management/users/:username"
    // url: "/management/users/john" }**
    return params.username;
  };

And here is my test:

  describe('ponentDidMount', () => {
    it('should call fetchUsers function', () => {
      const match = { params: 'testName' };
      const params = match;
      const fetchUserFn = jest.fn(params);
      const wrapper = shallow(<UserDetailsScreen fetchUsers={fetchUserFn} />, {
        disableLifecycleMethods: true
      });
      wrapper.instance().ponentDidMount();
      expect(fetchUserFn).toHaveBeenCalledTimes(1);
    });
  });

But I get the above error. Not sure what I need to do, and while I found answers similar to this problem, the answers don't solve my problem.

CODE for getUser:

export const getUser = username => {
  const options = {
    method: httpMethod.GET,
    url: endpoint.GET_USER(username)
    // The GET_USER is an endpoint for 
    // that specific username
  };
  return instance(options);
};

The above returns a promise.

• javascript
• reactjs
• unit-testing
• jestjs
• enzyme

• please add code for getUser function – akshay Commented Mar 12, 2019 at 10:04
• parmas? That looks like a spelling mistake rather than a code error. – rrd Commented Mar 12, 2019 at 10:06
• No the parmas is my spelling error. Syntax is correct. – user10104341 Commented Mar 12, 2019 at 10:08
• Just updated the desc, and added the code for getUser. @akshay – user10104341 Commented Mar 12, 2019 at 10:09

2 Answers 2

Try below syntax

describe('ponentDidMount', () => {
  it('should call fetchUsers function', () => {
    const match={params: {username: 'akshay'}, isExact: true, path: "", url: ""}
    const fetchUserFn = jest.fn(match);
    const wrapper = shallow(<UserDetailsScreen match={match} fetchUsers={fetchUserFn} />, {
      disableLifecycleMethods: true
    });
    expect(wrapper.containsMatchingElement(<h2>Details for 1</h2>)).toBeTruthy();
  });
});

also you can use containsMatchingElement

You are destructuring parmas for some reason, did you mean params?

Try to search throughout the APP for parmas and check if you have a spelling mistake.