Javascript 如何断言React组件测试中调用了require（）？

我的每个React组件都有自己的css文件，我正试图找出一种方法，可以断言我的每个组件都需要正确的css文件（为了获得100%的代码覆盖率）

我正在使用webpack，它允许您在React组件中需要css文件，前提是您安装了

style loader

和

css loader

。它看起来像这样：

import React from 'react';

export default class Component extends React.Component {
    componentDidMount() {
        require('../css/component.css');
    }

    render() {
        return (
            <div className="component">
                Test Component
            </div>
        );
    }
}

从“React”导入React；
导出默认类组件扩展React.Component{
componentDidMount（）{
需要（'../css/component.css'）；
}
render（）{
返回(
测试组件
);
}
}

这很好，每个组件在加载到浏览器时都有正确的样式，但我似乎无法找到编写Mocha测试的方法来解释这些

require（）

调用

---

是否有任何方法可以模拟

require（）

并断言它只被调用了一次，每个React组件都有正确的参数？

看起来您正在尝试测试webpack…为什么不在文件开头导入“../css/component.css”？实际上，结果大致相同（如果您有外部css文件，则结果完全相同。如果在头部插入样式标记，则所有样式都会像以前一样下载，但会在第一个组件渲染之前插入）…不幸的是，在

componentDidMount

中需要文件与只在顶部使用

import

是有区别的。实际上，我不希望这些文件存在于我的测试范围内，而使用

import

正是这样做的。如果我能够模拟

require

函数，我将能够断言这些文件正在进入生产，而不必将它们暴露在我的测试中。另一件值得一提的事情是，我正在使用Material Design Lite作为我的组件的css框架，我需要

要求的文件之一是一个JavaScript文件，它允许MDL在加载到浏览器时工作。如果我将
require
调用移动到组件的顶部，而不是
componentDidMount
的内部，Mocha将尝试“测试”此文件，这会导致整个测试套件失败。看起来您正在尝试测试网页包……为什么不在文件的开头导入“../css/component.css”

？实际上，结果大致相同（如果您有外部css文件，则结果完全相同。如果在头部插入样式标记，则所有样式都会像以前一样下载，但会在第一个组件渲染之前插入）…不幸的是，在

componentDidMount

中需要文件与只在顶部使用

import

是有区别的。实际上，我不希望这些文件存在于我的测试范围内，而使用

import

正是这样做的。如果我能够模拟

require

函数，我将能够断言这些文件正在进入生产，而不必将它们暴露在我的测试中。另一件值得一提的事情是，我正在使用Material Design Lite作为我的组件的css框架，我需要

要求的文件之一是一个JavaScript文件，它允许MDL在加载到浏览器时工作。如果我将
require
调用移动到组件的顶部，而不是
componentDidMount
的内部，Mocha将尝试“测试”此文件，这将导致整个测试套件失败。