React-Redux Connectedコンポーネントの正しいテストがクリックイベントにディスパッチされました

Question

私はjestと酵素で反応抑制成分をテストする初心者です。

ログインページがあり、ログインボタンがクリックされた後にログインが失敗した場合、正しいエラーアクションがディスパッチされていることをテストします。

だから、これは私がこのテストを実行するとき、それは、ボタン要素を見つけることができませんクリックをシミュレートしようとすると、それは失敗だ瞬間、

require('../jsDomSetup'); 
import React from 'react'; 
import { Provider } from 'react-redux'; 
import loginDefault, {Login} from '../../app/routes/Login/LoginContainer'; 
import {mount, shallow} from 'enzyme'; 
import loginActions from '../../app/redux/actions/loginActions'; 
import thunk from 'redux-thunk'; 
import configureMockStore from 'redux-mock-store'; 
import nock from 'nock'; 

describe("login container component", function(){ 

afterEach(() => { 
    nock.cleanAll(); 
}); 

test("loginFailure action is called when login failed due to no crendetials",() =>{ 
    nock('http://192.168.0.2:3000') 
    .get('/graphql?prettify=true') 
    .replyWithError('login failed'); 

    // Error message: Incorrect username and password please try again 
    const mockStore = configureMockStore([thunk]); 
    const store = mockStore(); 
    const output = mount(<Provider store={store}><loginDefault></loginDefault></Provider>) 
    let loginButton = output.ref('loginButton'); 
    expect(store.getActions().length).toBe(0); 
    loginButton.simulate('click'); 
    expect(store.getActions().length).toBe(1); 
}); 

を私の連結成分をテストしてる方法です。しかし、このrefが存在し、ボタンのような単純な検索を試みると、まだボタンを見つけることができません。だから私は、マウントは何かの静かなエラーや何かを返すと仮定します。

ログインが失敗したときに正しいアクションが呼び出されることを確認したいだけです。

このテストをパスするにはどうすればよいですか？

Answer 1

あなたはほぼそこにいる、これは私のために働く。

test("loginFailure action is called when login failed due to no crendetials",() =>{ 
 
    nock('http://192.168.0.2:3000') 
 
    \t .get('/graphql?prettify=true') 
 
\t .replyWithError('login failed'); 
 

 
    // Error message: Incorrect username and password please try again 
 
    const mockStore = configureMockStore([thunk]); 
 
    const store = mockStore(); 
 

 
    const withProvider = (
 
      <Provider store={store}> 
 
       <loginDefault /> 
 
      </Provider> 
 
     ); 
 

 
    const wrapper = mount(withProvider); 
 
    let loginButton = wrapper.find('button'); //here you can use other selector like #myButton or .btn, but be sure it can find it. 
 
    loginButton.simulate('click'); 
 
    
 
    const unsubscribe = store.subscribe(() => { \t  
 
        const actions = store.getActions(); 
 
\t \t  //here your expectation after the action is raised 
 
        expect(actions.length).to.have.length.above(0); 
 
       }); 
 

 
    expect(store.getActions().length).toBe(0);  
 

 
});

このヘルプを願っています。