如何对“非独立功能”进行单元测试？

Question

我了解单元测试独立函数（如帮助程序类）的知识，但我如何处理非独立函数（通常在具有多个验证和结果的类文件中）？

下面的示例显示了多个条件检查和不同结果的响应。

• 我是否在我的测试用例中调用valueCheck 和proceedApiCheck 函数？但是在测试中我不需要不同的场景或操作。 （例如，setState / navigating）
• 我是否在我的测试用例中编写了valueCheck 和proceedApiCheck 的新函数？但这意味着我的代码中有两种不同的逻辑。有一天，如果我在应用程序中更改逻辑，我的测试用例不会失败，因为它引用的是旧逻辑。

你们中的任何人都可以对此有所了解吗？

示例

export class Screen1 extends React.Component {

    valueCheck = (value) => {
        if(value === 'abc'){
            this.setState({ isNavigating:true, transfer: true })
            this.proceedApiCheck(value)
        }
        if(value === '123'){
            this.setState({ isNavigating:true, transfer: false })
            this.proceedApiCheck(value)
        }
    }

    proceedApiCheck = async(value) =>{
        let data
        try{
            data = await FirstApi(value);
            this.setState(data)
        }catch(){
            this.navigateToScreen('Failure')
            return;
        }

        switch(data.name){
            case 'fake adidas':
                this.navigateToScreen('Failure')
                return;
            case 'fake nike':
                this.navigateToScreen('Failure')
                return; 
        }
        
        try{
            const result = await secondApi(data.price);

            switch(result.currency){
                case 'EURO':
                    this.navigateToScreen('Euro')
                case 'Pound':
                    this.navigateToScreen('Pound')
                default: 
                    this.navigateToScreen('Dollar')
            }
        }catch(){
            this.navigateToScreen('Failure')
            return;
        }
    }


}

Answer 1

您有一个有价值的发现：

最直接的代码编写方式不一定是最稳健的代码编写方式。

大多数人使用类的方式加剧了这个不幸的问题：隐含的this 引用使得很容易在一个方法中做太多事情，更不用说一个类了。这使您获得了第二个有价值的发现：

关于独立单元测试的最有价值的事情之一是它们为您的设计提供反馈。

在这里，隔离测试的困难在于告诉您，您以一种难以梳理的方式耦合了不同的关注点。你有一个方法有七个 (7!!) 不同的退出点，现在你被卡住了，因为这是一个 lot 的模拟，试图触发适当的逻辑以确保你击中所有他们。

考虑以下替代方案：

const FAIL = {}; // could also use Symbol() here, any unique ref
const BAD_NAMES = ['fake whatever'];
async function apiCall1() {
  const resp = await fetch(someURL);
  return resp.json();
}

function validate1(data) {
  return data?.name === undefined || BAD_NAMES.includes(data?.name) 
    ? FAIL 
    : data.name;
}

// You can imagine what validation and fetching look like for
// the second API call

function processData(data) {
  switch(data.currency){
    case 'EURO':
      return 'Euro';
    case 'Pound':
      return 'Pound';
    default: 
      return 'Dollar';
  }
}

async function doTheThing() { // use a better name IRL
  try {
    const first = await apiCall1();
    const data = validate1(first);
    if (data === FAIL) throw new Error('whatever');
    
    const second = await apiCall2(data.whatever);
    const data2 = validate2(second);
    if (data2 === FAIL) throw new Error('something else');

    // process data we now know is good.
    return processData(data);
  } catch (err) {
    console.error(err);
    return 'Failure';
  }
}

class Screen1 extends React.Component {
  async proceedApiCheck () {
    const nextScreen = await doTheThing();
    this.navigateToScreen(nextScreen);
  }
}
      

1. 这里我们只在一个地方返回失败屏幕触发器。函数都有明确的出口。
2. 有一个方便的功能可以取消装箱请求（或隐藏 xhr 的详细信息，如果您这样做的话）。
3. 所有验证和业务逻辑都是可独立测试的。它也是在一个地方，而不是通过冗长的方法传播到各个地方。
4. 所有逻辑都在返回值的普通函数中，除了fetch 之外不需要任何模拟。
5. proceedApiCheck 所做的唯一事情是从逻辑函数中获取值并导航到正确的屏幕，并且很容易模拟测试。

如果你真的喜欢类，你也可以让你的类的所有这些函数成为静态方法，但重要的是你的测试几乎不需要复杂的模拟，它应该是更明显的是代码路径是什么以及如何测试它们。

您想要遵守的高风险软件工程实践（正如 @DrewReese 在 cmets 中指出的那样）是 Single Responsibility Principle，它指出函数/方法应该只执行一个合乎逻辑的操作手术。验证器仅进行验证，条件仅进行调度，从外部源获取数据的函数应仅获取数据（而不是对其进行操作），等等。

Answer 2

如果您认为有必要对valueCheck 进行单元测试（在实际情况下可能是一个复杂的函数），请将其移出类并使其可单独测试。那么它应该是这样的：

function valueCheck(value) {
switch(value) {
case 'abc':
    return {shouldProceedApiCheck: true, newState:{ isNavigating:true, transfer: true }}
case '123':
    return {shouldProceedApiCheck: true, { isNavigating:true, transfer: false }}
default:
    return {shouldProceedApiCheck: false, newState: {} }
}

.....

class Screen1 extends React.Component {
....
whenToCall = ()=>{
    const {newState, shouldProceedApiCheck} = valueCheck(value)
    this.setState(valueCheck(newState), ()=>{
        if(shouldProceedApiCheck) {
          this.proceedApiCheck(value)
        }
    })
}
....
}

延伸阅读：https://medium.com/front-end-weekly/making-testable-javascript-code-2a71afba5120