vuex-help

<!DOCTYPE HTML> <html lang="ru" > <head> <meta charset="UTF-8"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Тестирование · Vuex</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="description" content=""> <meta name="generator" content="GitBook 3.2.3"> <link rel="stylesheet" href="../gitbook/style.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-prism/prism.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-theme-vuejs/vue.css"> <meta name="HandheldFriendly" content="true"/> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png"> <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon"> <link rel="next" href="hot-reload.html" /> <link rel="prev" href="forms.html" /> </head> <body> <div class="book"> <div class="book-summary"> <div id="book-search-input" role="search"> <input type="text" placeholder="Введите условия поиска" /> </div> <nav role="navigation"> <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=vuejs" id="_carbonads_js"></script> <ul class="summary"> <li class="chapter " data-level="1.1" data-path="./"> <a href="./"> Introduction </a> </li> <li class="chapter " data-level="1.2" > <a target="_blank" href="https://github.com/vuejs/vuex/releases"> История изменений </a> </li> <li class="chapter " data-level="1.3" data-path="installation.html"> <a href="installation.html"> Установка </a> </li> <li class="chapter " data-level="1.4" data-path="intro.html"> <a href="intro.html"> Что такое Vuex? </a> </li> <li class="chapter " data-level="1.5" data-path="getting-started.html"> <a href="getting-started.html"> Начало работы </a> </li> <li class="chapter " data-level="1.6" data-path="core-concepts.html"> <a href="core-concepts.html"> Основные понятия </a> <ul class="articles"> <li class="chapter " data-level="1.6.1" data-path="state.html"> <a href="state.html"> Состояние </a> </li> <li class="chapter " data-level="1.6.2" data-path="getters.html"> <a href="getters.html"> Геттеры </a> </li> <li class="chapter " data-level="1.6.3" data-path="mutations.html"> <a href="mutations.html"> Мутации </a> </li> <li class="chapter " data-level="1.6.4" data-path="actions.html"> <a href="actions.html"> Действия </a> </li> <li class="chapter " data-level="1.6.5" data-path="modules.html"> <a href="modules.html"> Модули </a> </li> </ul> </li> <li class="chapter " data-level="1.7" data-path="structure.html"> <a href="structure.html"> Структура приложения </a> </li> <li class="chapter " data-level="1.8" data-path="plugins.html"> <a href="plugins.html"> Плагины </a> </li> <li class="chapter " data-level="1.9" data-path="strict.html"> <a href="strict.html"> Строгий режим (strict mode) </a> </li> <li class="chapter " data-level="1.10" data-path="forms.html"> <a href="forms.html"> Обработка форм </a> </li> <li class="chapter active" data-level="1.11" data-path="testing.html"> <a href="testing.html"> Тестирование </a> </li> <li class="chapter " data-level="1.12" data-path="hot-reload.html"> <a href="hot-reload.html"> Горячая замена </a> </li> <li class="chapter " data-level="1.13" data-path="api.html"> <a href="api.html"> Справочник API </a> </li> <li class="divider"></li> <li> <a href="https://www.gitbook.com" target="blank" class="gitbook-link"> Опубликовано с помощью GitBook </a> </li> </ul> </nav> </div> <div class="book-body"> <div class="body-inner"> <div class="book-header" role="navigation">  <h1> <a href="." >Тестирование</a> </h1> </div> <div class="page-wrapper" tabindex="-1" role="main"> <div class="page-inner"> <div id="book-search-results"> <div class="search-noresults"> <section class="normal markdown-section"> <h1 id="тестирование">Тестирование</h1> В основном предметом модульного тестирования во Vuex являются мутации и действия. <h3 id="тестирование-мутаций">Тестирование мутаций</h3> Мутации тестировать довольно просто, так как они представляют из себя всего лишь простые функции, поведение которых полностью зависит от переданных параметров. Один трюк заключается в том, что если вы используете модули ES2015 и помещаете свои мутации в файле <code>store.js</code>, то помимо экспорта по умолчанию, вы должны экспортировать мутации с помощью именованного экспорта: <pre class="language-"><code class="lang-js">const state = { ... } // именованный экспорт `mutations` отдельно от самого хранилища export const mutations = { ... } export default new Vuex.Store({ state, mutations }) </code></pre> Пример тестирования мутаций с использованием Mocha + Chai (хотя вы не ограничены этими библиотеками и можете использовать любые другие): <pre class="language-"><code class="lang-js">// mutations.js export const mutations = { increment: state => state.count++ } </code></pre> <pre class="language-"><code class="lang-js">// mutations.spec.js import { expect } from 'chai' import { mutations } from './store' // деструктурирующее присваивание из `mutations` const { increment } = mutations describe('mutations', () => { it('INCREMENT', () => { // фиксируем состояние const state = { count: 0 } // применяем мутацию increment(state) // оцениваем результат expect(state.count).to.equal(1) }) }) </code></pre> <h3 id="тестирование-действий">Тестирование действий</h3> Действия тестировать несколько сложнее, поскольку они могут обращаться ко внешним API. При тестировании действий обычно приходится заниматься подделкой внешних объектов — например, вызовы к API можно вынести в отдельный сервис, и в рамках тестов этот сервис подменить поддельным. Для упрощения имитации зависимостей можно использовать webpack и <a href="https://github.com/plasticine/inject-loader" target="_blank">inject-loader</a> для сборки файлов тестов. Пример тестирования асинхронного действия: <pre class="language-"><code class="lang-js">// actions.js import shop from '../api/shop' export const getAllProducts = ({ commit }) => { commit('REQUEST_PRODUCTS') shop.getProducts(products => { commit('RECEIVE_PRODUCTS', products) }) } </code></pre> <pre class="language-"><code class="lang-js">// actions.spec.js // для inline-загрузчиков используйте синтаксис require // и inject-loader, возвращающий фабрику модулей, помогающую // подменять зависимости import { expect } from 'chai' const actionsInjector = require('inject-loader!./actions') // создаём поддельную зависимость const actions = actionsInjector({ '../api/shop': { getProducts (cb) { setTimeout(() => { cb([ /* поддельный ответ от сервера */ ]) }, 100) } } }) // вспомогательная функция для тестирования действия, которое должно вызывать известные мутации const testAction = (action, payload, state, expectedMutations, done) => { let count = 0 // поддельная функция вызова мутаций const commit = (type, payload) => { const mutation = expectedMutations[count] try { expect(mutation.type).to.equal(type) if (payload) { expect(mutation.payload).to.deep.equal(payload) } } catch (error) { done(error) } count++ if (count >= expectedMutations.length) { done() } } // вызываем действие с поддельным хранилищем и аргументами action({ commit, state }, payload) // проверяем, были ли инициированы мутации if (expectedMutations.length === 0) { expect(count).to.equal(0) done() } } describe('actions', () => { it('getAllProducts', done => { testAction(actions.getAllProducts, null, {}, [ { type: 'REQUEST_PRODUCTS' }, { type: 'RECEIVE_PRODUCTS', payload: { /* поддельный ответ */ } } ], done) }) }) </code></pre> <h3 id="тестирование-геттеров">Тестирование геттеров</h3> Геттеры, занимающиеся сложными вычислениями, тоже неплохо бы тестировать. Как и с мутациями, тут всё просто: Пример тестирования геттера: <pre class="language-"><code class="lang-js">// getters.js export const getters = { filteredProducts (state, { filterCategory }) { return state.products.filter(product => { return product.category === filterCategory }) } } </code></pre> <pre class="language-"><code class="lang-js">// getters.spec.js import { expect } from 'chai' import { getters } from './getters' describe('getters', () => { it('filteredProducts', () => { // поддельное состояние const state = { products: [ { id: 1, title: 'Apple', category: 'fruit' }, { id: 2, title: 'Orange', category: 'fruit' }, { id: 3, title: 'Carrot', category: 'vegetable' } ] } // поддельный параметр геттера const filterCategory = 'fruit' // получаем результат выполнения тестируемого геттера const result = getters.filteredProducts(state, { filterCategory }) // оцениваем результат expect(result).to.deep.equal([ { id: 1, title: 'Apple', category: 'fruit' }, { id: 2, title: 'Orange', category: 'fruit' } ]) }) }) </code></pre> <h3 id="запуск-тестов">Запуск тестов</h3> Если вы должным образом соблюдаете правила написания мутаций и действий, результирующие тесты не должны зависеть от API браузера. Поэтому их можно просто собрать webpack'ом и запустить в Node. С другой стороны, можно использовать <code>mocha-loader</code> или Karma + <code>karma-webpack</code>, и запускать тесты в реальных браузерах. <h4 id="запуск-в-node">Запуск в Node</h4> Используйте следующую конфигурацию webpack (в сочетании с соответствующим <a href="https://babeljs.io/docs/usage/babelrc/" target="_blank"><code>.babelrc</code></a>): <pre class="language-"><code class="lang-js">// webpack.config.js module.exports = { entry: './test.js', output: { path: __dirname, filename: 'test-bundle.js' }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] } } </code></pre> Затем в терминале: <pre class="language-"><code class="lang-bash">webpack mocha test-bundle.js </code></pre> <h4 id="запуск-в-браузерах">Запуск в браузерах</h4> <ol> <li>Установите <code>mocha-loader</code></li> <li>Измените <code>entry</code> в приведённой выше конфигурации Webpack на <code>'mocha-loader!babel-loader!./test.js'</code>.</li> <li>Запустите <code>webpack-dev-server</code>, используя эту конфигурацию</li> <li>Откройте в браузере <code>localhost:8080/webpack-dev-server/test-bundle</code>.</li> </ol> <h4 id="запуск-в-браузерах-при-помощи-karma-и-karma-webpack">Запуск в браузерах при помощи Karma и karma-webpack</h4> Обратитесь к <a href="https://vue-loader.vuejs.org/ru/workflow/testing.html" target="_blank">документации vue-loader</a>. </section> </div> <div class="search-results"> <div class="has-results"> <h1 class="search-results-title"> results matching ""</h1> <ul class="search-results-list"></ul> </div> <div class="no-results"> <h1 class="search-results-title">No results matching ""</h1> </div> </div> </div> </div> </div> <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script> <div class="bsa-cpc"></div> <script> (function(){ if(typeof _bsa !== 'undefined' && _bsa) { _bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', { target: '.bsa-cpc', align: 'horizontal', disable_css: 'true' }); } })(); </script> </div> <a href="forms.html" class="navigation navigation-prev " aria-label="Previous page: Обработка форм"> </a> <a href="hot-reload.html" class="navigation navigation-next " aria-label="Next page: Горячая замена"> </a> </div> <script> var gitbook = gitbook || []; gitbook.push(function() { gitbook.page.hasChanged({"page":{"title":"Тестирование","level":"1.11","depth":1,"next":{"title":"Горячая замена","level":"1.12","depth":1,"path":"hot-reload.md","ref":"hot-reload.md","articles":[]},"previous":{"title":"Обработка форм","level":"1.10","depth":1,"path":"forms.md","ref":"forms.md","articles":[]},"dir":"ltr"},"config":{"plugins":["edit-link","prism","theme-vuejs@git+https://github.com/pearofducks/gitboo