Question

我有这个React功能UI唯一组件，它有两个传入的道具，第二个是从其父组件传递的函数。 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;

我的测试规范是，它使用Jasmine

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组件。

Answer 1

首先，onClick不是on状态，而是on props，所以你必须通过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();
})

Answer 2

根据Abhishek的答案，我的解决方案是Jasmine

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

希望这有助于任何人。

酶/反应单位测试

2 个答案: