I'm facing an issue with my Mocha tests in Typescript, I fear it is related to Babel, but I am really not sure what's happening.
Essentially, I have a function that is being exported in a file
// src/my-ts-lib/tests/components/factoryMocks/componentConfigMocks.ts
...
export function getRandomConfig(type?: string): ComponentConfig {
const randomComponentType = type || randomType();
return {
type: randomComponentType,
config: configLibrary[randomComponentType]
}
}
And being imported in another, which is being called by a test:
// src/my-ts-lib/tests/components/RouteComponent/mocks/routeMocks.ts
...
import { getRandomConfig } from '../../factoryMocks/componentConfigMocks';
..
export const getSingleRouteConfigMock = (componentType?: string): RouteProps => {
const defaultComponentType = 'PageLayout';
return {
childComponent: {
type: componentType || defaultComponentType,
config: getRandomConfig(componentType || defaultComponentType)
},
pageName: randomString(),
path: randomString(),
};
};
...
When running the tests, I get the following error:
RouteCompnent/mocks/routeMocks.ts:10
config: getRandomConfig(componentType || defaultComponentType),
^
TypeError: componentConfigMocks_1.getRandomConfig is not a function
at Object.exports.getSingleRouteConfigMock (/Users/.../routeMocks.ts:10:44)
If I comment the call and console.log(getRandomConfig)
I can see that it is undefined
. I do not know why this is happening. What's even weirder is that, in subsequent tests that call getSingleRouteConfigMock
, this same console.log
correctly outputs the function, meaning that it has been exported then.
I've fiddled around with Babel, Mocha, and Typescript configs but have had no success.
Here's the Babel config:
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
The Mocha config:
mocha.opts
--require ts-node/register
--watch-extensions ts tsx
--require source-map-support/register
--recursive
--require @babel/register
--require @babel/polyfill
src/**/*.spec.**
And the Typescript config:
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": false,
"module": "commonjs",
"target": "es6",
"jsx": "react"
},
"include": [
"./src/**/*"
],
"exclude": [
"./src/**/*.spec.ts",
"./src/my-ts-lib/components/**/*.spec.tsx",
"./src/my-ts-lib/test-helpers/*"
],
}
And the relevant sections of the package.json
...
"dependencies": {
...
"@babel/polyfill": "7.2.x",
...
},
"devDependencies": {
"@babel/core": "7.2.x",
"@babel/preset-env": "7.2.x",
"@babel/preset-react": "7.0.x",
"@babel/register": "7.0.x",
"babel-loader": "8.x",
"mocha": "3.2.x",
...
}
I found out I have a circular dependency. That's why this was not working.