Button test with react-testing-library and jest

button-test.tsx

import { render, screen } from '@testing-library/react'
import { renderWithTheme } from 'utils/tests/helpers'

import ButtonTest from '.'

describe('<ButtonTest />', () => {
  it('should render the button', () => {
    render(<ButtonTest>Dev.to</ButtonTest>)

    expect(screen.getByRole('button', { name: /Dev.to/i })).toHaveStyle({
      background: '#000',
      color: '#fff',
      opacity: 1
    })
  })

  it('should render the disabeld button', () => {
    render(<ButtonTest disabled>Dev.to</ButtonTest>)

    expect(screen.getByRole('button', { name: /Dev.to/i })).toHaveStyle({
      cursor: 'not-allowed',
      filter: 'saturate(40%)'
    })
  })
})

Button.tsx

import * as S from './styles'

export type ButtonProps = {
  children: React.ReactNode
  disabled?: boolean
}

const ButtonTest = ({ children, disabled = false }: ButtonTestProps) => (
  <S.Wrapper disabled={disabled}>{children}</S.Wrapper>
)

export default Button

styles.ts

import styled from 'styled-components'

export const Wrapper = styled.button`
  background-color: #000;
  color: #fff;
  font-size: 1.1rem;
  padding: 2rem;
  border: none;
  border-radius: 1rem;
  opacity: 1;

  &:disabled {
    cursor: not-allowed;
    filter: saturate(40%);
  }
`