React Redux注入的測試屬性

如果屬性errorMessage不是null，我有一個呈現按鈕的組件。React Redux注入的測試屬性

class App extends Component { 
    static propTypes = { 
    // Injected by React Redux 
    errorMessage: PropTypes.string, 
    resetErrorMessage: PropTypes.func.isRequired, 
    }; 

    renderErrorMessage() { 
    const { errorMessage } = this.props; 
    if (!errorMessage) return null; 

    return (
     <p id="error-message"> 
     <b>{errorMessage}</b>{' '} 
     <button id="dismiss" onClick={this.props.resetErrorMessage()}> 
      Dismiss 
     </button> 
     </p> 
    ); 
    } 

    render() { 
    return (
     <div className="app"> 
     {this.renderErrorMessage()} 
     </div> 
    ); 
    } 
}

屬性注入的陣營終極版：

import { connect } from 'react-redux'; 
import App from '../components/App/App'; 

const mapStateToProps = (state, ownProps) => ({ 
    errorMessage: state.errorMessage, 
}); 

export default connect(mapStateToProps, { 
    resetErrorMessage:() => ({ 
    type: 'RESET_ERROR_MESSAGE', 
    }) 
})(App);

正如你可以看到我也有resetErrorMessage掃清errorMessage：

const errorMessage = (state = null, action) => { 
    const { type, error } = action; 

    if (type === RESET_ERROR_MESSAGE) { 
    return null; 
    } else if (error) { 
    return error; 
    } 

    return state; 
};

我如何測試我的組件，如果我說點擊按鈕，然後按鈕隱藏或如果errorMessage不是null按鈕顯示？

我想是這樣的：

const props = { 
    errorMessage: 'Service Unavailable', 
    resetErrorMessage, 
}; 
it('renders error message',() => { 
    const wrapper = shallow(<App {...props} />); 
    expect(wrapper.find('#error-message').length).toBe(1); 
    wrapper.find('#dismiss').simulate('click'); 
    expect(wrapper.find('#error-message').length).toBe(0); 
    });

但現在我的問題是，如果我模擬點擊按鈕解僱 - 錯誤信息不會隱瞞。

來源

2017-10-18 rel1x

你說的是測試框架嗎？ – Akhil

您可以根據需要渲染具有屬性集的組件。 React的主要優點之一是它允許你這樣做 - 導出一個未連接的組件版本並正常測試。屬性值本身的邏輯在你的Redux測試中進行測試。 –

@DaveNewton你的意思是我不應該測試點擊按鈕？ – rel1x

正如我在上一個問題中發佈的那樣，如果你想測試按鈕點擊，你最好的辦法就是調用'未連接'組件。如果你想測試連接的組件，那麼你必須像這樣通過一個模擬庫。

const wrapper = shallow(<App {...props} store={store} />);

所以導入應用程序在您的測試，只是通過resetErrorMessage功能作爲嘲笑的功能，比如你用笑話做什麼。

const resetErrorMessage = jest.fn(() => {}); 
const wrapper = shallow(<App {...props} resetErrorMessage={resetErrorMessage} />); 

wrapper.find('#dismiss').simulate('click'); 
expect(resetErrorMessage).toHaveBeenCalled();

我的建議是，當你想直接從商店更改操作時，只測試連接的組件。

來源

2017-10-18 20:49:11

React Redux注入的測試屬性

回答

相關問題