Question

使用酶和打字稿进行测试的新手。我正在尝试测试使用开源组件呈现进度条的组件。

最初，我有一个通过测试，“它是否渲染进度条”，但是一旦我通过了要渲染的子代，我就无法通过后续测试，并且我的初始测试开始失败。进度栏组件使用react渲染道具来渲染子级。

这是我组件的渲染方法

render () {
      return (
        <ProgressBar
          percent={75}
          filledBackground="linear-gradient(to right, #fefb72, #f0bb31)"
        >
          {this.state.steps.map(function (item: CaseStep) {
            return (
              <Step key={item.Id} transition="scale">
              {({ accomplished }: StepProps) => (
                <div>
                  {item.StepName}
                </div>
              )}
            </Step>
            )
          })}
        </ProgressBar>
      )
  }

这些是有问题的测试

    let mountedComponent
    beforeEach(() => {
        mountedComponent = shallow(<CaseProgress {...testProps}/>);
    })

    it('renders a progress bar',() => {
        let progressBars = mountedComponent.find('ProgressBar')
        expect(progressBars.length).toEqual(1)
    })

    it('has 5 steps in the progress bar', () => {
        let Steps = mountedComponent.find('ProgressBar Step')
        expect(Steps.length).toEqual(5)
    })

该组件本身实际上在进度条上呈现5个步骤。测试无法找到预期的元素，并且使用酶调试生成的树只是具有未命名的元素。我也尝试过使用酶安装，但这没有帮助。 .debug（）的输出如下。

<n percent={75} filledBackground="linear-gradient(to right, #fefb72, #f0bb31)">
        <i transition="scale">
          [function]
        </i>
        <i transition="scale">
          [function]
        </i>
        <i transition="scale">
          [function]
        </i>
        <i transition="scale">
          [function]
        </i>
        <i transition="scale">
          [function]
        </i>
      </n>

我渴望了解为什么未命名这些节点以及发生了什么情况。

使用渲染道具浅浅渲染未命名组件

0 个答案: