酶/反应单元测试

我有这个React功能性的用户界面只有组件，其中有两个道具传入，第二个是从其父组件传递的函数。 onClick调用“委托”到父容器组件中的一个函数，然后这个父方法负责调度到一个redux存储。酶/反应单元测试

import React, {Component} from 'react'; 
import PropTypes from 'prop-types'; 

const BotShowUI = ({ bot, onClick }) => { 
    return(
     <div id={bot.id} onClick={onClick}> 
      {bot.id} : {bot.text} 
     </div> 
    ) 
} 

BotShowUI.propTypes = { 
    bot: PropTypes.object.isRequired, 
    onClick: PropTypes.func.isRequired 
}; 

export default BotShowUI;

我的测试规范是，它使用茉莉

import React, {Component} from 'react'; 
import { mount } from 'enzyme'; 

import BotShowUI from '../botShowUI'; 

function onClickFunction(){}; 

describe('botShowUI',() => { 

    const bot = {id: 1, isDone: false, text: 'bot 123'}; 
    const expectedDivText = '1 : bot 123'; 

    const wrapper = mount(<BotShowUI bot={bot} onClick={onClickFunction} />); 

    it(' div has been rendered ',() => { 
     expect(wrapper.find('div').first()).not.toBe(null); 
    }); 

    it(' div displays the correct bot text ',() => { 
     expect(wrapper.find('div').first().text()).toEqual(expectedDivText) 
    }); 

    it(' div click event fired ',() => { 
     wrapper.simulate('click'); 
     expect(wrapper.state('onClick')).toBe(true); 
    }); 
});

这最后断言失败与

Chrome 57.0.2987 (Windows 10 0.0.0) botShowUI div click event fired FAILED 
     TypeError: Cannot read property 'onClick' of null 
      at ReactWrapper.state (webpack:///~/enzyme/build/ReactWrapper.js:825:24 <- tests.webpack.js:26303:25) 
      at Object.<anonymous> (webpack:///app/react/components/bots/_tests/botShowUI.spec.js:25:23 <- tests.webpack.js:25415:25)

wrapper.simulate('click');作品，但下一行失败什么是断言的正确方法点击被解雇了？我是否必须放入包装的道具/儿童而不是使用状态？

我不想以任何方式测试父容器，两者是孤立的。此测试仅关注此UI组件。

来源

2017-04-26 Rory

首先，onClick不是在状态，而是在道具上，因此您必须通过执行wrapper.props('onClick')来访问它。

其次，要测试onClick是否已被处理，是使用间谍，而不是空函数。如果你不想使用间谍，你仍然可以这样做，但不是你所做的。如果你有兴趣，我也可以发布一些伪代码。但回到使用间谍，你可以使用间谍作为onClick道具。以下是该代码。我手写它，所以请检查是否有任何语法错误，但是你应该知道需要做什么。

it('should call the onClick handler on click',() => { 
    const onClickFunction = sinon.spy() 
    wrapper = mount(<BotShowUI bot={bot} onClick={onClickFunction} />) 
    wrapper.simulate('click'); 
    expect(onClickFunction).toHaveBeenCalled(); 
})

来源

2017-04-27 10:56:22

再一次非常感谢。我已经提出了你的答案。我已经发布了Jasmine的解决方案 – Rory

基于阿布舍克的答案，这里是我的茉莉花

it(' div click event fired ',() => { 

    let onClickFunction_spy = jasmine.createSpy('onClickFunction'); 
    const wrapper = mount(<BotShowUI bot={bot} onClick={onClickFunction_spy} />); 
    wrapper.simulate('click'); 
    expect(onClickFunction_spy).toHaveBeenCalled(); 
});

希望解决这有助于任何人。

来源

2017-04-27 18:59:06 Rory

酶/反应单元测试

回答

相关问题