React: Tests unitários com Bun:test

Introdução

---

Para começar, vamos listar todas as ferramentas que vamos utilizar neste post:

• • NextJS: Framework para desenvolvimento de aplicações React.
• • Bun: JavaScript runtime.
• • React Testing Library: Biblioteca para testar componentes React.

Resumindo, criaremos um projeto NextJS que vai rodar com o Bun e vai utilizar o Bun:test para testar nossos componentes utilizando a biblioteca React Testing Library.

Criando o projeto e instalando as dependências

---

primeiro vamos criar nosso projeto NextJS:

npx create-next-app@latest ex --use-bun

use-bun é uma flag que vai definir o bun como runtime do projeto.

O próximo passo é instalar as seguintes dependências: @happy-dom/global-registrator e @testing-library/react

bun install @happy-dom/global-registrator @testing-library/react -d

Essas são dependência de desenvolvimento por isso usamos o -d para instalar no nosso devDependencies.

A biblioteca Happy DOM é uma implementação de DOM (Document Object Model) em JavaScript que simula o comportamento do DOM fora do browser. Isso é especialmente útil para desenvolver e testar aplicações JavaScript que normalmente seriam executadas em navegadores.

Criando os arquivos de configuração

---

Vamos criar os arquivos de configuração para os nossos testes, vamos precisar de apenas dois arquivos: bunfig.toml e happydom.ts.

bunfig.toml:

preload = "./happydom.ts"

happydom.ts:

import { globalRegistrator } from '@happy-dom/global-registrator';

globalRegistrator();

Agora vamos criar nossos testes.

Criando os testes

---

Primeiro vamos simplificar a nossa página home.

export default function Home() {
  return (
    <main className="min-h-screen flex justify-center items-center">
      <h1>Hello world!</h1>
    </main>
  );
}

Então criamos o arquivos home.test.tsx dentro do diretório __tests__.

import { expect, test, describe } from 'bun:test'
import { render, screen } from '@testing-library/react'
import Home from '../src/app/page'

describe('Home', () => {
  test('renders', () => {
    render(<Home />)

    expect(screen.getByText('Hello world!')).toBeTruthy()
  })
})

Agora vamos executar nossos testes com o seguinte comando:

bun test

Então teremos uma saída parecida com essa: 👇

❯ bun test
bun test v1.1.31 (e448c4cc)

__tests__\home.test.tsx:
✓ Home > renders [16.00ms]

 1 pass
 0 fail
 1 expect() calls
Ran 1 tests across 1 files. [291.00ms]

Tudo pronto, criamos o projeto, configuramos o que foi necessário e agora podemos testar nossos componentes.

Referências

---

• • React Testing Library
• • Bun:test
• • Bun
• • Next.js