Question

所以我有以下类似内容：

function calculate = (value) => { return value + somecalculations }

class MyComponent extends React.Component {

   ...

   render() {
       if (calcuate(this.props.value) === 1) {
          return(<MyComponentVersion1 />)
       } else {
          return <MyComponentVersion2 />
       }
   }
}

我的问题是，在进行开玩笑的单元测试时，我希望能够模拟功能calculate（）。但是该函数对该文件是全局的，并且不是我的react组件的一部分。有没有办法模拟此函数，使其始终返回1？谢谢

Answer 1

如果您想在没有任何额外依赖项的情况下（例如模拟库）执行此操作，则应该通过在组件的prop中将其设置为MyComponent来告诉要使用的函数，从而可以使用依赖项注入就像这样：

calculate = (value) => { return value + somecalculations }

class MyComponent extends React.Component {
    constructor(props) {
        this.calculate = this.props.calculate || calculate
    }

    render() {
        if (this.calculate(this.props.value) === 1 {
            return (<MyComponentVersion1 />)
        } else {
            return (<MyComponentVersion2 />)
        }
    }
}

...然后在测试中，可以使用模拟计算功能：

test('put a really good test description here', () => {
    const mockCalculate = () => 1
    const myTestSubject = (<MyComponent calculate={mockCalculate} value={whatever}/>)
    // the rest of your test
})

如果您想使用实际的模拟库，则可以尝试sinon.js Mocks。

Answer 2

您需要一种从文件外部访问calculate函数的方法。最简单的方法是分别导出函数：

export function calculate () {
  // ...
}

此选项对您的源代码也具有最小的影响。

如何在Jest测试中模拟React组件正在使用的功能？

2 个答案: