Недавно я сделал простое веб-приложение для доски идей, используя ReactJS, Ruby-on-Rails и PostgreSQL. Ниже я расскажу вам о начальных шагах, которые я предпринял, чтобы настроить базовые модульные тесты для одной из функций моего приложения, добавив новую идею.
Примечание. Я не собираюсь обсуждать объем тестов в этом посте; скорее, я сосредоточен на понимании того, как установить некоторые из зависимостей, чтобы иметь возможность приступить к написанию тестов.
Предыстория: создана доска идей
Я использовал диспетчер пакетов Node для управления зависимостями своего проекта. Если вы хотите писать код, убедитесь, что на вашем компьютере установлен Node.
Особенности проекта
В Rails
Модели: Идея
Отношения: нет
В React
Компоненты: Navbar, IdeasContainer, Idea
Начало работы с RSpec
Я использовал RSpec для тестирования части Rails моего веб-приложения доски идей. Для начала:
- Я добавил гем «rspec-rails», «~› 3.8 »в свой гем-файл.
- Затем я запустил
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, утилиту для тестирования, для которой мне нужно было установить некоторые зависимости.
- Для начала я создал новую папку с именем
_tests_
в каталогеsrc
моего приложения. - В моем клиентском каталоге я выполнил следующие команды:
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 должен запуститься на этом этапе, ваш тест должен пройти успешно - и теперь вы находитесь в отличном месте, чтобы писать больше тестов!
Более подробную информацию о проекте Доска идей можно найти в моем репозитории здесь.
Если вы зашли так далеко, спасибо за чтение! Надеюсь, мой пост помог вам начать настройку тестов.