Cannot access previous DOM elements after recent update in Jest/Enzyme unit tests

Viewed 162

I'm using Jest with Enzyme to unit test my application. I used to test it this way:

const textFieldWrapper= shallow(<TextField label="Standard" />);
expect(textFieldWrapper.find('input').length).toEqual(1);

Now, it seems like the returned DOM is:

<ContextConsumer>
   [function]
</ContextConsumer>

and I don't have access to the input anymore.

My question is, how can I access the input value with this new rendered DOM?

packages.json:

"devDependencies": {
    "@types/enzyme": "^3.1.14",
    "@types/enzyme-adapter-react-16": "^1.0.3",
    "@types/jest": "^23.0.0",
    "@types/react": "^16.3.16",
    "@types/react-dom": "^16.0.5",
    "@types/react-router-dom": "^4.2.6",
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.5.0",
    "react-test-renderer": "^16.3.0"
  },
 "dependencies": {
    "office-ui-fabric-react": "^6.71.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-router-dom": "^4.3.1",
  }
1 Answers

I think you're looking for mount, instead of shallow.

Mount actually fully renders the component versus shallow only looks at the your component without internal properties.

Related