Как использовать Jest для проверки постлистов? - PullRequest
Новая
       58

Как использовать Jest для проверки постлистов?

0 голосов
/ 09 марта 2020

Я использую Далее js с Typescript . Я настроил свою тестовую среду, используя Jest с энзимом. Я новичок в этом, и я не понимаю, как проверить рендеринг моих сообщений, используя то же самое? Я проверил примеры в документации Jest, но для такого кода было не очень понятно: 

import React from 'react';
import Container from 'react-bootstrap/Container'
import styled from "@emotion/styled";
import axios from 'axios';
import Link from 'next/link';

function dateToString(date: Date): string {
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
        + ` ${date.getHours()}-${date.getMinutes()}-${date.getSeconds()}`;
}

export default class PostList extends React.Component  {
        state = {
            title: '',
            name: '',
            date: '',
            body: '',
            posts: []
        };

        componentDidMount = () => {
            this.getBlogPost();
        };

        getBlogPost = () => {

            axios
                .get('/api')
                .then(({data}) => {
                    const reverseData = new Array;
                    for (let datetime = data.length - 1; datetime >= 0; datetime--) {
                        reverseData.push(data[datetime]);
                    }
                    this.setState({posts: reverseData})
                })
                .catch((error) => {
                    alert('Error: there was an error processing your request')
                })
        }

        displayBlogPost = (posts : Array < any >) => {
            const currentDateTime = new Date();
            if (!posts.length) 
                return null;

            return posts.map((post, index) => (
                <div key={index}>
                    <Card>
                    <Title> <Link href={`/post?_id=${post._id}` } ><a>{post.title}</a></Link></Title>
                    {/* <p>{post.date}</p>
                    <p>{post.name}</p> */}
                    <FullName>{`${post.name} | ${dateToString(currentDateTime)}`}</FullName>
                    <Line />
                    <Question >{post.body}</Question>
                    </Card>
                </div>
            ));
        }
        render() {
            return (
                <div>
                    <Container>
                    <Headers/>
                    <div className="blog">
                        {this.displayBlogPost(this.state.posts)}
                    </div>                   
                    </Container>
                </div>
           );
        }
}

Может кто-нибудь помочь с тем, как написать тест для этой конкретной страницы?

...