Недавно я сделал простое веб-приложение для доски идей, используя ReactJS, Ruby-on-Rails и PostgreSQL. Ниже я расскажу вам о начальных шагах, которые я предпринял, чтобы настроить базовые модульные тесты для одной из функций моего приложения, добавив новую идею.

Примечание. Я не собираюсь обсуждать объем тестов в этом посте; скорее, я сосредоточен на понимании того, как установить некоторые из зависимостей, чтобы иметь возможность приступить к написанию тестов.

Предыстория: создана доска идей

Я использовал диспетчер пакетов Node для управления зависимостями своего проекта. Если вы хотите писать код, убедитесь, что на вашем компьютере установлен Node.

Особенности проекта

В Rails

Модели: Идея

Отношения: нет

В React

Компоненты: Navbar, IdeasContainer, Idea

Начало работы с RSpec

Я использовал RSpec для тестирования части Rails моего веб-приложения доски идей. Для начала:

  1. Я добавил гем «rspec-rails», «~› 3.8 »в свой гем-файл.
  2. Затем я запустил bundle в окне своего терминала (убедившись, что я нахожусь в каталоге Rails).

3. Затем в моем каталоге Rails я создал новую папку с именем spec. А потом внутри еще одна новая папка с именем requests.

4. Я создал новый файл с именем ideas_spec.rb. Вы можете заменить имя ideas_spec на имя той модели, которую хотите протестировать, обязательно включив часть _spec, чтобы обозначить, что это тестовый файл.

5. Вверху моего файла ideas_spec.rb я добавил следующий текст:

require ‘rails_helper’

6. Затем в тот же файл я включил код, описывающий первый тест, который я хотел запустить:

describe “add an idea”, :type => :request do
before do
 post ‘/api/v1/ideas’
end
it ‘returns a created status’ do
  expect(response).to have_http_status(201)
end
end

7. Чтобы запустить тест, я набрал rspec в окне терминала, убедившись, что нахожусь в каталоге проекта rails.

Если вы следовали инструкциям, RSpec должен работать на этом этапе и ваш первый тест должен пройти!

Начало работы с Jest

Я был приятно удивлен, узнав, что среда тестирования Jest включена в приложение create-react-app! Однако я также хотел использовать Enzyme, утилиту для тестирования, для которой мне нужно было установить некоторые зависимости.

  1. Для начала я создал новую папку с именем _tests_ в каталоге src моего приложения.
  2. В моем клиентском каталоге я выполнил следующие команды:
npm i -D react-test-renderer
npm install --save-dev jest-enzyme
npm install --save-dev enzyme enzyme-adapter-react-16

3. Чтобы настроить Enzyme, я создал в src файл с именем setupTests.js и включил следующее:

const Enzyme = require('enzyme');
const EnzymeAdapter = require('enzyme-adapter-react-16');
Enzyme.configure({ adapter: new EnzymeAdapter() });

4. Внутри моей папки _tests_ я создал новый файл с именем App.tests.js.

5. Я включил следующий текст в верхнюю часть этого файла, чтобы импортировать мои компоненты и все функции тестирования, которые мне нужны для всех моих тестов:

import React from 'react';
import App from '../App';
import Idea from '../components/Idea';
import IdeasContainer from '../components/IdeasContainer';
import { create, update } from 'react-test-renderer';
import '../setupTests';
import { shallow, mount, render } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';

6. Ниже я включил свой первый модульный тест:

describe('Idea', () => {
  it('should render a new idea correctly', () => {
    const output = shallow(
      <Idea
      key="mockKey"
      idea={"1", "Test", "Test"}
      onClick={"mockFn"}
      delete={"mockFn2"}
      />
    );
    expect(shallowToJson(output)).toMatchSnapshot();
  });
});

7. Я запустил rails s в каталоге на стороне сервера, а затем npm start в каталоге на стороне клиента, чтобы запустить доску идей на localhost: 3001.

8. Чтобы запустить свой первый тест, я ввел следующее в окно терминала (убедившись, что я нахожусь в каталоге клиента):

npm run test

Если вы следовали инструкциям, Jest должен запуститься на этом этапе, ваш тест должен пройти успешно - и теперь вы находитесь в отличном месте, чтобы писать больше тестов!

Более подробную информацию о проекте Доска идей можно найти в моем репозитории здесь.

Если вы зашли так далеко, спасибо за чтение! Надеюсь, мой пост помог вам начать настройку тестов.