🥑 jest 에서 만난 문제

☔️  jest swiper css 호출시 에러뜨는 현상

외부 라이브러리를 쓰면 "Unexpected token '.' ~~" 라는 경우가 있다. 이번에 마주한 문제는 swiper css를 import를 하다 생긴 문제였고, 알아본 결과 styleMock.js를 만든 후 jest.conifg.js에 세팅하면 오류는 사라진다.

 

 styleMock.js

// tests/jest/__mocks__/styleMock.js
export default {}

다음으로 jest.config.js에 moduleNameMapper에 추가해준다.

 

jest.config.js

// jest.config.js
module.exports = {
  moduleNameMapper: {
    // 아래 부분 추가
    '\\.(css|less)$': '<rootDir>/tests/jest/__mocks__/styleMock.js'
  }
}

 

 

🫑 particles-bg-vue 에서 'Cannot use import statement outside a module' 에러

ui 관련한 라이브러리들 사용하는 과정에서 마주하였고, "particles-bg-vue" 을 import 하는 과정에서 마주하였다.

 

particlesView.vue

<template>
  <div>
    <particles-bg type="lines" :bg="true" />
  </div>
</template>
<script>
import { ParticlesBg } from "particles-bg-vue";
export default {
  name: 'ParticlesView',
  components: {
    'particles-bg': ParticlesBg
  },
  data() {
    return {

    };
  },

  mounted() {

  },

  methods: {

  },
};
</script>
<style scoped></style>

jest.config.js에서transformIgnorePatterns 에  particles-bg-vue 관련된 부분을 추가해준다

 

//jest.config.js
module.exports = {
  transformIgnorePatterns: ['<rootDir>/node_modules/(?!(particles-bg-vue)|(?!@scu/vue)/)'],
}