Testing multiple instances of the same mock component

Hi, Habr. Recruitment of students for the course "Test Automation in JavaScript" has started . In this regard, we invite everyone to visit a free demo lesson on the topic: "What a tester needs to know about JS . "



Now we are sharing with you the continuation of a series of useful translations.

---

Mocking React Components with Testing Library (5 part series) :

1. Mocky doesn't bite! Mastering Mocking with the React Testing Library

   
   
   
   
   

2. Basic mocking format for React components

   
   
   
   
   

3. Checking children passed to a mock React component

   
   
   
   
   

4. Testing multiple instances of the same mock component

   
   
   
   
   

5. Stay out of trouble

   
   
   
   
   

React . . . : .

.

dirv / -react-

React .

TopFivePostsPage



, , , .

import { PostContent } from "./PostContent"

export const TopFivePostsPage = () => (
  <ol>
    <PostContent id="top1" />
    <PostContent id="top2" />
    <PostContent id="top3" />
    <PostContent id="top4" />
    <PostContent id="top5" />
  </ol>
);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

queryAllByTestId



toHaveLength



.

describe("BlogPage", () => {
  it("renders five PostContent components", () => {
    render(<TopFivePostsPage />)
    expect(screen.queryAllByTestId("PostContent"))
      .toHaveLength(5)
  })
})
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , .

it("constructs a PostContent for each top 5 entry", () => {
  render(<TopFivePostsPage />)
  expect(PostContent).toHaveBeenCalledWith(
    { id: "top1" }, expect.anything())
  expect(PostContent).toHaveBeenCalledWith(
    { id: "top2" }, expect.anything())
  expect(PostContent).toHaveBeenCalledWith(
    { id: "top3" }, expect.anything())
  expect(PostContent).toHaveBeenCalledWith(
    { id: "top4" }, expect.anything())
  expect(PostContent).toHaveBeenCalledWith(
    { id: "top5" }, expect.anything())
})
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

- . . ToHaveBeenCalledWith



.

.mock.calls



.

it("renders PostContent items in the right order", () => {
  render(<TopFivePostsPage />)
  const postContentIds = PostContent.mock.calls.map(
    args => args[0].id)

  expect(postContentIds).toEqual([
    "top1", "top2", "top3", "top4", "top5"
  ])
})
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

TopFivePostsPage



, , PostContent



! - , .

, clearMocks



Jest. package.json



.

"jest": {
  "transform": {
    "^.+\\.jsx?$": "babel-jest"
  },
  "setupFilesAfterEnv": ["./jest.setup.js"],
  "clearMocks": true
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , , .

:

, . , , . , .

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. , , . , .

, , , — , . , , . .

?

• queryAllByTestId
  
  
  
  .

  
  
  
  
  

• .mock.calls
  
  
  
  .

  
  
  
  
  

• Jest's clearMocks
  
  
  
  , , .

  
  
  
  
  

• , , data-testid
  
  
  
  .

  
  
  
  
  

• , !

  
  
  
  
  

. , , .

React . , , .

.

dirv / -react-

, React .

— . .

, .

, ? : !

, , .

, a div



  data-testid



. .

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . .

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , data-testids



. . .

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, : . -, , , , , Jest mockImplementation



.

? , , , .

. , .

, , : , . , .

, ?

, , : ?

, , .

, React, , . , , .

.

? : , 100 . 10 !

, , ? : .

, «» , . «» — .

, , , React, , React.

?

React . , " , React ". React Testing Library, . , React .

---

« JavaScript».



« JS ».