React-Redux Connected. Проверка правильности действий компонента была отправлена ​​по событию click.

Question

Я новичок в тестировании компонентов реакции-редукта со шуткой и ферментом, и до сих пор я нахожу это проблемой.

У меня есть страница входа в систему, и я хочу проверить, что правильное действие с ошибкой отправляется, если логин завершается с ошибкой после нажатия кнопки входа в систему.

Так вот как я проверяю свою связную компоненту,

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); 
}); 

В тот момент, когда я запустить этот тест, он терпит неудачу при попытке имитации нажмите он не может найти элемент кнопки. Однако этот реестр существует, и когда я пробую простой поиск, например, кнопку, он все равно не может найти какую-либо кнопку. Поэтому я предполагаю, что mount возвращает некоторую тихую ошибку или что-то в этом роде.

Я просто хочу проверить, что правильное действие вызывается, когда логин завершается с ошибкой.

Как пройти тест?

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);  
 

 
});

Надеется, что это поможет.