在嵌套的 React 组件中使用 Enzyme 查找元素

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:

Shallow rendering lets you render a component "one level deep" and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered.

此测试需要使用子组件，因此必须使用 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 组件中使用 Enzyme 查找元素

Find element with Enzyme in nested React component

testing

mocha.js

reactjs

enzyme