onClick Jest / enzim : Metode "simulasi" dimaksudkan untuk dijalankan pada 1 node. 0 malah ditemukan

Saya tidak dapat menguji onClick untuk kode berikut di bawah ini. Saya terus mendapatkan kesalahan berikut:

Method “simulate” is meant to be run on 1 node. 0 found instead.

Kode komponen saya terlihat seperti ini:

constructor (props) {
  super(props)
  this.state = INITIAL_STATE;
}

handleQuickFilter = (type) => {
  this.setState({
    quickFilterObj: {...this.state.quickFilterObj, [type]: {...this.state.quickFilterObj[type], checked: !this.state.quickFilterObj[type].checked}}
    }, () => {
      let filter = this.buildFilter();
      filter ? 
        linker.UniversalGrid('Counterparty.Loa.Enrollment', '', `{form_filter}=$filter=(${filter}),{grid_selectable}=1,{can_add}=1`) 
      :
        linker.UniversalGrid('Counterparty.Loa.Enrollment', '', `{form_filter}='',{grid_selectable}=1,{can_add}=1`)
  })
}

render () {
  return(
    <div className='enrollment-grid-wrapper'>   
      <div className='quick-filter-div'>
        <button className={this.state.quickFilterObj['New'] && this.state.quickFilterObj['New'].checked ? 'checked quick-filter' : 'unchecked quick-filter'} 
                id = 'testnew'
                onClick={() => {this.handleQuickFilter('New')}}
                >
            New {this.state.quickFilterObj['New'] && this.state.quickFilterObj['New'].count !== undefined ? `(${this.state.quickFilterObj['New'].count})` : null}
        </button>
        <button className={this.state.quickFilterObj['Sent'] && this.state.quickFilterObj['Sent'].checked ? 'checked quick-filter' : 'unchecked quick-filter'} 
                onClick={()=>{this.handleQuickFilter('Sent')}}
                >
            Sent {this.state.quickFilterObj['Sent'] && this.state.quickFilterObj['Sent'].count !== undefined ? `(${this.state.quickFilterObj['Sent'].count})` : null}
        </button>
  )
}

Saya sudah mencoba yang berikut ini, menggunakan Jest/enzim:

it("should HandlequickFilter with button click", () => { 
  wrapper.setProps({}); 
  wrapper.setState({quickFilterObj:"test"}); 
  wrapper.find('.quick-filter-div').at(0).simulate("click");
  expect(wrapper.state().quickFilterObj.New.checked).toEqual(true);
});

Bagaimana saya bisa lulus tes berikut?


reactjs unit-testing jestjs enzyme onclick
person user 9191    schedule 21.02.2019    source sumber
comment
Apakah Anda menggunakan modul css? Jika demikian, Anda tidak akan memiliki div dengan kelas quick-filter-div, tetapi kelas tersebut akan diganti namanya menjadi sesuatu dengan tambahan string.   -  person Alvin S. Lee    schedule 21.02.2019
comment
Ya. Jadi bagaimana saya bisa menguji onClick   -  person user 9191    schedule 21.02.2019

Jawaban (2)


arrow_upward
0
arrow_downward

Karena Anda menggunakan modul css, DOM yang dirender sebenarnya tidak akan berisi div dengan kelas quick-filter-div. Sebaliknya, kelasnya akan menjadi seperti quick-filter-div__012xyz. Karena itu, wrapper.find('.quick-filter-div') akan mengembalikan 0 node.

Anda dapat memverifikasi ini dengan meletakkan baris berikut dalam pengujian Anda tepat setelah baris setState:

expect(wrapper.find('.quick-filter-div').exists()).toEqual(false)

Namun, sepertinya yang ingin Anda uji adalah klik button di dalam div.quick-filter-div Anda. Bukankah itu benar? Lagipula, handler onClick adalah prop untuk button dan bukannya div.

Dan karena button Anda sudah diberi id, Anda dapat melakukan:

it("should HandlequickFilter with button click", () => { 
  wrapper.setProps({}); 
  wrapper.setState({quickFilterObj:"test"}); 
  const button = wrapper.find('button#testnew') // find button based on id selector
  expect(button.exists()).toEqual(true)         // make sure button is found
  button.simulate("click");                     // simulate click
  expect(wrapper.state().quickFilterObj.New.checked).toEqual(true);
});

Jika Anda tidak memberikan id pada tombol Anda, tetapi Anda tahu bahwa klik tombol yang ingin Anda uji adalah tombol pertama (bukan yang kedua), maka Anda dapat mencoba:

it("should HandlequickFilter with button click", () => { 
  wrapper.setProps({}); 
  wrapper.setState({quickFilterObj:"test"}); 
  const buttons = wrapper.find('button')        // find all buttons
  expect(buttons).toHaveLength(2)               // make sure you found 2 buttons
  const button = buttons.at(0)                  // get the first button
  button.simulate("click");                     // simulate click
  expect(wrapper.state().quickFilterObj.New.checked).toEqual(true);
});
person Alvin S. Lee    schedule 21.02.2019
comment
Keduanya tidak berfungsi. Untuk jawaban pertama saya mendapatkan False, bukan true. Yang kedua bahkan lebih rumit - saya juga mendapatkan false dan mengharapkan : menampilkan semuanya dalam render - person user 9191; 21.02.2019
comment
@ user9191 Apakah Anda menggunakan render atau shallow Enzim? Ini berfungsi jika Anda menggunakan shallow. Cobalah untuk mengatur wrapper = shallow(<YourComponent />) bukannya render - person Alvin S. Lee; 21.02.2019
comment
menggunakan dangkal - seperti yang Anda jelaskan di atas - person user 9191; 21.02.2019
comment
Saya menambahkan lebih banyak informasi pada pertanyaan saya yang mungkin membantu menemukan masalahnya. silakan lihat - person user 9191; 21.02.2019
comment
@ user9191 Bisakah Anda juga memposting kode lelucon/enzim Anda? Yang terpenting, bagaimana Anda mendeklarasikan dan menetapkan wrapper? - person Alvin S. Lee; 21.02.2019
comment
@ user9191 Omong-omong, di baris setState kode komponen Anda, Anda memiliki quickFilterObj: {...this.state.quickFilterObj, [type] - apakah itu salah ketik? Apakah maksud Anda ada koma di sana, atau seharusnya quickFilterObj: {...this.state.quickFilterObj[type]: ? - person Alvin S. Lee; 21.02.2019
comment
seharusnya ada koma di sana - - person user 9191; 21.02.2019
comment
Apa yang menyebabkan masalah? - person user 9191; 21.02.2019
comment
Sudahkah Anda mencoba menggunakan shallow alih-alih render? Bisakah Anda memposting kode lelucon/enzim Anda? - person Alvin S. Lee; 21.02.2019
comment
Saya menggunakan dangkal daripada render - person user 9191; 21.02.2019
comment
@ user9191 Apa hasilnya? - person Alvin S. Lee; 21.02.2019
comment
hasilnya sama seperti sebelumnya. Tidak lolos - person user 9191; 21.02.2019
comment
Melihat kode LOA Anda, saya melihat ada lebih banyak tombol di komponen Anda daripada hanya 2. Jadi, dalam contoh pengujian kedua saya di atas, Anda harus mencoba expect(buttons).toHaveLength(9) diikuti oleh const button = buttons.at(2) Selain itu, saya tidak dapat menjalankan pengujian LOA Anda di kotak pasir kode karena Could not find module in path: '../../Utils/UniversalLinker' relative to '/src/components/LOA/LOA.js' - person Alvin S. Lee; 21.02.2019
comment
impor * sebagai penghubung dari '../../Utils/UniversalLinker'; ?? - person user 9191; 21.02.2019
comment
Saya juga melakukan penyesuaian ke 9 dan 2 - masih gagal - person user 9191; 21.02.2019
comment
Ya, saya harus memperbaiki setState saya agar bisa lulus. Saya akan memeriksanya nanti. bisakah Anda mengedit komentar sebelumnya - tidak ingin tautan kotak pasir di sini.. terima kasih atas bantuannya - person user 9191; 21.02.2019
comment
Terima kasih kembali. Saya akan menghapus kotak pasir bercabang dan menghapus komentarnya. Saya harap jawaban itu membantu Anda. Jika ya, harap pertimbangkan untuk menerima jawaban saya. Selamat membuat kode! - person Alvin S. Lee; 21.02.2019
comment
jawaban diperbaiki - lihatlah - person user 9191; 28.02.2019

arrow_upward
0
arrow_downward

Harus menambahkan Return new Promise di fungsi jest.fn Anda

//mocking functions
getSelectedLOAs  = jest.fn( () => {
return new Promise((resolve, reject) => {
resolve()
})
});


it("should test click event NEW  method", () => {
wrapper.setProps({
});
wrapper.find('COMPONENT').setState({ 
  quickFilterObj:{
    New: {
      checked: true
    },
    Sent: {
      checked: true
    },

   }, } );
wrapper.update();
wrapper.find('#New-testclick').simulate("click");
wrapper.find('#Sent-testclick').simulate("click");
person user 9191    schedule 28.02.2019