TDD, что такое TDD и почему это важно? Как вы, наверное, знаете, TDD — это тестированиеDна основе Dразработки. TDD является жизненно важной практикой по многим причинам. Во-первых, это заставляет обращать внимание на детали. Мы не хотим пересматривать весь наш код, чтобы обнаружить синтаксическую ошибку. Во-вторых, тестирование нашего приложения помогает нам понять, что происходит за дымом и зеркалами.

Теперь позвольте мне высказать личное мнение о TDD. По моему мнению, и я всегда сохраняю непредвзятость при рассмотрении других точек зрения, самый выгодный способ выполнения TDD — сначала протестировать, а потом кодировать. Я считаю, что разработка с первым тестом более продуктивна по следующим причинам.

  • Лучшее планирование,
  • нет двойной поддержки для написания тестов
  • помочь остановить проблемы до того, как они начнутся и т. д.

Теперь давайте приступим к написанию нашего первого теста.

Если вы используете npx create-react-app, jest и react testing library, выходите из коробки с npx. Однако, если вы создаете приложение для реагирования с нуля, вам придется настроить собственную среду тестирования.

После того, как вы настроили React, вы хотите перейти к src/app.test.js, и вы должны увидеть что-то похожее на код ниже.

import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

Итак, давайте разберем это построчно.

//first we import render @testing-library.
import {render, screen} from '@testing-library/react';
import App from './App';

Если зайти на https://testing-library.com/docs/queries/about/#screen, полное описание. Но, в частности, это позволяет нам запрашивать виртуальный DOM так же, как вы делаете это в консоли разработчика, с небольшим отличием.

// test is a global meth that comes with jest
test('renders learn react link', () => {
    //we render the <App /> react component wich should contain any and every thing that we would need 
 render(<App />);
// )
 const linkElement = screen.getByText(/learn react/i);//  /learn react/i is regular expression and is pretty complext so i would suggest doing some reseach on that if you un fimiliar with it
 
    //expect is a function that we get from jest, this function ussually used in tandem with .toBe() and expect accepts someValue as its argument and .toBe accepts an expected usaully scalar value such as a string or an integer.
    expect(linkElement).toBeInTheDocument();
})

Теперь просто запустите npm test; это позволит вам выбрать, как вы хотите запускать свои тесты. Независимо от того, запускаете ли вы их все один раз, или тесты, которые не проходят, или те, которые «я верю».

// test is a global meth that comes with jest
test('renders learn react link', () => {
    //we render the <App /> react component wich should contain any and every thing that we would need 
 render(<App />);
// )
 const linkElement = screen.getByText(/learn react/i);//  /learn react/i is regular expression and is pretty complext so i would suggest doing some reseach on that if you un fimiliar with it
 
    //expect is a function that we get from jest, this function ussually used in tandem with .toBe() and expect accepts someValue as its argument and .toBe accepts an expected usaully scalar value such as a string or an integer.
    expect(linkElement).toBeInTheDocument();
})

Хорошо, вы официально запустили свои тесты и видите экран, показывающий, что все тесты пройдены.

Теперь, когда мы разобрались с этим, давайте перейдем к чему-то более сложному, используя то, что мы узнали из приведенного выше контекста кода.

test('button has correct initial color', () => {
  render(<App />);
  // find an element with a role of button and text of 'Change to blue'
  const colorButton = screen.getByRole('button', {name: 'Change to blue'})
  expect(colorButton).toHaveStyle({backgroundColor: 'red'})
});

Делаем то же самое, что и раньше. Только на этот раз мы используем getByRole вместо getByText и toHaveStyle вместо toBeInTheDocument. Если вы вернетесь на https://www.w3.org/TR/wai-aria/#role_definitions, вы найдете список ролей и определений. Первый аргумент в getByRole определяет, какой должна быть роль. Второй аргумент указывает, как должна называться кнопка, отсюда и название.

Для прохождения теста нужно будет добавить это в файл App.js.

return (
    <div>
      <button style={{backgroundColor: 'red'}}>
        Change to blue
      </button>
    </div>
  );

И бум, вы только что написали свой первый официальный тест.