natterstefan / nextjs-template

A practical starter template for Nextjs, which has Tailwind, Cypress, Docker, Storybook, Jest, ESLint, Prettier, and more built-in. 🚀
https://nextjs-template-app.vercel.app
MIT License
32 stars 4 forks source link

feat: add support for react-testing-library and remove enzyme #63

Open natterstefan opened 2 years ago

natterstefan commented 2 years ago

Feature Request

Remove enzyme and use react-testing-library instead.

Tasks

Example

yarn add @testing-library/react @testing-library/react-hooks @testing-library/jest-dom -D 
// Example.tsx
import React from 'react'

export const Example = () => {
  return <div data-testid="example">Example</div>
}
// Example.test.tsx
import React from 'react'
import { render, screen } from '@testing-library/react'

import { Example } from '..'

describe('Example', () => {
  it('should render', () => {
    render(<Example />)

    expect(screen.getByTestId('example')).toBeInTheDocument()
  })
})
// jest.setup.ts
// @see https://www.carlrippon.com/using-jest-and-rtl-with-react-typescript/
import '@testing-library/jest-dom'

Motivation

These days I prefer using RTL instead of Enzyme because its implementation and syntax feels more natural and "react"-like than enzymes.