如何测试在组件函数中调用的上下文函数的参数？答案

【问题标题】：How do I test the parameters of a context function called within a component function?如何测试在组件函数中调用的上下文函数的参数？
【发布时间】：2021-11-06 15:28:15
【问题描述】：

我已经看到了许多关于如何模拟上下文以及如何模拟特定组件函数调用的示例，但我还没有找到一个可以同时进行这两种操作的示例。大多数正确模拟上下文的情况建议使用mount()，但这并不能让我访问从shallow(<MyComponent>).instance() 返回的实例，然后我将使用它来进行函数调用。这是我正在尝试测试的情况的一个示例：

class MyComponent extends Component {
    static contextType = MyContext
    constructor(props) {
        super(props);
        this.myFunction = this.myFunction.bind(this);
    }
    myFunction() {
        this.context.otherFunction('shouldBecorrectValue');
    }
}

理想情况下，我希望能够在不更改被测代码的情况下做到这一点。

【问题讨论】：

标签： reactjs unit-testing jestjs enzyme react-context

【解决方案1】：

mount 返回的包装器有 .instance() => ReactComponent 方法。仅适用于类组件。

返回单节点包装器的节点的底层类实例。

index.tsx:

import React, { Component } from 'react';

const MyContext = React.createContext({
  otherFunction: (value) => {
    console.log(value);
  },
});

export class MyComponent extends Component {
  static contextType = MyContext;
  myFunction() {
    this.context.otherFunction('shouldBecorrectValue');
  }
  render() {
    return <div>my component</div>;
  }
}

index.test.tsx:

import { mount } from 'enzyme';
import React from 'react';
import { MyComponent } from './';

describe('69127076', () => {
  test('should pass', () => {
    const logSpy = jest.spyOn(console, 'log');
    const wrapper = mount(<MyComponent />);
    wrapper.instance()['myFunction']();
    expect(logSpy).toBeCalledWith('shouldBecorrectValue');
    logSpy.mockRestore();
  });
});

测试结果：

 PASS  examples/69127076/index.test.tsx (10.228 s)
  69127076
    ✓ should pass (47 ms)

  console.log
    shouldBecorrectValue

      at console.<anonymous> (node_modules/jest-environment-enzyme/node_modules/jest-mock/build/index.js:866:25)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |     100 |      100 |     100 |     100 |                   
 index.tsx |     100 |      100 |     100 |     100 |                   
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        10.804 s

软件包版本：

"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
"react": "^16.14.0",
"react-dom": "^16.14.0",

【讨论】：

另外，您的示例没有显示您如何在测试中模拟上下文。目前，我正在这样做：context = {otherFunction: jest.fn()} 和 mount(<MyComponent>, {context}).instance()。我还需要使用React.createContext(context)吗？
对不起，我的意思是我可以创建一个实例，但是每当我这样做时，似乎都会给我一个 thrown: undefined 测试错误。所以我认为我还缺少其他步骤。