Vue+摩卡，0测试通过，如果vue单文件有<style>标签的话。

Question

我正在使用webpacker和vueonrails gem在Ruby on Rails应用中实现VueJS，但我在测试Vue的实现时遇到了麻烦。

我有一堆 .vue 使用单一文件模式的文件。如果我只对包含和标签的文件进行测试，那么文件夹和子文件夹的所有文件都能正常执行，而其他组件则带有 <style> 标签，但没有测试文件在同一文件夹中。

如果我运行测试，结果是45个测试通过。

然后，如果我对其中的一个文件用 <style>，然后再运行测试，它将无错误地执行，但说0测试通过，避免通过文件夹的所有测试。

如果我运行一个文件的特定测试，而不进行测试，那么我的测试就会失败。<script> 标签，它能正常通过文件的所有测试，如果我用 <script>，有0个测试通过。

我是用mochapack和ignore-styles来运行这个命令的。

NODE_ENV=test mochapack --webpack-config config/webpack/test.js --require ignore-styles --require app/webpacker/src/test/setup.js --glob '*.spec.js' app/webpacker/src/components --recursive

我觉得这和spec.js文件中导入Vue组件有关，但我不知道该如何解决，为什么用这个命令来工作 <template> + <script> 文件，而不是用 <template> + <script> + <style> 文件。

Answer 1

你能提供你的测试配置吗？我也遇到过类似的问题，这是由错误的配置引起的。在devprod环境中，样式是由ruby gem加载的，但整个测试环境是由node运行的。所以在测试配置中，我不得不为css添加加载器。

environment.loaders.prepend('css', {
  test: /\.css$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'sass-loader',
  ],
});