Question

我已经为 post.js 编写了测试用例来查找 3 p 标签，但它抛出了一个错误。如何正确测试此组件？

Post.js

import React from 'react';
import './Post.css';

const Post = (props) => {

    const displayPosts = (props) => {

    const { posts } = props;

    if ( posts.length > 0 ){

        return(

            posts.map( (post) => {

                return(

                    <div className = "Post">

                        <p className = "name"> <b>Name :</b> {post.name}</p>

                        <p className = "email"> <b> Email :</b> {post.email}</p>

                        <p className = "body"> <b> Body :</b> {post.body}</p>

                    </div>
                )
            })
        )
    }

    }
    return (
        <div className = "Posts">
            { displayPosts(props) } 
        </div>
    )
}

export default Post;

Post.test.js

import React from "react";
import Adapter from "enzyme-adapter-react-16";
import { shallow, configure } from "enzyme";
import Post from "./Post";

configure({ adapter: new Adapter() });

describe("Post", () => {
    it("includes three paragraphs", () => {
        const wrapper = shallow(<Post />);
        expect(wrapper.find("p")).toHaveLength(3);
      });
});

Answer 1

我是测试自己的新手。但是，从浅薄的角度快速浏览一下您的测试，而您的“p”标签实际上比您正在测试的位置更深地呈现/嵌套（在您的“displayPosts”组件中）。我敢打赌，如果您在测试代码中 console.log 包装器对象，您会看到记录了一个 div。

来自酶文档：“浅层渲染有助于限制您将组件作为一个单元进行测试，并确保您的测试不会间接断言子组件的行为。”

使用 Jest 和 Enzyme 对功能组件进行单元测试

1 个答案: