如何在测试Webpack时忽略原始加载器

Question

我有一些组件，其中包含使用Webpack原始加载器内联加载的SVG，例如...

import React, { Component } from 'react'
import svg from '!raw!../assets/images/logo.svg'

export default class Logo extends Component {
  render() {
    return (<a href={this.props.url} dangerouslySetInnerHTML={{__html: svg}} />)
  }
}

在使用tape测试这些组件时，它们会出现问题。如果我包含css模块，那么没有问题，我可以使用css-modules-require-hook，但svg不起作用。所以我真的需要一个原始加载程序要求钩子或类似的东西。

require('babel-register');
require('css-modules-require-hook/preset');
/* tests after this can import components with css includes */

我尝试使用同构确保，但是这并没有起作用。

require('babel-register');
require('css-modules-require-hook/preset');
require('isomorphic-ensure')({
  loaders: {
    raw: require('raw-loader'),
    raw: require('react-svgdom-loader')
  },
  dirname: __dirname
})

我遇到了以下错误：

无法找到模块“!raw!../assets/images/”

- svnm

---

你是否通过webpack运行测试？如果没有，你可以将import移到模块外部并在那里注入它（作为prop传递）吗？如果这对你不起作用，你可以考虑使用类似rewire的东西。 - Juho Vepsäläinen

我没有针对我的测试编写 webpack 配置，只需 require('babel-register')，然后是 require( 'isomorphic-ensure')，最后是我的组件、动作和减速器测试列表。例如：require('./components/Logo.spec.js'); - svnm

在我的实际应用的webpack配置中，我有以下用于svg的loader：{ test: /\.svg$/, loaders: ['react-svgdom', 'svgo'] } - svnm

好的。为了让您更轻松，避免猴子补丁，请考虑将webpack特定部分推出模块。如果您想保留导入，请尝试使用rewire。我不能保证它会起作用，但至少值得一试。 - Juho Vepsäläinen

Answer 1

如果您在测试中没有使用webpack，那么您可以使用 ignore-styles模块。如果您计划与css-modules-require-hook一起使用它，则可能需要进行配置，因为它默认还会忽略CSS文件。例如：

require('ignore-styles').register(['.svg'])

- Nick Cox