Vue + jestでmarkdownのファイルをインポートする方法


Vueでjestを使ってmarkdownをimportした際の unexpected tokenのエラーに遭遇したのでその回避方法です。

$npm run unit
test/unit/specs/Markdown.spec.js
● Test suite failed to run
    Jest encountered an unexpected token
Markdown.vue
...
<script>
import marked from 'marked'
import md from '../assets/sample.md' //importでエラーが発生

export default {
  name: 'Markdown',
  computed: {
    compiledMarkdownText: function () {
      return marked(md.source)
    }
  }
}
</script>

原因は、markdownのファイルをimportした際に変換がかかりエラーになっています。
そこで、markdownの場合は変換の対象から除外し、モックファイルを読み込むようにjestのmoduleNameMapperに設定を追加します。
https://jestjs.io/docs/ja/configuration#modulenamemapper-objectstring-string
https://jestjs.io/docs/ja/webpack#静的アセットの管理

jest.config.js
  moduleNameMapper: {
    '\\.(md)$': '<rootDir>/test/mocks/file_mock.js'
  },
file_mock.js
module.exports = {
    file: 'file_mock.js',
    source: 'stub' //ファイルのテキストをsourceに記載
}

テストコードでもモックファイルを参照する場合は
file_mock.jsをimportします。

Markdown.spec.js
import { mount } from '@vue/test-utils'
import Markdown from '@/components/Markdown'
import md from '../../mocks/file_mock.js'

describe('Markdown.vue', () => {
  it('markdown should be html', () => {
    const wrapper = mount(Markdown)
    expect(wrapper.vm.compiledMarkdownText).toBe('<p>stub</p>\n') 
  })
})

markdownだけでなく他のアッセトファイルを参照する場合もmoduleNameMapperに拡張子を追加することで対処できます。