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に拡張子を追加することで対処できます。
Author And Source
この問題について(Vue + jestでmarkdownのファイルをインポートする方法), 我々は、より多くの情報をここで見つけました https://qiita.com/dyson-udonsin/items/f27759cd32a207a7f7b1著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .