How to mock document object with Jest / Enzyme in a React constructor?

Question

I am trying to improve codecoverage for a bit of React code which looks kind of like this:

export default class WuTangClan {
  constructor(props) {
    super(props);
    this.setState(this.getCookie('36chambers'));
  }

  getCookie(name) {
    const value = `;${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    let toReturn;
    if (parts.length === 2) {
      toReturn = parts
        .pop()
        .split(';')
        .shift();
    }
    return toReturn;
  }  
}

Here's the piece from codecov which I'm struggling with:

Using enzyme, if I were to mount(<WuTangClan />), it would then run through getCookie. Here's issue - that function relies on document and because jest runs in the context of node I can't seem to mock it. Meaning, document is empty when Jest tests are running and so I can't get it to jump in.

I've tried every answer in this post to no avail.

Jest "~22.2.2" Enzyme "^2.5.0" Node "8.8.0"

Answer 1

If your only issue is about setting cookies then you can do so like below:

it("should return cookie", () => {
    global.document.cookie = "cookie1=foo"; //set cookies in whatever format you like
    document.cookie = "cookie2=bar";
    let page = shallow(<WuTangClan />);
    
    // run assertions here;
  });