게이츠비 블로그에 대한 단원 테스트는 React 테스트 라이브러리를 사용하는 방법

단원 테스트를 작성하면 게이츠가 블로그보다 버그가 없고 유지보수하기 쉬운 코드를 만들 수 있습니다.이 글은 게츠비 블로그의 가장 기본적인 기능들을 소개하기 위해 Jest and React 테스트 라이브러리를 어떻게 사용하는지 소개했다.

단원 테스트를 왜 추가합니까?
부대 항목을 만들 때, 단원 테스트를 작성하는 것은 재미없고, 놓치기 쉽다.나는 보조 프로젝트로 단원 테스트를 자주 건너뛰었다는 것을 인정하지만, 나는 항상 나중에 후회한다.단원 테스트가 없으면 오류 복구나 새로운 기능을 추가하는 것이 더 무서워진다. 왜냐하면 이 과정에서 다른 것을 파괴할지 모르기 때문이다.
쓰기를 하면서 테스트하는 것도 코드의 질을 즉시 향상시킬 수 있습니다. 단원 테스트는 모든 함수나 구성 요소의 용도를 더욱 자세하게 고려하도록 하기 때문입니다.처음에는 어려울 수도 있지만, 네가 많이 할수록 일은 쉬워진다.
(테스트를 실행한 후 이 녹색 표시를 모두 보아도 만족스럽다!)

너는 게이츠비 블로그에서 무엇을 테스트해야 합니까?
구성 요소가 예상된 페이지에 나타나도록 테스트를 만들 수 있습니다.이것은 당신의 페이지가 완전히 파괴되지 않았는지 확인하는 데 도움이 됩니다.블로그에 추가된 어떤 논리도 테스트해 보는 것도 좋다.
이 문서에서 블로그에 추가한 단원 테스트를 예로 들면 다음과 같습니다.

내 게시물 날짜가 예상에 맞는지 테스트

내 SEO 구성 요소가 올바른 메타 태그를 출력했는지 테스트

내 홈페이지에 최근 세 개의 게시물에 대한 링크가 표시되는지 테스트

Jest 및 React 테스트 라이브러리 설치
게이츠비에 대해 말하자면, 단원 테스트를 시작하는 것은 일반적인 React 프로그램보다 훨씬 복잡하다.다행히도 게이츠비는 약간의 great documentation on unit testing 를 제공했기 때문에, 나는 위의 절차에 따라 Jest를 설치하는 것을 건의한다.
다음은 React 테스트 라이브러리를 설치하기 위해 testing React components의 게이츠비 설명을 따라야 합니다.

Jest와 React 테스트 라이브러리가 필요한 이유는 무엇입니까?
Jest는 테스트를 실행하는 프레임워크입니다.
Jest에서는 describe 및 test 설명 테스트 키트를 사용할 수 있으며 expect 단언을 사용할 수 있습니다.

describe('Test name', () => {
    test('should be true', () => {
        expect(true).toBe(true);
    });
});

React Testing Library의 역할은 React 응용 프로그램과 구성 요소를 보여 주고 그 중 일부를 선택하여 단언할 수 있도록 하는 것입니다.

describe('Test name', () => {
    test('should be true', () => {
        render(<Component />);
        const text = screen.findByText('hello');
        expect(text).toBeTruthy();
    });
});

내 날짜가 올바른지 테스트하기
2020년에 발표된 게시물에 대해 제 블로그는 게시물이 발표된 날짜와 달만 표시합니다(예를 들어 16 Sept.작년에 발표된 게시물에 대해서도 올해의 내용을 제공할 것이다(예를 들어16 Sept 2019.
다음은 내가 이 장면을 위해 작성한 단원 테스트의 예이다.

import React from 'react';
import { render, screen } from '@testing-library/react';

describe('PostSummary component', () => {
    test('should render year if post is from 2019', () => {
        const post = {
            name: 'Post title',
            date: '16 Sept 2019',
        };
        render(<PostSummary post={post} />);
        expect(screen.getByText('16 Sept 2019')).toBeTruthy();
    });
});

위 단원 테스트에서는 다음을 수행합니다.

RTLrender 기능을 사용합니다.이것은 우리의 React 구성 요소를 보여 주고 screen 대상을 통해 조회할 수 있도록 합니다.

우리가 원하는 텍스트가 거기에 있다는 것을 검색하기 위해 getByText를 사용합니다.

getByText 이외에 당신은 상황에 따라 많은 다른 조회를 사용할 수 있습니다.React 테스트 라이브러리는 which query you should use에 유용한 안내서를 제공합니다.

Pro-tip: If you’re running into issues with your unit tests, you can add a console.log(screen.debug()) to your tests. This lets you double-check that your test is rendering what you’re expecting it to be rendering.

2019년에 게시된 게시물을 테스트하는 장면 외에도 테스트written a unit test for if a post was written in the current year했습니다.

검색엔진 최적화 구성 요소 테스트
기본 입문 템플릿을 사용해서 게이츠비 블로그를 만들었다면, 웹 사이트의 메타태그를 만드는 SEO 구성 요소가 있을 가능성이 높다.페이지 제목과 트위터나 다른 소셜미디어 사이트에 댓글이 링크되면 어떤 데이터가 표시될지 포함된다.

If you’re interested in learning more about meta tags, check out my recent post on adding meta tags to your Gatsby blog

게이츠비의 질의를 비웃다
my SEO component 첫 번째 일은 게이츠비react-helmet를 사용하여 나의 사이트 데이터를 얻는 것이다.

// src/components/seo/index.js
const { site } = useStaticQuery(
    graphql`
        query {
            site {
                siteMetadata {
                    title
                    description
                    author
                    siteUrl
                }
            }
        }
    `,
);

우리의 단원 테스트에서 이 데이터에 접근할 수 없기 때문에 우리는 시뮬레이션useStaticQuery이 되돌아오는 데이터를 필요로 한다.Jest'smockReturnValue를 통해 다음과 같은 이점을 얻을 수 있습니다.

// src/components/seo/test.js
describe('SEO component', () => {
    beforeAll(() => {
        useStaticQuery.mockReturnValue({ site: {
                siteMetadata: {
                    title: `Emma Goto`,
                    description: `Front-end development and side projects.`,
                    author: `Emma Goto`,
                    siteUrl: `https://www.emgoto.com`,
                },
            },
        });
    });

    test(...)
});

우리는 그것을 useStaticQuery 갈고리에 넣을 것이다. 이것은 모든 테스트가 실행되기 전에 그것을 시뮬레이션할 것을 의미한다.

If you only ever use useStaticQuery to get your site's data, you could move this code to live inside of __mocks__/gatsby.js so you only need to mock it once across all of your test files.

투구의peek()로 당신의 원 라벨 테스트
원 표시가 있으면, 이전의 단원 테스트처럼 beforeAll 대상에서 그것을 조회할 수 없습니다.반대로 우리는 screen라는 함수를 사용해야 한다.

// src/pages/index.test.js
import { render } from '@testing-library/react';
import Helmet from 'react-helmet';

test('should render correct meta data for home page', () => {
    render(<SEO title={postTitle} />);
    const helmet = Helmet.peek();

이것은 헬멧 구성 요소가 만든 모든 원 표시를 포함하는 대상을 제공합니다.이제 특정 값이 있다고 단언하는 테스트를 작성할 수 있습니다.

expect(helmet.title).toBe(siteTitle);

expect(helmet.metaTags).toEqual(
    expect.arrayContaining([
        {
            property: 'og:title',
            content: siteTitle,
        },
    ]),
);

너는 Github에서 나의 SEO 구성 요소의 전체 테스트를 볼 수 있다.

나의 홈페이지에 최근의 세 편의 문장이 나타나는지 테스트하다
나의 홈페이지는 나의 최근 블로그 글 세 편을 보여 주었다.GraphQLpage query을 사용하여 이러한 데이터를 얻습니다. 이 데이터는 도구로 제 구성 요소에 전달됩니다.

// src/pages/index.js
const IndexPage = ({ data }) => (
    <>
        // renders the posts using the given data
    </>
);

export const pageQuery = graphql`
    query {
        allMdx {
            nodes {
                frontmatter {
                    title
                    date(formatString: "DD MMMM YYYY")
                }
            }
        }
    }
`;

export default IndexPage;

데이터를 비웃다
셀 테스트에서 페이지 질의를 실행할 수 없으므로 어셈블리로 전달할 아날로그 데이터 객체를 만들어야 합니다.

const data = {
    nodes: [
        {
            frontmatter: {
                title: "Post #1", date: "01 Jan 2020"
            },
        },
    ],
};

test('should render three most recent posts', async () => {
    render(<IndexPage data={data} />

만약 당신이 특정한 장면을 테스트하고 싶다면, 예를 들어 두 문장이 같은 날에 발표되면 무슨 일이 일어날지, 이런 방법은 매우 유용하다.
그러나, 만약 장래의 어느 때에 페이지 조회를 중단한다면, 단원 테스트는 여전히 통과될 것입니다.

게이츠비 플러그인으로 테스트한 실제 데이터
GraphQL 페이지 쿼리의 최신 데이터를 사용하려면gatsby-plugin-testing:

import { getPageQueryData } from 'gatsby-plugin-testing';

test('should render three most recent posts', async () => {
    const data = await getPageQueryData('index');
    render(<IndexPage data={data} />);

이 플러그인은 GraphQL 조회에서 되돌아오는 데이터와 같은 실제 데이터를 제공합니다.즉, GraphQL 쿼리를 어떤 방식으로든 수정하면 셀 테스트에서도 이 쿼리의 새 데이터를 사용합니다.
이런 방법의 대가는 진실한 데이터이기 때문에 특정한 게시물 제목이 홈페이지에 나타난다고 단언할 수 없다는 것이다. (최근 게시물을 보여주고 있다면.)만약 네가 이렇게 한다면, 네가 더 많은 블로그 댓글을 추가할 때, 단원 테스트가 중단될 것이다.

내 블로그 게시물 링크 찾기
최근의 모든 게시물은 링크이기 때문에 peek() 조회를 통해 게시물을 찾을 수 있습니다.

const links = screen.getAllByRole('link');

이것은 페이지의 모든 링크의 목록을 되돌려줍니다.그러나 내 경우, 내 홈페이지에는 다른 링크가 많기 때문에, 이것은 매우 유용하지 않다.
반대로 나는 나의 모든 블로그 링크에 getAllByRole 도구를 추가하기로 결정했다.

// src/components/summaries/index.js

const PostSummary = () => <div data-testid="summary">...</div>

It’s recommended that you use data-testid instead of relying on a CSS class name or some other implementation detail, as we don’t want our unit tests to break if we edit the CSS, for example.

현재 나의 단원 테스트에서 나는 주어진 테스트 ID와 일치하는 모든 요소를 찾을 수 있으며 그 중 세 가지 요소가 있다고 단언할 수 있다.

const posts = screen.getAllByTestId('summary');
expect(posts.length).toEqual(3);

이 테스트는 상당히 간단하다. 나는 그것이 발생할 수 있는 모든 가장자리 상황이나 버그를 처리하지 않을 것이라고 인정한다.
그러나 저는 작은 타자 오류나 수정으로 제 사이트의 일부 페이지를 파괴합니다. 그래서 이런 간단한 테스트라도 당신에게 심각한 손상이 있는지 알 수 있습니다. 그래서 저는 여전히 그것이 많은 쓸모가 있고 쓸 만하다고 생각합니다!

결론
나는 나의 보조 프로젝트를 자주 건너뛰는 단원 테스트에 대해 죄책감을 느꼈지만, 나의 게이츠비 블로그에 단원 테스트를 쓰는 것을 통해 나는 좀 더 깨끗한 코드 라이브러리를 얻었다고 생각한다. 나는 앞으로 그것을 계속 변경할 자신이 더 많다.
나는 이 글이 너의 단원에서 너의 게이츠비 블로그나 다음 프로젝트를 테스트하는 데 도움을 줄 수 있기를 바란다.
읽어주셔서 감사합니다!