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

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

让我们以下面的代码为例：

OrderCreatePage

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级（从最低到最高）

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

那么从哪里开始测试？

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

对于过渡，您现在需要测试OrderCreatePage。这次，您需要复制从StepOne（和StepTwo，Stepthree）测试中输入有效/无效数据的逻辑，否则您将无法继续/检查过渡。 因此，只需删除StepOne（和StepTwo，Stepthree）测试。

但这会导致OrderCreatePage的测试文件很大，而且再也没有单元测试了。

真的很感谢您的帮助，因为我总是以这种想法告终。