The path to my styled objects is correct, however not sure why I'm getting the following error:

Cannot find module '../../shared/models' from 'Astronaut.tsx'

import { moonHoldings } from '../../shared/models';

My simple Jest test:

import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';

// @ts-ignore (works with .tsx)
import Astronaut from '../Astronaut.tsx';

describe('<Astronaut /> component', () => {
  describe('should render', () => {
    const wrapper = shallow(<Astronaut showLogo={true} />);
    it ('should render a component matching the snapshot', () => {
      const tree = toJson(wrapper);
      expect(tree).toMatchSnapshot();
      expect(wrapper).toHaveLength(1);
    });
  });
});

The Astronaut component

import React from 'react';

import { moonHoldings } from '../../shared/models';  // <-- The problem
import { astronaut } from '../../styles'; // <-- This works

const { AstronautContainer, Heading } = astronaut;

interface LogoCheck {
  showLogo: boolean;
}

export default (showLogo: LogoCheck) =>  (
  <AstronautContainer>
    { showLogo.showLogo === true ? <Heading>{moonHoldings}</Heading> : null }
    <img src="static/astronaut.png" alt="astronaut" />
  </AstronautContainer>
);

The Jest config section of my Package.json

"jest": {
  "setupTestFrameworkScriptFile": "<rootDir>/jest.setup.js",
  "testPathIgnorePatterns": [
    "<rootDir>/.next/",
    "<rootDir>/node_modules/"
  ],
  "transform": {
    "\\.(gql|graphql)$": "jest-transform-graphql",
    ".*": "babel-jest",
    "^.+\\.js?$": "babel-jest"
  },
  "moduleFileExtensions": [
    "js",
    "json",
    "ts",
    "tsx"
  ],
  "modulePaths": [
    "<rootDir>/components/",
    "<rootDir>/pages/",
    "<rootDir>/shared/"
  ]
}

And my folder structure:

The path to my styled objects is correct, however not sure why I'm getting the following error:

Cannot find module '../../shared/models' from 'Astronaut.tsx'

import { moonHoldings } from '../../shared/models';

My simple Jest test:

import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';

// @ts-ignore (works with .tsx)
import Astronaut from '../Astronaut.tsx';

describe('<Astronaut /> component', () => {
  describe('should render', () => {
    const wrapper = shallow(<Astronaut showLogo={true} />);
    it ('should render a component matching the snapshot', () => {
      const tree = toJson(wrapper);
      expect(tree).toMatchSnapshot();
      expect(wrapper).toHaveLength(1);
    });
  });
});

The Astronaut component

import React from 'react';

import { moonHoldings } from '../../shared/models';  // <-- The problem
import { astronaut } from '../../styles'; // <-- This works

const { AstronautContainer, Heading } = astronaut;

interface LogoCheck {
  showLogo: boolean;
}

export default (showLogo: LogoCheck) =>  (
  <AstronautContainer>
    { showLogo.showLogo === true ? <Heading>{moonHoldings}</Heading> : null }
    <img src="static/astronaut.png" alt="astronaut" />
  </AstronautContainer>
);

The Jest config section of my Package.json

"jest": {
  "setupTestFrameworkScriptFile": "<rootDir>/jest.setup.js",
  "testPathIgnorePatterns": [
    "<rootDir>/.next/",
    "<rootDir>/node_modules/"
  ],
  "transform": {
    "\\.(gql|graphql)$": "jest-transform-graphql",
    ".*": "babel-jest",
    "^.+\\.js?$": "babel-jest"
  },
  "moduleFileExtensions": [
    "js",
    "json",
    "ts",
    "tsx"
  ],
  "modulePaths": [
    "<rootDir>/components/",
    "<rootDir>/pages/",
    "<rootDir>/shared/"
  ]
}

And my folder structure:

• javascript
• reactjs
• typescript
• jestjs
• next.js

3 Answers 3

You need to do little configuration for your jest test. Adding this snippet to your package.json should allow you to take your custom name and map it to your actual folder:

"moduleNameMapper": {
  "^@fooBar/(.*)": "<rootDir>/src/barFoo/$1"
},

In my case, I got this error in a lot of instances inside my test file and the solution was to use file paths based mapping in the moduleNameMapper option inside my jest.config file. This helps us to map our absolute paths with their corresponding relative ones.

For example, if you are getting this error -

  ● Test suite failed to run
                                                                                                                                                             
    Cannot find module 'jsroot/io' from 'src/some-file.ts'

Adding this should work -

moduleNameMapper: {
    // 'absolute-path': 'relative-path'
    'jsroot/io': '<rootDir>/node_modules/jsroot/',
},

where <rootDir> is the root of the directory containing your Jest config file or the package.json.

Ok I just fixed this by created an index file inside of the /shared folder and then exporting out the models that way (Though it should have still worked without the index file):

import { moonHoldings } from '../../shared';

And the index.js:

export { moonHoldings, nomicsLink } from './copy';