Jest.js 原子设计模式的react hooks单元测试

tf7tbtn2 于 2022-12-08 发布在 Jest

关注(0)|答案(1)|浏览(137)

我想为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

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

jestjs

来源：https://stackoverflow.com/questions/74352913/react-hooks-unit-test-for-atomic-design-pattern

1条答案

按热度按时间

nimxete21#

如果使用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();
   })
})

如果要检查所使用的变量是否正确，可以添加更多变量，方法是检查按钮上的类...

赞(0）回复(0）举报 2022-12-08

我来回答

Jest.js 原子设计模式的react hooks单元测试

1条答案

相关问题

热门标签

最新问答