【问题标题】:Jest- testing variables inside component methods开玩笑测试组件方法中的变量
【发布时间】:2018-07-14 22:54:54
【问题描述】:

假设我有一个类似这样的类组件:

export class Math extends React.Component {
    ...
    someComponentMethod = numb => {
        const sample = numb * 10 
        ...
        const result = numb -5
        return result
    }

是否可以在 Jest 中对 sample 变量进行测试断言?

【问题讨论】:

  • 我不相信这在技术上是可行的。你的动机是什么?

标签: javascript jasmine jestjs tdd enzyme


【解决方案1】:

我已经设法通过以下方式在函数中测试了某个变量值:

sum1.js

function sum() {
    result = 1 + 2;
 };

module.exports = sum;

sum1.test.js

const sum = require('./sum1');

sum();

test('adds 1 + 2 to equal 3', () => {
  expect(result).toBe(3);
});

希望对你有帮助,干杯!

【讨论】:

  • result 在您运行此测试时不会被定义
【解决方案2】:

不可能为函数的私有内部编写断言。

我个人发现这个障碍鼓励编写更好的测试。通过仅测试公共 API 的正确性,您可以重构内部结构而无需更新任何测试。现有测试继续强制内部更改正常工作。

针对内部行为编写测试很容易增加被测代码的维护工作量。由于测试与源代码的耦合更加紧密,因此在进行更改时需要更多注意。这也会降低测试的可靠性,因为对测试的更多更改会增加测试本身出现错误的可能性。

如果您发现自己想要测试一些内部行为,那么可能是提取一些功能的好时机。在您的示例中,sample 值计算可以提取到它自己的纯函数中:

export class Math extends React.Component {
    ...

    computeSampleValue(input) {
        return input * 10
    }

    someComponentMethod = numb => {
        const sample = this.computeSampleValue(numb)
        ...
        const result = numb -5
        return result
    }
}

您现在可以断言,用于计算 sample 值的任何逻辑对于各种输入都按预期工作。这种逻辑提取通常也使someComponentMethod 更具可读性。

如果您绝对需要测试其他一些内部行为并且意识到代码债务的增加,您可以让您的方法执行副作用并为它们编写断言。例如,不要将sample 定义为函数范围变量,而是在组件实例上创建this.sample 属性并更新它。然后在测试中调用目标方法,然后断言 componentInstance.sample 已按预期更改。

【讨论】:

  • 感谢您的回复!我最终做的是创建一个组件状态。唯一的目的是通过 setState 检查内部变量,然后我可以通过 jest 访问它
  • 这行得通,请注意使用setState 会导致组件重新渲染。如果您的 render() 方法不使用该属性,那么这些重新渲染是浪费的计算。如果属性仅用于测试,请考虑使用普通类属性 (this.sample = ...) 而不是状态。
猜你喜欢
  • 1970-01-01
  • 2021-01-24
  • 2018-02-22
  • 1970-01-01
  • 2021-01-09
  • 1970-01-01
  • 2017-07-13
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多