Button.test.jsx

import { render, screen } from '@testing-library/react';
import React from 'react';

import Button from '.';

const testMessage = 'Test Message';
let container;

describe('basic functionality', () => {
    beforeEach(() => {
        // eslint-disable-next-line jsx-a11y/anchor-is-valid
        container = render(<Button>{testMessage}</Button>).container;
    });

    test('renders the component', () => {
        expect(screen.getByText(testMessage)).toBeInTheDocument();
    });

    test('has the correct class', () => {
        expect(container.querySelector('.twf-button')).toBeInTheDocument();
    });
});

describe('advanced functionality', () => {
    beforeEach(() => {
        // eslint-disable-next-line jsx-a11y/anchor-is-valid
        container = render(<Button appearance="outline">{testMessage}</Button>).container;
    });

    test('has the correct class', () => {
        expect(container.querySelector('.twf-button.twf-button__outline')).toBeInTheDocument();
    });
});