我怎样才能使这个测试通过？方法“dive”仅用于在单个节点上运行。找到了 0 个

Question

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

有一项测试我无法通过。这个问题困扰很久了。

我不明白为什么下面的第一个断言可以，而下面的第二个断言不行。

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;

评论列表.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);

附加信息

我使用的是 shallow 方法而不是 mount 方法，因为如果我使用 mount 方法，那么我会收到此错误 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 是一个高阶组件，所以当酶用浅层渲染它时，它不会渲染真正的CommentList，而是渲染一个包裹的shallow，因为shallow 不会渲染组件的子组件, find 将无法通过字符串或构造函数获取此元素。解决此问题的最简单方法是使用 enzyme.mount，因为这将强制组件也呈现其子级。

或者你使用ConnectedCommentList来查找元素：

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