Format Dasar Mengejek Komponen React

Untuk mengantisipasi dimulainya kursus  "Tes Otomasi dalam JavaScript", kami terus menerbitkan terjemahan dari serangkaian artikel bermanfaat

Di bagian pertama seri ini, kami melihat mengapa tiruan sebenarnya berguna.

Pada bagian ini, saya akan membahas format dasar bunga poppy komponen React.

Semua contoh kode untuk artikel ini tersedia di repositori ini.

dirv / mocking-react-components

Contoh komponen React yang mengejek.

Mari kita lihat lagi komponen yang sedang kita kerjakan: BlogPagedan PostContent.

Ini dia BlogPage:

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

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

  const id = getPostIdFromUrl(url)

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

BlogPagetidak melakukan banyak hal selain tampilan PostContent. Tapi itu memang memiliki beberapa fungsi yang menarik minat kami, yaitu parsing props urluntuk mendapatkan idpesan.

PostContentsedikit lebih kompleks: ini memanggil fungsi bawaan browser fetchuntuk mendapatkan teks posting blog dari URL /post?id=${id}, di mana id adalah prop yang diteruskan kepadanya.

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>
}

Padahal, apa yang dilakukannya PostContenttidak penting, karena kita tidak akan melihatnya lagi!

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