Ts-jest: TypeError: classnames is not a function when mapCoverage: true

Created on 11 May 2017 · 14Comments · Source: kulshekhar/ts-jest

Issue

Seeing some TypeError when mapCoverage: true.
I managed to reproduce the error with classnames when enabling mapCoverage, but in my full project even removing mapCoverage doesn't work.

I have to change all imports from import React = require('react') to import * as React from 'react' too.

Expected behavior

work like old versions

Link to a minimal repo that reproduces this issue

https://github.com/fliptaboada/ts-jest-import-test

Source

fliptaboada

Most helpful comment

I needed to leave "allowSyntheticDefaultImports": true and setting "skipBabel": true caused new issues (as suggested here)

What finally worked for me was to change...

import * as classNames from 'classnames';

...to

import classNames from 'classnames';

Hope that helps someone else.

cdeutsch on 17 Oct 2017

👍12

All 14 comments

What do you expect the result of running test on the linked repo should be? It looks fine at first look

kulshekhar on 11 May 2017

The result should be the same as your example of Button, pass on Button and give error on BadButton.
I'd expect the import * as classnames from 'classnames' and then const classes = classnames({'button': true}) to actually work, because when running the app it works, but not in the test environment, it gives me the TypeError described.
If you disable mapCoverage it works as expected.

fliptaboada on 12 May 2017

When I tested it, it worked fine - 1 test passed and 1 failed. Can you add a travis job to the repo so that we have a common reference point?

kulshekhar on 12 May 2017

Maybe it's something in my environment then, will try to add a travis job on the next days.

fliptaboada on 17 May 2017

I think I found the problem.
Using "allowSyntheticDefaultImports": true in tsconfig.json is causing the problem in my full project, but only when npm test.
Our code do not use ES6 imports in TS, we use import React = require("react");, so removing this parameter fixed the issue.

fliptaboada on 2 Jun 2017

👍2

I needed to leave "allowSyntheticDefaultImports": true and setting "skipBabel": true caused new issues (as suggested here)

What finally worked for me was to change...

import * as classNames from 'classnames';

...to

import classNames from 'classnames';

Hope that helps someone else.

cdeutsch on 17 Oct 2017

👍12

I fix it with: const classnames = require('classnames');

aoto on 8 Mar 2018

👍1

If you are using typescript, this fixed it for me: In your tsconfig.json compilerOptions:

"compilerOptions": {
    // ...
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },

cavalos0086 on 27 Sep 2018

esModuleInterop automatically sets allowSyntheticDefaultImports so you can remove it ;-)

huafu on 27 Sep 2018

True! but for some reason when I removed it, my @types fails.
Module '".../node_modules/@types/lodash/merge"' has no default export. Any ideas?

cavalos0086 on 27 Sep 2018

lodash is a mess to import correctly, especially if you then use webpack and want to do treeshaking. If it's the case I'll strongly recommend to use lodash.merge, lodash.memoize, ... packages (install the ones you need), else you'll end up with a huge bundle.

Anyway, coming back to your issue, what's your tsconfig and jest config? Also what does the import line look like?

huafu on 28 Sep 2018

esModuleInterop

When i use this ts config, it still has error of TypeError: classnames is not a function,Until I used the following configuration
"noImplicitAny": false,
The following is the complete configuration in tsconfig.json
{ "compilerOptions": { "target": "es5", "module": "commonjs", "jsx": "react", /*suport react*/ "sourceMap": true, "noImplicitAny": false, "strict": true, "allowSyntheticDefaultImports": true }, "exclude":[ "node_modules" ] }

staticdeng on 28 Sep 2018

👎1 👍1

Need Help - Getting error while jest testing.
error: - Test suite failed to run
TypeError: classNames.bind is not a function

TestComponent.tsx
import * as React from 'react';
import * as classNames from 'classnames/bind';
var styles = {
foo: 'abc',
bar: 'def',
baz: 'xyz'
};
const cx = classNames.bind(styles);

interface Props {
title: string;
}
const TestComponent: React.SFC = props => {
return

;
};

export default TestComponent;

TestComponent.test.tsx
import * as React from 'react';
import TestComponent from './TestComponent';
import { shallow } from 'enzyme';

describe(__filename, () => {
const props = {
title: 'Test title',
};
it('converts using shallow', () => {
shallow();
});

});

tsconfig.josn
{
"compilerOptions": {
"module": "esnext",
"target": "es5",
"lib": [
"es6",
"dom"
],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": false,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"skipLibCheck": true,
"baseUrl": "./src",
"allowSyntheticDefaultImports": true,
},
"exclude": [
"node_modules",
"es",
"lib",
"build",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts"
]
}