React测试报错Could not find "store" in Connect(Items)上下文如何修复？

问题根本原因 #

• 测试代码混用了Enzyme的shallow浅渲染和React Testing Library的查询API：shallow只会渲染最外层组件，不会将内容挂载到RTL对应的DOM容器中，因此screen根本查询不到任何元素；同时浅渲染不会触发展开Connect高阶组件，导致组件拿不到Provider提供的store，就报了你看到的错。
• 你测试的BillList组件依赖两个运行时环境：Redux的store数据、react-router的路由参数id，你当前的测试代码只提供了空的mock store，没有传入实际要用的items数据，也没有包裹路由组件，useParams拿不到参数也会导致后续渲染异常。
• 断言写法错误：queryByTestId返回的是DOM元素对象，不能直接和字符串做全等判断，需要获取元素的textContent再比对。

解决方案 #

直接用React Testing Library的render方法替代Enzyme的shallow，补充路由包裹和正确的mock store初始值，修改后的测试代码如下：

import { screen, fireEvent, render } from "@testing-library/react";
import BillList from "../BillList";
import configureMockStore from "redux-mock-store";
import { Provider } from "react-redux";
import { MemoryRouter } from "react-router-dom"; // 测试路由用的内存路由

const mockStore = configureMockStore();
// 模拟符合你组件要求的初始store数据，注意和你的reducer返回结构对齐
const mockItemsData = {
  items: [
    {
      id: 1,
      billNumber: "123",
      created_datetime: "2023-01-01",
      title: "测试商品",
      price: 10
    }
  ]
};
const store = mockStore({
  items: mockItemsData
});

describe("<BillList />", () => {
  // 每个测试用例前都重新渲染组件，避免用例之间状态污染
  beforeEach(() => {
    render(
      <Provider store={store}>
        {/* 配置路由参数，对应你组件要取的id=1 */}
        <MemoryRouter initialEntries={['/bills/1']}>
          <BillList />
        </MemoryRouter>
      </Provider>
    )
  })

  test("display counter text", () => {
    expect(screen.getByTestId("counter-text")).toHaveTextContent("1");
  });

  test("increment counter", () => {
    const btnIncrement = screen.getByTestId("btn-increment");
    fireEvent.click(btnIncrement);
    expect(screen.getByTestId("counter-text")).toHaveTextContent("2");
  });

  test("decrement counter", () => {
    // 先加1再减，避免从1减到0不符合你的断言要求
    const btnIncrement = screen.getByTestId("btn-increment");
    fireEvent.click(btnIncrement);
    const btnDecrement = screen.getByTestId("btn-decrement");
    fireEvent.click(btnDecrement);
    expect(screen.getByTestId("counter-text")).toHaveTextContent("1");
  });
});

额外优化提示 #

如果你不需要测试Redux相关的逻辑，只是要测计数器的本地状态，也可以直接导出BillList的未被connect包裹的原始组件，测试时直接传入模拟的items props即可，不需要配置mock store和Provider，会更简单。

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