"Could not find store" 在 Jest 中使用上下文提供程序包装组件后

Question

用适当的提供程序包装 React 组件后，在 jest 测试环境中仍然找不到商店。有没有我遗漏的东西，或者其他更简洁的方法？

这是适用于其他商店的做法，我已经与其他组件一起使用过，所以我看不出为什么这不起作用。渲染器应该创建一个用 TextContext 包裹的对象，它需要从中读取以填充字段。

上下文

import { connect } from 'react-redux';
import React, { createContext } from 'react';

export const TextContext = createContext({});

export function TextProvider({ children, text }) {
  return <TextContext.Provider value={text}>{children}</TextContext.Provider>;
}

export const TextConsumer = TextContext.Consumer;

function renderComposition(props) {
  const text = {
    ... // some text objects
  };
  return (
    <TextProvider text={text}>
      <Composition {...props} />
    </TextProvider>
  );
}

目标失败行

beforeEach(() => {
...
   subject = mount(renderer.create(renderComposition(props)));
...
)};

错误为

Invariant Violation: Could not find "store" in either the context or props of "Connect(Composition)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Composition)".

Answer 1

我想您的组件需要模拟商店，您可以通过创建 mockReduxState.js

来提供它

import configureMockStore from "redux-mock-store";

export const createMockStore = state => configureMockStore()(state);

通过 mockedStore 更新失败的测试。

beforeEach(() => {
...
 let updatedProp = {...props, store:createMockStore};
   subject = mount(renderer.create(renderComposition(updatedProp)));
...
)};

Answer 2

事实证明问题无关，我导入的是组件而不是连接的容器，因此从未设置商店。事实证明，名字是成功的一半。模拟商店选项也是处理此问题的好方法，感谢 paragxvii

"Could not find store" 在 Jest 中使用上下文提供程序包装组件后

"Could not find store" after wrapping component with context provider in Jest

store

reactjs

jestjs