在为 React 模块编写单元测试时如何模拟“this”？

Question

我正在编写一个 React 应用程序，其中 App.js 内部有很多逻辑，将其余组件联系在一起并保持一致的状态。我已经将一些原本在 App.js 中的代码移到了 helpermodule.js 中，并绑定了导入的函数，以便它们可以操作 App 组件的状态。

这是我的设置：

App.js

import helperFunction from './helpermodule'

class App extends Component {
  constructor(props) {
    super(props)

    this.state = { foo: 'bar' }
    this.helperFunction = helperFunction.bind(this)
  }
}

helpermodule.js

function helperFunction() {
  this.setState({
    bar: 'calculated' + this.state.foo,
  })
}

export { helperFunction }

我想为辅助模块中的函数编写一个单元测试。我在 Enzyme 或 Jest 文档中找不到相关部分。目标是查看 helperFunction 对 App 状态的影响。

我已经尝试过这样的事情

test('helperFunction', () => {
  let state = { foo: 'bar' }
  let setState = (obj) => { this.state = obj }

  return expect(helperFunction().bind(this))
    .toBe({
      ...newShift,
      id: 0,
    })
}

但这只会返回一个错误； TypeError: Cannot read property 'state' of undefined。也许我的整个方法都是错误的，所以可以绕过这个问题，但我不确定。

Answer 1

不要在外部函数中使用 this.setState

helpermodule.js

function helperFunction(stateFoo) {
  return {bar: 'calculated' + stateFoo};
}

export { helperFunction }

然后使用结果在组件中设置状态。也不要在构造函数中设置状态。

import helperFunction from './helpermodule'

class App extends Component {
  constructor(props) {
    super(props)

    this.state = { foo: 'bar', ...helperFunction('bar') }
  }
}

这将使测试更容易，并且总体上是一个更好的结构。

Answer 2

不知道您为什么要遵循这种方法，但为了您的论点，它是如此奇怪且难以遵循和维护。问题是你将this 传递给绑定，而this 没有state 或setState 的属性，所以你应该传递一个模拟的this。

这是怎么回事

describe('helperFunction', () => {
    function helperFunction() {
        // @ts-ignore
        this.setState({
            // @ts-ignore
            bar: 'calculated' + this.state.foo,
        })
    }

    it('updates the provided stateHolder', () => {
        const stateHolder = {
            state: { foo: 'bar' },
            // don't use arrow function otherwise it won't react the state via this
            setState(obj: any) {
                this.state = obj;
            },
        };

        const importedHelperFunction = helperFunction.bind(stateHolder);
        importedHelperFunction();

        expect(stateHolder.state.foo).toBe('calculatedbar');
    });
});