Dear Community
I have a React JS application with a set of components. Some are simple components which render HTML whereas others are nested components which use other components in it.
Here is the example - Header.jsx component uses the HtmlRow component referenced by a alias.
<pre lang="Javascript">
import React from 'react';
import HtmlRow from '@repo/libraryv3/HtmlRow';
.
.
render() {
return (
<div className="someclasss">
<HtmlRow>
<HtmlCol xs={12} >
The path
'@repo/libraryV3/
is defined as a alias in package.json which actually maps to the physical path of the repository.
"devDependencies": {
"@repo/libraryv3": "git+https://git.mycompany.com/repositories/libraryV3.git#branch1",
Now here is the details of the issue -
1. I am using jest & enzyme for writing unit tests for these components which works perfectly if it is a simple component which does not refer any other component in it.
2. However when I use a component like the Header.jsx for unit testing which in turn refers HtmlRow component , and render it using 'shallow' or 'mount',the underlying test framework is unable to resolve the alias and it throws error -
Cannot find module './HtmlRow/HtmlRow' from 'header.spec.js'
I am open to use any packages that solves the issue.
What I have tried:
1. What I was able to understand is that the test framework is unable to resolve the alias defined in package.json.
2. I tried using the jest-resolver mentioned here. However it gives me the same 'Module not found error'
[
^NPM jest resolver]
3. Also tried various solutions using nock, redux-store etc.
Any suggestions, solutions are appreciated