Make Jest ignore the .less import when testing

Question

Testing Components

I am trying to run some very simple tests on react components with Jest. I am running into problems because of this line at the top of my component file

import {} from './style.less';

The import here doesn't need to be tested and would ideally be ignored from the test.

Result of [npm test]

When the test is run via npm test I get the response

FAIL tests/app_test.js ● Runtime Error SyntaxError: Unexpected token { in file 'client/components/app/style.less'.

Make sure your preprocessor is set up correctly and ensure your 'preprocessorIgnorePatterns' configuration is correct: http://facebook.github.io/jest/docs/api.html#preprocessorignorepatterns-array-string If you are currently setting up Jest or modifying your preprocessor, try jest --no-cache. Preprocessor: node_modules/jest-css-modules. Jest tried to the execute the following preprocessed code: //some .less code

But if I comment out the less import line my test runs correctly.

Question

How can I get jest to skip over this line of code or ignore this import?

Check this solution http://stackoverflow.com/a/36137733/2765745 Worked for me. — Pavel Hasala, Feb 04 '17 at 18:38

score 25 · Answer 1 · answered Nov 25 '16 at 17:03

25

The only way I could get jest to ignore less files for me, other than manually mocking the .less file at the top of the test e.g.

jest.mock("../../src/styles.less", () => jest.fn());

Was to add the following to the package.json:

"jest": {
 "moduleNameMapper": {
  ".*\\.less$": "<rootDir>/pathToDummyFile/dummy.js"
  }
 },

Whenever your code tries to import a less file it will instead redirect the import to fetch an empty dummy file, which will avoid the unexpected token error you experienced.

answered Nov 25 '16 at 17:03

Andrew

769
7
16

This worked. Special mention of `` react document states that if we are pointing to a file then `` should be used which resolves to the absolute path to the `dummy.js` file. I put this configuration into my `jest.config.js` file. – Mr. Doomsbuster Dec 30 '17 at 00:39
This is a correct answer in my opinion, @joe-lloyd please consider marking it appropriately if you're satisfied. – tibalt Dec 10 '18 at 12:25

score 14 · Answer 2 · edited Sep 24 '21 at 18:53

14

If you still have this issue, try to add the following config to your jest.config.json file:

"transform": {
  "^.+\\.(css|less)$": "./styleMock.js"
}

Here, in your styleMock.js you're creating a transformer which will transform your .less files like this:

module.exports = {
  process() {
    return ''
  }
}

edited Sep 24 '21 at 18:53

Soviut

88,194
49
192
260

answered Sep 12 '17 at 20:28

Art713

485
4
14

4

This does not work. by doing this, Jest complains about the import statements in React components. ```import App from '../App' ^^^^^^ SyntaxError: Unexpected token import``` – Mr. Doomsbuster Dec 30 '17 at 00:30
You will also need to add `"^.+\\.js$": "babel-jest",` so that normal JS files are transformed correctly. – cdrini May 11 '22 at 17:37

score 9 · Answer 3 · answered Apr 25 '19 at 16:16

A little late to the party but maybe this will help someone today. Use jest-transform-stub.

In your Jest config, add jest-transform-stub to transform non JavaScript assets you want to stub:
{
  "jest": {
    // ..
    "transform": {
      "^.+\\.js$": "babel-jest",
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
    }
  }
}
FAQ

My module isn't being transformed

Jest doesn't apply transforms to node_modules by default. You can solve this by using moduleNameMapper:
{
  "jest": {
    // ..
    "moduleNameMapper": {
      "^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
    }
  }
}

score 1 · Answer 4 · answered May 12 '16 at 15:59

1

I've solved same problem with ignore-styles(https://github.com/bkonkle/ignore-styles). I've used this lib with mocha but I think it should be ok with jest.

answered May 12 '16 at 15:59

Zapix

112
4

1

Doesn't work for me. Tried it as outlined in the readme, but no success. – vkjb38sjhbv98h4jgvx98hah3fef Sep 30 '16 at 08:12

score 0 · Answer 5 · answered Sep 14 '22 at 08:38

A method I'm using for several years without noticing any problems is via the identity-obj-proxy package:

  moduleNameMapper: {
    // Use proxy to mock CSS Modules. Lookups on the styles object will be returned as-is
    // (e.g. styles.foobar === 'foobar')
    '\\.(css|scss|less)$': 'identity-obj-proxy',
  },

It's somewhat similar to the jest-transform-stub method (outlined in this answer) but has a benefit of actually displaying something meaningful - there is a nice example on the package's GitHub readme how that does look like in praxis (in a snapshot).

Make Jest ignore the .less import when testing

Testing Components

Result of [npm test]

Question

5 Answers5

FAQ

Linked