单元测试：用酶反应上下文 api 返回一个空对象

Posted 2023-04-14

【中文标题】单元测试：用酶反应上下文 api 返回一个空对象

【英文标题】：Unit testing: react context api with enzyme return an empty object

【发布时间】：2019-09-07 20:35:25

【问题描述】：

我第一次尝试使用 React 上下文 API 将信息从主组件传递到孙组件。

首先我创建了一个上下文

const MyContext = React.createContext();

export default MyContext;

这里是设置上下文值的主要组件

import MyContext from "./MyContext.js";
import ParentComponent from "./ParentComponent.js";

function App() 
  return (
    <div>
      <MyContext.Provider value= foo: 12 >
        <ParentComponent />
      </MyContext.Provider>
    </div>
  );

父组件不关心上下文，只是在这里创建孙组件

import ChildComponent from "./ChildComponent.js";

class ParentComponent extends Component 
  render() 
    return (
      <div>
        Parent
        <ChildComponent />
      </div>
    );
  


export default ParentComponent;

这里是读取上下文的子组件

import MyContext from "./MyContext.js";

class ChildComponent extends PureComponent 
  constructor() 
    super();
    this.state = 
      bar: 456
    ;
  

  render() 
    return (
      <div>
        <MyContext.Consumer>
          ( foo ) => (
            <div>
              <h1>Hello I'm the ChildComponent</h1>
              <h2>Context value: foo</h2>
              <h2>State value: this.state.bar</h2>
              <button onClick=() => this.setState( bar: foo )>
                Click me
              </button>
            </div>
          )
        </MyContext.Consumer>
      </div>
    );
  


export default ChildComponent;

到目前为止没有问题。一切都按预期工作。 ChildComponent 已检索到上下文值。

当我尝试用 jest/enzyme 测试它时，问题就来了。我无法设置上下文

it("Should test the context value", () => 
  let wrapper = mount(<ChildComponent />, 
    context:  foo: 987 
  );

  expect(wrapper.state("bar")).toEqual(456);
  expect(wrapper.context("foo")).toEqual(987);
);

最后一个期望失败并且上下文值是一个空对象。所以 foo 是未定义的

我在这里重现了这个问题： https://codesandbox.io/embed/x25yop4x5w?fontsize=14

感谢您的帮助

【问题讨论】：

请以文本形式发布代码 sn-ps，而不是屏幕截图。

【参考方案1】：

我用来测试需要在上下文提供程序树中安装的组件的方法是使用wrappingComponent 和wrappingComponentProps options for mount。

这确保了 mount（根组件）的返回值仍然是您要测试的组件（并且仍将支持仅适用于根组件的 API/选项，例如 setProps）。

mount(<MyComponent />, 
  wrappingComponent: MyContext.Provider,
  wrappingComponentProps: 
    value:  foo: 987 ,
  ,
)

【讨论】：

感谢您的解决方案..！！我试图在浅层上做同样的事情..但它没有工作..所以改为安装一切工作正常..所以你知道为什么它不能在浅层上工作吗？

IMO 这是一个比公认答案更好的解决方案，原因在第 2 段中描述。

【参考方案2】：

Enzyme context 影响旧版 React 上下文，而不是现代上下文 API。它应该被嘲笑：

mount(<MyContext.Provider value=foo: 987><ChildComponent/></MyContext.Provider>)

并断言：

expect(wrapper.find('h2').text()).toBe('Context value: 987');

【讨论】：

如果我有 useContext(MyContext)，此选项在组件内返回空对象...，在我的情况下返回对象的默认值...