Question

我正在尝试为我的组件TestComponent编写一个，以确保在用户单击按钮时触发回调。但是，找不到该按钮（虽然我可以通过调用console.log(wrapper.html())在HTML中看到它。

该按钮位于TestComponent内使用的另一个组件内，如果这很重要。

这是我的测试：

import React from 'react';
import expect from 'expect';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import TestComponent from './test-component.jsx';

describe('<TestComponent/>', () => {
  it('clicking "continue" button fires the callback', () => {
    const onClickContinue = sinon.spy();
    const wrapper = shallow(<TestComponent />);
    console.log(wrapper.find('.btn-primary').length); // 0
    console.log(wrapper.html());                      // does have `.btn-primary`

    // wrapper.find('.btn-primary').simulate('click');
    // expect(onClickContinue.calledOnce).toBe(true);
  });
});

我做错了什么？谢谢。

Answer 1

想出来。来自https://facebook.github.io/react/docs/test-utils.html：

浅层渲染允许您渲染“一级深度”的组件并断言其渲染方法返回的内容，而不必担心未实例化或渲染的子组件的行为。

此测试需要使用子组件，因此必须使用mount而不是shallow。这是工作代码：

import React from 'react';
import expect from 'expect';
import { mount } from 'enzyme';
import sinon from 'sinon';
import TestComponent from './test-component.jsx';

describe('<TestComponent/>', () => {
  it('clicking "continue" button fires the callback', () => {
    const wrapper = mount(<TestComponent />);
    const handleClickContinue = sinon.spy(wrapper.instance(), 'handleClickContinue');
    wrapper.find('.btn-primary').first().simulate('click');
    expect(handleClickContinue.calledOnce).toBe(true);
  });
});

另请注意，我已从onClickContinue更改为handleClickContinue，因为此方法必须存在于组件中（而不是prop中调用的方法）。

在嵌套的React组件

1 个答案: