Как я могу решить проблему с vuex и модульным тестированием?


Как я могу решить проблему с vuex и модульным тестированием?

20.10.2019 07:37:40 Просмотров 98 Источник

Я пытаюсь написать и запустить модульное тестирование в первый раз с мокко и столкнулся с некоторой проблемой. У меня есть Table.vue писал с vuetify

    <v-container>
        <h1>Table</h1>
        <v-layout
                text-center
                wrap
        >
            <v-simple-table v-if="table.length">
                <template v-slot:default>
                    <thead>
                    <tr>
                        <th class="text-left">Id</th>
                        <th class="text-left">Name</th>
                        <th class="text-left">Description</th>
                        <th class="text-left">Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, index) in table" :key="index">
                        <td>{{ item.id }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.description }}</td>
                        <td>
                            <v-btn
                                    color="blue"
                                    :to="{name: 'create', params: { item: item, id: item.id }}"
                            >
                                Update
                            </v-btn>
                            <v-btn
                                    color="red"
                                    @click="show(item)"
                            >
                                Delete
                            </v-btn>
                        </td>
                    </tr>
                    </tbody>
                </template>
            </v-simple-table>
        </v-layout>
        <v-btn
                :to="{name: 'create'}"
                color="primary"
        >
            <span class="mr-2">Create</span>
        </v-btn>
        <modal name="hello-world">
            <v-container>
                <v-layout
                        text-center
                        wrap
                >
                    Are you sure you eant to remove this item?
                </v-layout>
                <v-layout
                        text-center
                        wrap
                >
                    <v-btn
                            color="red"
                            @click="deleteItem"
                    >
                        Yes
                    </v-btn>
                    <v-btn
                            color="primary"
                            @click="hide"
                    >
                        No
                    </v-btn>
                </v-layout>
            </v-container>
        </modal>
    </v-container>
</template>

<script>
    import { mapState, mapActions } from 'vuex'
    export default {
        name: "Table",
        data() {
            return {
                itemToRemove: null
            }
        },
        methods: {
            ...mapActions([
                'removeItem'
            ]),
            show (item) {
                this.$modal.show('hello-world');
                this.itemToRemove = item
            },
            hide () {
                this.$modal.hide('hello-world');
                this.itemToRemove = null
            },
            deleteItem () {
                this.removeItem(this.itemToRemove)
                this.hide()
            }
        },
        computed:
            mapState({
            table: state => state.table.table
        })
    }
</script>

<style scoped>

</style>

И я хочу запустить тест там. У меня есть table.spec.jsвнутри tests/unitпапки / unit

import { expect } from 'chai'
import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import Table from '@/components/Table.vue'
const localVue = createLocalVue()
localVue.use(Vuex)
const store = new Vuex.Store({
    state: {}
})

describe('Table.vue', () => {
    it('renders h1 tag', () => {
    const wrapper = shallowMount(Table, {localVue, store})
    expect(wrapper.find('h1').text().equal('Table'))
})
})

Когда я запускаю команду npm run test:unitу меня есть ошибка 1) Table.vue renders h1 tag: TypeError: Cannot read property 'table' of undefined ранее это была ошибка с текстом Cannot read property 'state' of undefined

Я попытался включить vuex в тесты, но это мой первый раз с unit-test и похоже, что я делаю что-то неправильно

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

У вопроса есть решение - Посмотреть?

Ответы - Как я могу решить проблему с vuex и модульным тестированием? / How can I solve problem with vuex and unit-testing?

sevensidedmarble

20.10.2019 10:18:46

Вы должны прочитать до конца https://vue-test-utils.vuejs.org/guides/using-with-vuex.html

У них есть отличные примеры издевательств над vuex, что вам и нужно сделать. Это выглядит так:

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import Actions from '../../../src/components/Actions'

const localVue = createLocalVue()

localVue.use(Vuex)

describe('Actions.vue', () => {
  let actions
  let store

  beforeEach(() => {
    actions = {
      actionClick: jest.fn(),
      actionInput: jest.fn()
    }
    store = new Vuex.Store({
      actions
    })
  })

  it('dispatches "actionInput" when input event value is "input"', () => {
    const wrapper = shallowMount(Actions, { store, localVue })
    const input = wrapper.find('input')
    input.element.value = 'input'
    input.trigger('input')
    expect(actions.actionInput).toHaveBeenCalled()
  })

https://stackoverflow.com/questions/58475075/how-can-i-solve-problem-with-vuex-and-unit-testing/58476458#comment103298086_58476458
Как я могу заменить это мокко? actionClick: шутка.ФН(), actionInput: шутка.fn()
https://stackoverflow.com/questions/58475075/how-can-i-solve-problem-with-vuex-and-unit-testing/58476458#comment103309889_58476458
Я считаю, что многие люди используют spy()от sinon, когда они работают с Мокко, чтобы издеваться над функциями. Это совсем другая библиотека.
Помочь в развитии проекта:
Закрыть X