时间戳

首页 > 解决方案 > 如何将 TheIntern 与 Webpack 和 Babel 一起使用

webpack - 如何将 TheIntern 与 Webpack 和 Babel 一起使用

问题描述

我尝试使用theintern进行单元/功能测试，但我使用 webpack 捆绑/加载模块，使用 webpack-dev-server 进行本地开发，使用 babel 进行 JS 转换。

当我尝试加载组件时，我的组件中通过导入导入的文件出现错误。

// a.js
const getWindowLocation = window.location
export default getWindowLocation

// b.js
import getWindowLocation from "a.js"
const anotherVar = getWindowLocation
// make some work with anotherVar
export default anotherVar

// c.js
import anotherVar from "b.js"
// module i try to test
const something = somevalue
export default something

然后在我的测试文件中：

// test.c.js
import something from "c.js"

但是，当我加载我的测试套件时，出现如下错误：

ReferenceError: window is not defined
at getWindowLocation  <a.js>
at Object.<anonymous>  <b.js>

我使用 jsdom 来启用window它，它适用于其他模块，c.js但不适用于其他模块。

那么，如何配置实习生在没有 SystemJS 和 Typescript 的情况下处理来自 webpack 的模块？

标签： webpackintern

解决方案

问题是c.js假设window是在全局范围内。在createwindow.js创建 jsdom 窗口时，它不会将其添加到全局范围。

一种解决方案是将 jsdom 添加window到全局范围：

// createwindow.js
const jsdom = require('jsdom')
const { JSDOM } = jsdom
const { window } = new JSDOM()
global.window = window;

然而，正如 jsdom 作者指出的那样，这不是一个好习惯。相反，您的测试类应该使用您的createWindow插件来获取window：

// c.js
const window = intern.getPlugin('createWindow');
const getWindowLocation = window.location
export default getWindowLocation

推荐阅读