Use mocha commands to test with css modules

[FrenchMajesty]

Hello,

It is known that Mocha has problems with css modules. In order to successfully run tests despite them we are left with two solutions.

• To use the ignore-styles package with mocha and use it like so: mocha --require ignore-styles

• To use compiler.js to ignore .css files and use it like so: mocha --compilers js:babel-core/register,css:noCss-compiler.js

However I could not find any way to do this with the meteor version of mocha. Is there any way to test a React component that uses css modules?? How could I achieve that?

My setup:

• Meteor 1.5.2
• Npm 5.4.2
• practicalmeteor:mocha 2.4.5_6

[nbiton]

A workaround I've just started using is to use dynamic imports to load my React components in tests, but only doing it on the client (where I need to test them anyway), as the server setup is the one that can't handle the css modules.

import React from 'react'
import { shallow } from 'enzyme'
import { Meteor } from 'meteor/meteor'
import { expect } from 'meteor/practicalmeteor:chai'

if (Meteor.isClient) {
  describe('Testing my component', () => {
    let MyComponent
    before(() => {
      return import('./MyComponent.jsx').then((component) => {
        MyComponent = component
      })
    })

    it('should render successfully', () => {
      const comp = shallow(<MyComponent />)
      expect(comp.find('something')).to.have.lengthOf(1)
    })
  })
}

[ravelinx22]

Found an easy solution, import the component inside the Meteor.isClient if statement.

import React from 'react'
import { shallow } from 'enzyme'
import { Meteor } from 'meteor/meteor'
import { expect } from 'meteor/practicalmeteor:chai'

if(Meteor.isClient) {
    import MyComponent from "./MyComponent.jsx";

    // Tests
}

[wanecek]

@FrenchMajesty Did you ever find a way to --require modules with meteor's mocha version, e.g. by passing options directly to mocha?