React Component in Next.js with Styled Components, Jest, React Testing Library and Storybook [Template]

HelloWorld.js

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

const Wrapper = styled.div``;

const HelloWorld = () => {
  return <Wrapper>
    <h1>Hello World!</h1>
  <Wrapper />;
};

export default HelloWorld;

HelloWorld.propTypes = {};

HelloWorld.stories.js

import React from 'react';
import HelloWorld from './HelloWorld';

export default {
  title: 'HelloWorld',
  component: HelloWorld,
  args: {}
};

const Template = args => (
  <HelloWorld {...args} />
);

export const Primary = Template.bind({});

Primary.args = {};

HelloWorld.test.js

import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import { render, cleanup } from '@testing-library/react';
import { composeStories } from '@storybook/react';
import * as stories from './HelloWorld.stories';


describe('<HelloWorld/>', () => {
  afterEach(() => {
    cleanup();
  });

  const { Primary } = composeStories(stories);
  
  it('renders and displays Hello World!', () => {
    const { getByRole } = render(<Primary />);
                                 
    expect(
      getByRole('heading', {
        name: 'Hello World!',
      })
    ).toBeVisible();
  });
});