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

所以我开始使用，我真的很喜欢这个想法

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

让我们以以下代码为例：

OrderCreatePage

函数CreateOrderPage（）{
const[stepOneFrom，setStepOneForm]=useState（{}）；
const[stepTwoFrom，setStepTwoForm]=useState（{}）；
const[stepThreeFrom，setStepThreeForm]=useState（{}）；
常量[步骤，设置步骤]=使用状态（1）；
const previousStep=（）=>{
设置步骤（prev=>prev-1）；
}
常量下一步=（）=>{
设置步骤（prev=>prev+1）；
}
常量createOrder=（）=>{
endpoint.createOrder({
stepOneForm，
stepTwoForm，
三级
});
}
返回(
{步骤===1&&
}
{步骤===2&&
}
{步骤===2&&
}
);
}

第一步

功能第一步（道具）{
常量isValidForm（）=>{
return//对props.form进行一些检查
}
const handleNextClick=（）=>{
if（isValidForm（））{
props.onNextStep（）；
}
}
返回(
//第二步和第三步，例如有送货单和付款单
下一个
);
}

对于

第二步

和

第三步

，只要想象它们与

第一步

相似即可

上述示例中的

ArticleForm

正在声明所有输入字段等，并正在更新表单值

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

• 表单级别aka

  ArticleForm

  ：测试表单是否正确更新
• 步骤级别aka

  StepOne

  ：独立于其他步骤测试步骤，确保只有在表单有效时才允许进入下一步
• 页面级别aka

  OrderCreatePage

  ：测试步骤的转换（包括验证检查）并检查是否可以创建订单

那么从哪里开始测试呢？

如果您为

ArticleForm

编写测试，那么您不需要测试验证，因此您需要为

StepOne

编写测试。如果您已经为

ArticleForm

编写了测试，那么您基本上需要复制该测试中填充输入字段的逻辑，这使得

ArticleFrom

测试毫无用处。好的，那么让我们跳过

ArticleForm

测试

对于转换，您需要立即测试

OrderCreatePage

。这一次，您需要从

StepOne

（和

stepotwo

，

stepotwree

）测试中复制输入有效/无效数据的逻辑，否则无法继续/检查转换。 因此，只需删除

步骤一

（和

步骤二

，

步骤三

）测试

但是这会导致

OrderCreatePage

产生一个大的测试文件，这已经不再是单元测试了

---

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

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

我喜欢您正在使用的库（react测试库）作者的方法

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

对于您的示例，我将尝试从用户的角度而不是从代码的角度来看待它：

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

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

---

总的来说，这个问题有很多正确的答案，所以保持开放的心态，尝试和学习，这里没有银弹

实际上非常好的博客/视频！但如果我只从用户角度来看，我几乎总是在页面级别上测试应用程序。。也许这只是我在atm上工作的应用程序，也许这是这种情况下最好的方法。我认为使用这种方法，您将获得最大的投资回报

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>
  );
}