在WebStorm中配置Jest&Enzyme进行React测试的问题排查

Hey there! Let's tackle your React testing issues one by one—they're all common hurdles when getting started with Jest, Redux, and IDE setup.

1. Fix WebStorm not recognizing .test.js files and Jest functions #

The root cause here is likely conflicting Jest versions (you installed Jest manually, but Create React App already includes it as part of react-scripts). Here's how to fix it:

• First, remove your manually installed Jest to eliminate version conflicts:

  yarn remove jest
  

• Next, configure WebStorm to use CRA's built-in Jest setup:
  1. Go to File > Settings > Languages & Frameworks > JavaScript > Jest
  2. Select the "React Scripts" preset (this tells WebStorm to respect CRA's preconfigured Jest settings)
  3. Ensure your .test.js files are marked as test files: Right-click the file > Mark as Test File
• If Jest functions like describe/test still aren't recognized, invalidate WebStorm's cache: File > Invalidate Caches... > Invalidate and Restart

2. Resolve "Could not find 'store' in the context of 'Connect(withRouter(App))'" #

Your <App /> is wrapped in Redux's connect() and React Router's withRouter(), so your test needs to provide both Redux store context and router context. Here's a step-by-step fix:

• If you haven't already, install redux-mock-store to create a lightweight mock Redux store (simpler than using a real store for basic tests):

  yarn add redux-mock-store --dev
  

• Update your App.test.js to wrap <App /> in <Provider> (Redux) and <MemoryRouter> (React Router):

  import React from 'react';
  import { mount } from 'enzyme'; // Or use @testing-library/react's render
  import { Provider } from 'react-redux';
  import { MemoryRouter } from 'react-router-dom';
  import configureMockStore from 'redux-mock-store';
  import thunk from 'redux-thunk';
  import App from './App';
  
  // Create mock store with your app's middleware (thunk)
  const mockStore = configureMockStore([thunk]);
  const store = mockStore({
    // Add a minimal initial state matching what your App expects (e.g., auth: { isAuthenticated: false })
  });
  
  test('renders App without Redux context errors', () => {
    const wrapper = mount(
      <Provider store={store}>
        <MemoryRouter>
          <App />
        </MemoryRouter>
      </Provider>
    );
    expect(wrapper.exists()).toBe(true);
  });
  

• If you prefer using @testing-library/react instead of Enzyme, replace mount with render from @testing-library/react—the wrapping logic stays the same.

3. Fix "Your test suite must contain at least one test" #

This error is straightforward: empty test files aren't allowed. You have two options:

• Delete the empty NavigationItems.test.js file, or
• Add a basic test to it to make it valid:

  import React from 'react';
  import { shallow } from 'enzyme';
  import NavigationItems from './NavigationItems';
  
  test('renders NavigationItems component', () => {
    const wrapper = shallow(<NavigationItems />);
    expect(wrapper.find('.navigation-items')).toBeTruthy();
  });
  

Quick Dependency Cleanup #

Your package.json has a couple redundant dependencies that can cause confusion:

• jest: Remove this (CRA includes a compatible version out of the box)
• react-test-render: This is deprecated—you're already using @testing-library/react (the modern replacement), so you can remove this too.

Run these commands to clean up:

yarn remove jest react-test-render

After these steps, your tests should run without dependency conflicts, WebStorm should recognize your test files and Jest functions, and your App test will have access to the Redux store context it needs.

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