unit-testing - 我可以仅使用浅层渲染而不安装完整的组件树来完成所有单元测试吗？

Question

请让我举例说明。假设我们有一个应用程序要做:

// TodoContainer.jsx
<TodoContainer>
  <AddTodo />
  <TodoList />
</TodoContainer>

我的问题是如何测试其添加待办事项功能？是否足够......

方法#1

1. 浅渲染 TodoContainer 并断言..

   a.它有一个有效的 addTodoMethod ，可以相应地更新状态

   b.它传递 addTodoMethod 其子复合组件 AddTodo

2. 浅渲染AddTodo并断言..

   a.它已收到 addTodoMethod 作为 prop

   b.单击按钮时会触发 addTodoMethod

这就是方法 #1 的样子:

// TodoContainer.spec.jsx
describe('<TodoContainer />', function()  {
  describe('addTodoMethod', function()  {
    beforeEach(function() {
      this.todoContainer = shallow(<TodoContainer />)
    })

    it('adds todo to todos state when called', function() {
      const todos = this.todoContainer.instance().state('todos')

      this.todoContainer.instance().addToDoMethod('sample todo item')

      expect(todos).length.to.be(1)
      expect(todos[0]).to.be('sample to do item')
    })

    it('is passed do AddTodo component', function()  {
      const addTodo = shallow(<AddTodo />)

      expect(addTodo.instance().prop('onClick')).to.eql.(this.todoContainer.addTodoMethod)
    })
  })
})

// TodoContainer.spec.jsx
describe('<AddTodo />', function()  {
  beforeEach(function() {
    this.addTodo = shallow(<AddTodo />)
  })

  it('has onClick prop', function() {
    expect(this.addTodo).to.be.a('function')
  })

  it('calls onClick when clicked', function()  {
    const onClickSpy = spy();
    const addTodo = shallow(<AddTodo onClick={onClickSpy} />)

    addTodo.setState({ newTodoText: 'sample new todo' })
    addButton.find('button').simulate('click');

    expect(onClickSpy.calledOnce()).to.be.true
    expect(onClickSpy.calledWith('sample new todo')).to.be.true
  })
})

或者我也应该采用下一种方法吗？

方法#2

1. 除了上面的断言之外，还挂载 TodoContainer 来断言..

   a.它可以通过输入新的待办事项文本并单击按钮(均在 AddTodo 组件中)来添加待办事项，新的待办事项也通过遍历到 TodoList 组件并检查来断言如果它具有正确的 li 数量及其正确的内容。

方法 #2 的代码:

// TodoContainer.spec.jsx
describe('<TodoContainer />', function()  {
    ...

    it('can add a todo item', function() {
      this.todoContainer.find('input').simulate('change', {target: {value: 'sample new todo 01'}})
      this.todoContainer.find('button').simulate('click')

      expect(this.todoContainer).to.have.exactly(1).descendants('li')
      expect(this.todoContainer.find('li')[0]).to.have.text('sample new todo')

      this.todoContainer.find('input').simulate('change', {target: {value: 'sample new todo 02'}})
      this.todoContainer.find('button').simulate('click')

      expect(this.todoContainer).to.have.exactly(2).descendants('li')
      expect(this.todoContainer.find('li')[1]).to.have.text('sample new todo 02')
    })
})

我只是在想第二种方法是否有点多余，以及仅专注于测试手头的组件并让子组件依赖于它们自己的测试是否是更好的做法。

Answer 1

简而言之，是的 - 您可以使用 shallow 编写所有单元测试。在大多数情况下，您可能正是想要这样。然而，有时会出现异常，您可能需要使用 mount 来代替:

1. 如果某组组件聚集在一起，并且您更感兴趣的是作为一个整体来测试该集群，而不是单独测试每个部分。
2. 如果您的组件与外部库紧密耦合，那么单独测试您的组件会感觉更像是在测试该外部库。

不过，根据一般经验，我倾向于使用 shallow 进行单元测试，mount 进行集成测试。