使用 require 模块进行 Jest 测试：ejs-loader答案

【问题标题】：Jest Testing with require modules: ejs-loader使用 require 模块进行 Jest 测试：ejs-loader
【发布时间】：2017-10-28 10:46:06
【问题描述】：

我正在考虑将大型静态 html 包加载到反应组件中，而不是将它们全部输入 jsx。我目前只是在试验ejs-loader 和html-react-parser 来评估它的可行性。一切实际上都很好，但我无法为此使用jest 进行任何测试。

我收到：Cannot find module ejs-loader!./AboutPage.view.ejs from AboutPage.js 错误，我不确定该怎么做。

我目前正在使用 react-slingshot 作为我的实验基地。

项目的repo是here

组件本身很简单：

import React from 'react';
import Parser from 'html-react-parser';
import '../styles/about-page.css';

const view = require('ejs-loader!./AboutPage.view.ejs')();

// Since this component is simple and static, there's no parent container for it.
const AboutPage = () => {
  return (
    <div>
      {Parser(view)}
    </div>
  );
};

export default AboutPage;

测试是：

import React from 'react';
import {shallow} from 'enzyme';
import AboutPage from './AboutPage';

describe('<AboutPage />', () => {
  
  it('should have a header called \'About\'', () => {
    const wrapper = shallow(<AboutPage />);
    const actual = component.find('h2').text();
    const expected = 'About';

    expect(actual).toEqual(expected);
  });
  
});

我已经阅读了the docs 和类似的问题，例如this。我尝试使用自定义转换器，但我可能会误解某些内容，因为它似乎没有被调用。

包.json

"jest": {
    "moduleNameMapper": {
      "\\.(css|scss)$": "identity-obj-proxy",
      "^.+\\.(gif|ttf|eot|svg|woff|woff2|ico)$": "<rootDir>/tools/fileMock.js"
    },
    "transform": {
      "^.+\\.js$": "babel-jest",
      "\\.(ejs|ejx)$": "<rootDir>/tools/ejx-loader/jest.transformer.js"
    }
  },

还有变压器本身：

module.exports = {
  process(src, filename, config, options){
    console.log('????');
    return 'module.exports = ' +  require(`ejs-loader!./${filename}`);
    //return require(`ejs-loader!./${filename}`);
  }
};

【问题讨论】：

标签： node.js reactjs ejs jestjs

【解决方案1】：

您可以尝试将模块名称映射器更改为 -

{ "\\.(css|scss)$": "identity-obj-proxy", "^.+\\.(gif|ttf|eot|svg|woff|woff2|ico)$": "<rootDir>/tools/fileMock.js" "ejs-loader!(.*)": "$1", }

这至少应该调用您的自定义转换器。

自定义转换器也应该是 -

const _ = require('lodash');
module.exports = {
  process(src, filename, config, options){
    console.log('????');
    return 'module.exports = ' +  _.template(src);
  }
};

【讨论】：

【解决方案2】：

您似乎没有将.ejs 指定为moduleFileExtension。

"jest": {
  ...
  "moduleFileExtensions": ["js", "jsx", "ejs", "ejx"],
  ...
}

另外，ejs-loader 将使用 cjs 语法为您导出函数，因此您可以在转换器中执行以下操作：

const loader = require('ejs-loader');

module.exports = {process: loader};

【讨论】：

【解决方案3】：

为我工作：

"jest": {
  "moduleNameMapper": {
    '\\.(ejs|ejx)$': '<rootDir>/jest-ejs.transformer.js'
  },
  moduleFileExtensions: ['js', 'json', 'jsx', 'ejs']
},

在jest-ejs.transformer.js

const loader = require('ejs-loader');
module.exports = {process: loader};

【讨论】：