Saturday, 27 May 2017

Jest Testing with require modules: ejs-loader

I am playing with the idea of having large static html bundles just loaded into a react component vice typing them all out in jsx. I am currently just experimenting with ejs-loader and html-react-parser to evaluate the feasibility of this. Everything actually renders fine but I cannot get any tests to work with jest for this. I receive: 'Cannot find module 'ejs-loader!./AboutPage.view.ejs' from 'AboutPage.js'' errors and I am unsure of what to do.

I am currently just working off of react-slingshot as my base for experimenting with this.

The component itself is simple:

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;

And the test is:

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);
  });
  
});

I have read through the docs and similar questions like this. I attempted to use a custom transformer, but I may be misunderstanding something as it doesn't appear to be even called.

Package.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"
    }
  },

and the transformer itself:

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


via AndrewHunter

No comments:

Post a Comment