counter.spec.js

import {
    render,
    fireEvent,
    cleanup
} from 'vue-testing-library';
import Counter, { INITIAL_COUNTER } from '@/components/Counter.vue'

describe('Component: Counter.vue', () => {
    describe('Behavior', () => {
        afterEach(() => {
           cleanup();
        });
        test('User should see 0 at the beginning', () => {
            const { getByText } = render(Counter);
            const textNumberWrapper = getByText(/Counter is:/);
            expect(textNumberWrapper).toHaveTextContent('Counter is: 0');
        });
        test('When User clicks on Increase, Counter should be increased by 1 unit', async () => {
            const { getByText } = render(Counter);
            const textNumberWrapper = getByText(/Counter is:/);
            expect(textNumberWrapper).toHaveTextContent(`Counter is: ${INITIAL_COUNTER}`);
            await fireEvent.click(getByText('Increase'));
            expect(textNumberWrapper).toHaveTextContent(`Counter is: ${INITIAL_COUNTER + 1}`);
        });
        test('When User clicks on Decrease, Counter should be decreased by 1 unit', async () => {
            const { getByText } = render(Counter);
            const textNumberWrapper = getByText(/Counter is:/);
            expect(textNumberWrapper).toHaveTextContent(`Counter is: ${INITIAL_COUNTER}`);
            await fireEvent.click(getByText('Decrease'));
            expect(textNumberWrapper).toHaveTextContent(`Counter is: ${INITIAL_COUNTER - 1}`);
        });
    });
});