我怎样才能使这个测试通过？方法“dive”仅意味着在单个节点上 运行。 0 找到代替

Question

我最近开始使用 jest 和 enzyme。 我正在编写简单的代码来学习笑话和酶。

有一门考试我过不了。这个问题困扰我很久了。

我不明白为什么下面的第一个断言是正确的，而下面的第二个断言不是。

expect(component.find(CommentBox).dive().find('.comment-box').exists()).toBe(true);

expect(component.find(CommentList).dive().find('.comment-list').exists()).toBe(true);

这些组件是兄弟组件。

<div>
    <div>Hello World!</div>
    <CommentBox />
    <CommentList />
</div>

谁能帮我理解我做错了什么？

这里是所有相关的代码和日志。

测试结果日志

FAIL  src/__tests__/components/App.test.js

● App › shows a comment list
Method “dive” is only meant to be run on a single node. 0 found instead.

at ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1516:17)
at Object.<anonymous> (src/__tests__/components/App.test.js:38:57)
    at Promise (<anonymous>)
    at <anonymous>

App.test.js

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

import App from '../../components/App';
jest.unmock('../../components/App');

import CommentBox from '../../components/CommentBox';
import ConnectedCommentList, { CommentList } from '../../components/CommentList';


describe('App', () => {

    let component;

    beforeEach(() => {
        component = shallow(<App />);
    });

    //This test passes!
    it('shows a comment box', () => {

        expect(component.find(CommentBox).dive().find('.comment-box').exists()).toBe(true);

    });

    //This test fails!!
    it('shows a comment list', () => {

        expect(component.find(CommentList).dive().find('.comment-list').exists()).toBe(true);

    })

});

App.js

import React, { Component } from 'react';

import CommentBox from './CommentBox';
import CommentList from './CommentList';

class App extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <div>Hello World!</div>
                <CommentBox />
                <CommentList />
            </div>
        )
    }
}

export default App;

CommentList.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

const propTypes = {};
const defaultProps = {};

export const CommentList = (props) => {

    const list = props.comments.map((comment) => {

        return <li key={comment}>{comment}</li>
    });

    return (
        <ul className="comment-list">
            {list}
        </ul>
    )

};

function mapStateToProps(state) {
    return {
        comments: state.comments
    }
}

CommentList.propTypes = propTypes;
CommentList.defaultProps = defaultProps;

export default connect(mapStateToProps)(CommentList);

附加信息

我使用的是浅层方法而不是挂载方法，因为如果我使用挂载方法，则会收到此错误 Invariant Violation: Could not find "store" in either the context or props of "Connect(CommentList)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(CommentList)". 。

评论框的 JSX

        <form onSubmit={this.handleSubmit} className="comment-box">
            <textarea
                value={this.state.comment}
                onChange={this.handleChange}
            />
            <button action="submit">Submit</button>
        </form>

评论列表的 JSX

    <ul className="comment-list">
        {list}
    </ul>

更新！

it('shows a comment list', () => {
    console.log(component.debug());
})

我使用调试方法查看正在渲染的是什么酶。 这是结果。

<div>
  <div>
    Hello World!
  </div>
  <CommentBox />
  <Connect(CommentList) />
</div>

问题似乎是因为它呈现 <Connect(CommentList)> 而不是 <CommentList>。

import ConnectedCommentList, { CommentList } from '../../components/CommentList';

但是，在 App.test.js 中，我导入了 ConnectedCommentList 和常规 CommentList，为了测试，我使用了 CommentList。

我怎样才能通过这个测试！？

Answer 1

问题是 CommentList 是一个高阶组件，所以当 enzyme 用 shallow 渲染它时，它不会渲染真正的 CommentList 而是渲染包裹的 shallow 不呈现组件的子组件，find 将无法通过字符串或构造函数获取此元素。解决此问题的最简单方法是使用 enzyme.mount，因为这将强制组件也渲染其子项。

或者您使用 ConnectedCommentList 查找元素：

it('shows a comment list', () = > {
  expect(component.find(ConnectedCommentList).dive().find('.comment-list').exists()).toBe(true);
})