2
私に説明してください。我々はアプリを実行するためにこれを持って言ってみましょう：完全なコンポーネントツリーをマウントせずに、浅いレンダリングだけですべてのユニットテストを実行できますか？
// TodoContainer.jsx
<TodoContainer>
<AddTodo />
<TodoList />
</TodoContainer>
私の質問はが、私はそのadd todo機能をテストする方法のですか？ は、それは十分..
アプローチ＃1
浅い
TodoContainerをレンダリングし、それを主張する..です。それに応じて状態を更新する作業
addTodoMethodがあります。bです。それは浅いが
AddTodoをレンダリングし、それを主張AddTodo、
addTodoMethodその子の複合成分を通過させる。..
。それはをプロ
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
})
})
または私はまた、この次のアプローチをすればよいですか？またそれをアサートするTodoContainerマウント
アプローチ＃2
、..
。テキストを入力してボタンをクリックすると（
AddTodoコンポーネントの両方で）新しい入力項目を追加することができます。また、新しいtodo項目も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')
})
})
第二のアプローチはちょっと冗長である場合、私はちょうど考えていて、手だけでコンポーネントをテストに焦点を当て、より良い練習の場合と子コンポーネントが独自のテストに依存するようにします。