Grundlegendes Verspottungsformat für React-Komponenten

Im Vorgriff auf den Beginn des Kurses  "Testautomatisierung in JavaScript" veröffentlichen wir weiterhin die Übersetzung einer Reihe nützlicher Artikel

Im ersten Teil dieser Serie haben wir uns angesehen, warum Mocks tatsächlich nützlich sind.

In diesem Teil werde ich das Grundformat von React-Komponentenmohnblumen behandeln.

Alle Codebeispiele für diesen Artikel sind in diesem Repository verfügbar.

Dirv / Mocking-React-Komponenten

Beispiele für das Verspotten von React-Komponenten.

Schauen wir uns noch einmal die Komponenten an, mit denen wir arbeiten: BlogPageund PostContent.

Hier ist BlogPage:

const getPostIdFromUrl = url =>
  url.substr(url.lastIndexOf("/") + 1)

export const BlogPage = ({ url }) => {

  const id = getPostIdFromUrl(url)

  return (
    <PostContent id={id} />
  )
}

BlogPagemacht nicht viel anderes als anzeigen PostContent. Aber es hat einige Funktionen, die uns interessieren, nämlich das Parsen von Requisiten url, um eine idNachricht zu erhalten.

PostContentetwas komplizierter: Es ruft eine im Browser integrierte Funktion fetchauf, um den Text eines Blogposts von einer URL abzurufen /post?id=${id}, wobei id die an ihn übergebene Requisite ist.

export const PostContent = ({ id }) => {
  const [ text, setText ] = useState("")

  useEffect(() => {
    fetchPostContent(id)
  }, [id])

  const fetchPostContent = async () => {
    const result = await fetch(/post?id=${id})
    if (result.ok) {
      setText(await result.text())
    }
  }

  return <p>{text}</p>
}

In der Tat ist es PostContentnicht wichtig , was es tut , weil wir es nicht wieder sehen werden!

BlogPage BlogPage.test.js. PostContent, .

, PostContent, BlogPage.test.js , PostContent.

PostContent:

import { PostContent } from "../src/PostContent"

jest.mock("../src/PostContent", () => ({
  PostContent: jest.fn(() => (
    <div data-testid="PostContent" />
  ))
}))

.

• jest.mock. . , import . Jest . , ../src/PostContent .

• , , , .

• jest.fn (spy): , , . toHaveBeenCalled toHaveBeenCalledWith.

• jest.fn -, ( ).

• , . React div - HTML , , !

• data-testid, , DOM.

• React Testing Library data-testid , , , , , . , .

• data-testid . PostContent. , .

React . 90% ( ) . 10% , .

, , BlogPage.

, DOM

describe("BlogPage", () => {
  it("renders a PostContent", () => {
    render(<BlogPage url="http://example.com/blog/my-web-page" />)
    expect(screen.queryByTestId("PostContent"))
      .toBeInTheDocument()
  })
})

, . screen.queryByTestId DOM data-testid PostContent.

, , PostContent .

queryByTestId

, queryByTestId. React Testing Library : -, , getBy queryBy, -, , ID .

, - , queryByTestId. , TestId . : , . , .

: <div data-testid="ComponentName" /> - , .

getBy* queryBy*

getBy , . , , (expect).

, :

expect(screen.getByTestId("PostContent"))
  .toBeInTheDocument()

<PostContent />, getByTestId. !

, , .

, TDD ( ), . queryBy.

,

, , , PostContent.

it("constructs a PostContent with an id prop created from the url", () => {
  const postId = "my-amazing-post"
  render(<BlogPage url={http://example.com/blog/${postId}} />)
  expect(PostContent).toHaveBeenCalledWith(
    { id: postId },
    expect.anything())
})

Jest, toHaveBeenCalledWith, , PostContent , .

React , ref . .

JSX <PostContent id="my-amazing-post" /> PostContent ({id: "my-amazing-post"}).

, , .

expect.anything toHaveBeenCalledWith

, React , - (ref). , expect.anything(), , .

expect.anything(), Jest, .

, toHaveBeenCalled

, . toHaveBeenCalled toHaveBeenCalledWith.

. , :

• jest.fn , , , <div />.

• data-testid, DOM.

• . , PostContent <div data-testid = "PostContent" />.

• : , DOM, , .

?

, . ?

DOM, , :

export const BlogPost = () => {
  PostContent({ id: "my-awesome-post" })
  return null
}

- . : , , JSX . , , .

, , ?

:

export const BlogPost = () => (
  <PostContent />
)

, .

, .

: .

: , . , .

. , .

- : " puppeteer".

:

• ! React Testing Library