Testes e Validação de Blocos com @wordpress/scripts

Fala, dev! 👋

Depois de criar seus próprios blocos no Gutenberg com React, CSS, atributos e integração com APIs, é hora de dar um passo importante rumo à qualidade de código: testar e validar seus blocos com ferramentas do pacote @wordpress/scripts.

Hoje você vai aprender a configurar e executar:

• Lint de JavaScript e JSX
• Lint de CSS com Stylelint
• Testes unitários com Jest
• Validação de blocos com o block-validator

🎯 Por que testar blocos?

• Evita bugs sutis no editor ou frontend
• Garante compatibilidade com futuras versões do WordPress
• Facilita manutenção, refatoração e colaboração em equipe
• Garante que blocos registrados são válidos e coerentes com o block.json

📦 Dependência: @wordpress/scripts

Se você está seguindo a série, provavelmente já tem esse pacote instalado:

npm install @wordpress/scripts --save-dev

Esse pacote já vem com tudo que você precisa para testes, lint e validações, incluindo:

• Babel
• Webpack
• ESLint
• Jest
• Stylelint
• Block Validator

🧪 1. Rodando validação de blocos

Verifica se a implementação (edit/save) está coerente com o block.json.

npx wp-scripts validate-blocks

Ou, se estiver no package.json:

"scripts": {
  "validate": "wp-scripts validate-blocks"
}

E então:

npm run validate

Isso ajuda a evitar problemas como blocos quebrando quando salvos e recarregados.

🔍 2. ESLint – Lint de JavaScript

Você pode rodar:

npx wp-scripts lint-js

Ou configurar no package.json:

"scripts": {
  "lint:js": "wp-scripts lint-js"
}

Adicione um .eslintrc.json (se quiser ajustes):

{
  "extends": "plugin:@wordpress/eslint-plugin/recommended"
}

🎨 3. Stylelint – Lint de CSS

npx wp-scripts lint-style

E para deixar no package.json:

"scripts": {
  "lint:style": "wp-scripts lint-style"
}

Adicione um .stylelintrc.json:

{
  "extends": "stylelint-config-wordpress"
}

✅ 4. Testes com Jest

Já vem configurado com @wordpress/scripts.

Você pode criar arquivos de teste como meu-bloco.test.js e rodar:

npx wp-scripts test-unit-js

Ou no script:

"scripts": {
  "test": "wp-scripts test-unit-js"
}

Ideal para testar lógica de componentes React (ex: funções, renderizações condicionais, manipulação de atributos).

🧪 Exemplo de teste básico com Jest

import { render } from '@testing-library/react';
import Edit from './edit';

test('renderiza corretamente o bloco', () => {
  const { container } = render(<Edit attributes={{}} setAttributes={() => {}} />);
  expect(container.firstChild).toBeInTheDocument();
});

📁 Estrutura sugerida

blocks/
└── meu-bloco/
    ├── block.json
    ├── edit.js
    ├── save.js
    ├── index.js
    ├── style.css
    └── __tests__/
        └── edit.test.js