css-modules have inconsistent className hash using babel-plugin-webpack-loaders

[chentsulin]

Description

As title, test failed with AVA but passed with mocha.

Test Source

import test from 'ava';
import React from 'react';
import { shallow } from 'enzyme';

import Button from './Button';
import styles from './Button.css';

test('has hashed .btn className', t => {
  const element = shallow(<Button>Submit</Button>);
  const button = element.find('button');
  t.is(button.prop('className'), styles.btn);
})

Source Code

Error Message & Stack Trace

✖ has hashed .btn className   
  t.is(button.prop('className'), styles.btn)
              |                         |   
              "Button__btn___3T3BQ"     "Button__btn___2ZBj1"

Config

{
  "ava": {
    "files": [
      "src/Button.ava.spec.js"
    ],
    "source": [
      "src/Button.js"
    ],
    "concurrency": 5,
    "failFast": true,
    "tap": false,
    "verbose": true,
    "require": [
      "babel-register"
    ],
    "babel": "inherit"
  }
}

Command-Line Arguments

NODE_ENV=test CONFIG=$(pwd)/webpack.config.test.js BABEL_DISABLE_CACHE=1 ava

Relevant Links

• Github Link
• Travis CI Link

Environment

Node.js v6.2.0
darwin 15.2.0
ava 0.16.0
npm 3.8.9

[tw0517tw]

Got same result with

Node.js v6.5.0
win32 10.0.14393
ava 0.16.0
npm 3.8.7

[chentsulin]

@sindresorhus @istarkov Any thoughts?

[kpman]

@sotojuan Do you have any idea about this issue?

[sotojuan]

I really don't know as I don't use CSS Modules or even test my React apps much :p I tried running tests serially with concurrency=1 and it still doesn't work.

Maybe @kentcdodds @MoOx might know, not sure. I'll keep looking into it.

[MoOx]

I were not using babel webpack plugin & were using ignore-styles package.

[istarkov]

https://github.com/istarkov/babel-plugin-webpack-loaders/blob/master/README.md#important-note

[novemberborn]

@istarkov are you implying you're no longer supporting babel-plugin-webpack-loaders? That'd be totally fine of course, but I suspect you may be the only person that can provide insight here. Could you let me know if you can't? If that's the case I'll close this issue.

[istarkov]

@novemberborn I still use it, and not for testing only, so project is not 100% dead, something like 99% dead. But I have no idea why this issue is here ;-) IMO some misconfiguration or something like this, but without having access to real project I can't say much.

[sotojuan]

I tried limiting concurrency to 1 and making the test serial and it still failed (thought it was a concurrency thing).

[nfcampos]

for css modules i use css-modules-require-hook (e.g. ava -r css-modules-require-hook/preset) and it works ok

[sotojuan]

@chentsulin Let met know if ^ works for you.

[chentsulin]

@istarkov There is a demo repo for this issue (minimal reproduce example) just keep configuration same as my real project:

• Github Link
• Travis CI Link

Maybe I did something wrong?

I will remove babel-plugin-webpack-loaders in my tests, but I'm curious why behavior differences between mocha and ava, maybe there is a potential bug here.

[novemberborn]

Closing due to inactivity.