我应该 start/stop 在哪个级别编写测试？

Question

所以我开始使用react-testing-library and I really like the idea 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>
  );
}

第一步

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 个级别来编写测试（从最低级别到最高级别）

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

那么从哪里开始测试呢？

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

对于转换，您现在需要测试 OrderCreatePage。这次你需要从StepOne（和StepTwo、StepThree）测试中复制输入valid/invalid数据的逻辑，否则你无法proceed/check转换. 所以只需删除 StepOne（和 StepTwo、StepThree）测试。

但是这会导致 OrderCreatePage 的测试文件很大，而且这已经离单元测试很远了。

我真的很感激这里的任何帮助，因为我总是有这种想法..

Answer 1

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

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

编写测试。不是很多。主要是整合。

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

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

边缘情况：如果不是所有字段都已完成/步骤未验证等，用户将无法创建订单。

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

我应该 start/stop 在哪个级别编写测试？

On which level should I start/stop writing tests?

unit-testing

reactjs

react-testing-library

订单创建页面

第一步