我应该在哪个级别开始/停止编写测试？

Question

所以我开始使用react-testing-library，我真的很喜欢to test user actions, not implementation details这个想法。

我真正苦苦挣扎的是从哪里开始编写测试？更准确地说：我应该在组件树的哪个级别开始编写测试？

我们以下面的代码为例：

订单创建页面

function CreateOrderPage() {
  const [stepOneFrom, setStepOneForm] = useState({});
  const [stepTwoFrom, setStepTwoForm] = useState({});
  const [stepThreeFrom, setStepThreeForm] = useState({});
  const [step, setStep] = useState(1);

  const previousStep = () => {
    setStep(prev => prev - 1);
  }

  const nextStep = () => {
    setStep(prev => prev + 1);
  }

  const createOrder = () => {
    endpoint.createOrder({
      stepOneForm,
      stepTwoForm,
      stepThreeForm
    });
  }

  return (
    <div>
      {step === 1 && 
        <StepOne
          form={stepOneForm}
          onNextStep={nextStep}
          onFormChange={setStepOneForm}
        />
       }
      {step === 2 && 
        <StepTwo
          form={stepTwoForm}
          onNextStep={nextStep}
          onPreviousStep={previousStep}
          onFormChange={setStepTwoForm}
        />
       }
      {step === 2 && 
        <StepTwo
          form={stepTwoForm}
          onPreviousStep={previousStep}
          onCreateOrder={createOrder}
          onFormChange={setStepTwoForm}
        />
       }
    </div>
  );
}

StepOne

function StepOne(props) {
  const isValidForm() => {
    return // do some checks on props.form
  }

  const handleNextClick = () => {
    if(isValidForm()){
      props.onNextStep();
    }
  }

  return (
    <div>
      <ArticlesForm form={props.form} onFormChange={props.onFormChange}/> // StepTwo and StepThree e.g. have DeliveryForm and PaymentForm
      <button onClick={props.nextStep}>Next</button>
    </div>
  );
}

对于StepTwo 和StepThree，想象它们与StepOne 相似。

以上示例中的ArticleForm 正在声明所有输入字段等，并正在更新表单值。

认为所有组件都要复杂得多，不要把这个例子当回事。通常有 3 个级别来编写测试（从最低到最高级别）

• 表单级 aka ArticleForm：测试表单是否正确更新
• Step-level 又名StepOne：独立于其他步骤的测试步骤，确保只有在表单有效时才允许您进入下一步
• 页面级又名OrderCreatePage：测试步骤转换（包括验证检查）并检查您是否可以创建订单

那么从哪里开始测试呢？

如果您为ArticleForm 编写测试，那么您不测试验证，因此您需要为StepOne 编写测试。如果您已经为ArticleForm 编写了测试，则基本上需要从该测试中复制填充输入字段的逻辑，这使得ArticleFrom 测试毫无用处。好吧，让我们跳过 ArticleForm 测试吧。

对于您现在需要测试OrderCreatePage 的转换。这一次您需要从StepOne（和StepTwo、StepThree）测试中复制输入有效/无效数据的逻辑，否则您将无法继续/检查转换。 所以只需删除StepOne（和StepTwo、StepThree）测试。

但这会导致OrderCreatePage 的测试文件很大，并且不再接近单元测试。

我真的很感谢这里的任何帮助，因为我总是以这种想法结束..

Answer 1

好吧，没有编写好的和有效的测试的公式，一些测量覆盖率，然后你应该开始测试表单级别以达到良好的覆盖率。

我喜欢你正在使用的库作者的方法（react-testing-library）https://kentcdodds.com/blog/write-tests

编写测试。不是很多。主要是集成。

对于你的例子，我会尝试不从代码的角度来看待它，而是从用户的角度来看：

快乐流程：用户应该能够完成所有步骤并提交表单（那里可能需要一些模拟）

边缘案例：如果并非所有字段都已完成/步骤未验证等，用户将无法创建订单。

总的来说，这个问题有很多正确的答案，所以请保持开放的心态，实验和学习，这里没有灵丹妙药