تنسيق محاكاة مكونات التفاعل الأساسي

استعدادًا لبدء الدورة التدريبية  "Test Automation in JavaScript" ، نواصل نشر ترجمة سلسلة من المقالات المفيدة

في الجزء الأول من هذه السلسلة ، نظرنا في سبب فائدة السخرية حقًا.

في هذا الجزء سأغطي التنسيق الأساسي لخشخاش مكون React.

تتوفر جميع نماذج التعليمات البرمجية لهذه المقالة في هذا المستودع.

dirv / مكونات تفاعل الاستهزاء

أمثلة على الاستهزاء بمكونات React.

دعنا نلقي نظرة أخرى على المكونات التي نعمل معها: BlogPageو PostContent.

هنا BlogPage:

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

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

  const id = getPostIdFromUrl(url)

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

BlogPageلا تفعل الكثير بخلاف العرض PostContent. لكن لديها بعض الوظائف التي تهمنا ، أي تحليل الدعائم urlللحصول على idرسالة.

PostContentأكثر تعقيدًا: فهو يستدعي وظيفة مدمجة في المتصفح fetchللحصول على نص منشور مدونة من عنوان URL /post?id=${id}، حيث يكون id هو العنصر الذي يتم تمريره إليه.

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

في الحقيقة ، ما يفعله PostContentليس مهمًا ، لأننا لن نراه مرة أخرى!

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