농담으로 vue 컴포넌트를 테스트하면 불합격입니다.

농담으로 vue 컴포넌트를 테스트하면 불합격입니다.

나는 처음으로 농담을 사용하고 있고 무거운 테스트를 시작하기 전에 제대로 뛰도록 노력하고 있다.처음에는 이걸 테스트하고 있었어요.

import { mount, createLocalVue } from '@vue/test-utils';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import BootstrapVue from 'bootstrap-vue';
import UsersList from './../../components/users/UsersList.vue';

const localVue = createLocalVue();
localVue.use(VueRouter);
localVue.use(Vuex);
localVue.use(BootstrapVue);


describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(UsersList, {
      localVue
    })
    expect(wrapper.contains('div')).toBe(true)
  })
})

물론 컴포넌트에 div를 사용하고 있었기 때문에 마지막에 정상적으로 통과될 것입니다.

하지만 지금 문제는, Vuex, 아니면 나도 몰라.그 농담으로는 제 vuex $store.state 레퍼런스를 처리할 수 없는 것 같습니다. TypeError: Cannot read property 'state' of undefined그 후:[Vue warn]: Error in render: "TypeError: Cannot read property 'resolve' of undefined"

설정은 다음과 같습니다.

jest.config.disc:

/* eslint-disable no-undef */
// For a detailed explanation regarding each configuration property, visit:
// https://jestjs.io/docs/en/configuration.html
module.exports = {
  verbose: true,
  moduleFileExtensions: [
    'js',
    'json',
    // tell Jest to handle `*.vue` files
    'vue',
  ],
  transform: {
    // process `*.vue` files with `vue-jest`
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest',
  },
  moduleNameMapper: {
    '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/mocks/fileMock.js',
    '\\.(css|less|scss)$': '<rootDir>/mocks/styleMock.js',
  },
  clearMocks: true,
};

문제는 모킹이 무엇인지 더 잘 알고 이걸 위해 사용해야 한다는 거였어요

import { shallowMount, createLocalVue } from '@vue/test-utils';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import BootstrapVue from 'bootstrap-vue';
import UsersList from './../../components/users/UsersList.vue';

const localVue = createLocalVue();
localVue.use(VueRouter);
localVue.use(Vuex);
localVue.use(BootstrapVue);

describe('UsersList.vue', () => {
  let store;
  const state = {
    User: {
      id: 1,
    },
  };

  beforeEach(() => {
    store = new Vuex.Store({
      state,
    });
  });

  it('renders a div', () => {
    const wrapper = shallowMount(UsersList, {
      store,
      localVue,
    });
    expect(wrapper.contains('div')).toBe(true);
  });
});

나는 나를 조롱하는 상태라고 정의했고 그것은 마법을 부렸다.

const state = {
    User: {
      id: 1,
    },
  };

언급URL : https://stackoverflow.com/questions/62447521/simple-testing-a-vue-component-with-jest-results-a-fail