React/Jest/Enzyme中wrapper.state()与instance.state()均为null的问题

Hey there, I feel your pain—spending hours stuck on a test issue that seems like it should just work is the worst. Let’s walk through the most common reasons this happens with your React 16, Jest, Enzyme, Webpack 4, and Babel stack, and how to fix them:

• Enzyme Adapter Mismatch
  React 16 requires the enzyme-adapter-react-16 package—older adapters won’t play nice. If your adapter isn’t set up correctly, Enzyme can’t properly interact with your component’s state.
  Fix steps:

  1. Install the adapter: npm install --save-dev enzyme-adapter-react-16
  2. Add a setup file (like src/setupTests.js) with:

     import { configure } from 'enzyme';
     import Adapter from 'enzyme-adapter-react-16';
     
     configure({ adapter: new Adapter() });
     

  3. Verify Jest picks up this file—check your jest.config.js or package.json Jest settings for setupFilesAfterEnv pointing to the setup file.

• Testing a Functional Component
  Heads up: wrapper.state() and wrapper.instance().state() only work for class components. Functional components use Hooks like useState and don’t expose state via these methods.
  Fix: Test functional components by asserting on element behavior (using wrapper.find()) instead of trying to access state directly. You can also use Jest spies to mock Hooks or validate component outputs based on props.

• Component Not Fully Mounted
  Shallow rendering (shallow()) might not trigger all lifecycle methods needed to initialize state, especially if your component sets state in methods like componentDidMount.
  Fix: Try using mount() instead of shallow() to render the full component tree. Note that mount() requires a DOM environment—Jest usually includes jsdom by default, but double-check your config to be sure.

• Babel Transpilation Issues
  If Babel isn’t processing your React components correctly (like class properties or lifecycle methods), Enzyme can’t access the component instance properly.
  Fix:

  1. Ensure @babel/preset-react is installed and configured in your .babelrc or babel.config.js:

     {
       "presets": ["@babel/preset-react", "@babel/preset-env"]
     }
     

  2. If you use class properties, install and add @babel/plugin-proposal-class-properties to your Babel plugins.

• State is Actually Initialized to Null
  It sounds obvious, but double-check your component’s initial state setup. Maybe you have a typo in a state property name, or an async operation that hasn’t completed when you try to access state.
  Fix: Add console.log(this.state) in your component’s componentDidMount (or useEffect for functional components) to confirm state is set correctly. For async state changes, use async/await with wrapper.update() in your test to wait for updates.

• Outdated Enzyme Version
  Older Enzyme versions might have compatibility bugs with React 16 that break state access.
  Fix: Update Enzyme and its adapter: npm update enzyme enzyme-adapter-react-16

If none of these fix your issue, sharing a minimal reproducible example of your component and test code would help narrow things down further. Happy debugging!

内容的提问来源于stack exchange，提问作者Jeremy Little