Home > Mobile >  react hooks unit test for Atomic Design Pattern
react hooks unit test for Atomic Design Pattern

Time:11-09

i want to create the unit test for hooks atom and i need help

this is my code `

import * as React from 'react';
import { Button } from 'react-bootstrap'

const  AtomButton =(props) =>{
    return (
        <div id= 'login-btn'>
            <Button
                variant={props.type}
                onClick={props.onClick}
            >
                {props.text}
            </Button>
        </div>
    );
}
export default AtomButton

`

and i hope create unit test for this hooks

CodePudding user response:

If you use reactTestLibrary, Jest and UserEvent you can do something simple

describe('test AtomButton' , () => {
   it('call props function when button is clicked', async () => {
      const mockOnClick = jest.fn();

      render(<AtomButton {{onClick: mockOnClick, text:'blabla'}}>)
      const button = await screen.findByText('blabla');
      userEvent.click(button);
      expect(mockOnClick).toHaveBeenCalled();
   })
})

You can add more if you want to check that the variant used is the correct one by checking the class on the button...

  • Related