react hooks用于原子设计模式的单元测试

Question

我想为hooks atom创建单元测试，我需要帮助

这是我的代码'

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

，我希望为这个钩子创建单元测试

Answer 1

如果你使用reactTestLibrary, Jest和UserEvent，你可以做一些简单的事情

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();
   })
})

如果您想通过检查按钮上的类来检查使用的变体是否正确，则可以添加更多…