question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

babel-jest can't handle template strings within a require statement in with --watch flag

See original GitHub issue

🐛 Bug Report

When running require within a block of code that contains a template string (e.g. require(images/${imageURL})), babel-jest fails to resolve the template string properly when running jest --watch. It works fine without the --watch flag.

To Reproduce

Run jest --watch with babel-jest set as the transformer on a file that contains the following:

const ImageLink = ({ linkPath, linkLabel, imageSource }: ImageLinkProps) => (
  <Link to={linkPath}>
    <img alt={`Navigation link to ${linkLabel}`} src={require(`$images/${imageSource}`)} />
    <span>{linkLabel}</span>
  </Link>
);

Expected behavior

The above code is valid and works without issue when transformed by babel-jest without the --watch flag. I expect it to work without issue with --watch set as well. However, I currently get the following error from jest (which in turn doesn’t run, due to a non-existent file):

Could not locate module $images/${imageSource} mapped as:
/home/thisissami/code/s2sFrontEnd/static/images/${imageSource}.

Please check your configuration for these entries:
{
  "moduleNameMapper": {
    "/^\$images(.*)/": "/home/thisissami/code/s2sFrontEnd/static/images$1"
  },
  "resolver": null
}

This clearly means that babel-jest is not resolving the template string within the require, and is rather treating the template string as a normal string. When changing the above code to the following, babel-jest transforms without issue with the --watch mode:

const ImageLink = ({ linkPath, linkLabel, imageSource }: ImageLinkProps) => {
  const src = `$images/${imageSource}`;

  return (
    <Link to={linkPath}>
      <img alt={`Navigation link to ${linkLabel}`} src={require(src)} />
      <span>{linkLabel}</span>
    </Link>
  );
};

Run npx envinfo --preset jest

Paste the results here:

  System:
    OS: Linux 4.15 Pop!_OS 18.04 LTS
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
  Binaries:
    Node: 10.8.0 - ~/.nvm/versions/node/v10.8.0/bin/node
    npm: 6.4.0 - ~/.nvm/versions/node/v10.8.0/bin/npm
  npmPackages:
    jest: ^23.5.0 => 23.6.0

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:14

github_iconTop GitHub Comments

3reactions
JJBocanegracommented, Sep 22, 2019

Using --watchAll works correctly.

1reaction
SimenBcommented, Aug 8, 2019

You can verify the above by running jest --only-changed (or jest -o for short) which does the same thing --watch does when it comes to VCS

Read more comments on GitHub >

github_iconTop Results From Across the Web

Jest - Could not locate module with dynamic import template ...
here's how I fixed it, the problem is that Jest for some reason, it complains when using template literals inside the dynamic import....
Read more >
Configuring Jest
The file will be discovered automatically, if it is named jest.config.js|ts|mjs|cjs|json . You can use --config flag to pass an explicit path to...
Read more >
Template literals (Template strings) - JavaScript | MDN
Any newline characters inserted in the source are part of the template literal. Using normal strings, you would have to use the following...
Read more >
babel-jest | Yarn - Package Manager
Usage. If you are already using jest-cli , add babel-jest and it will automatically compile JavaScript code using Babel.
Read more >
The React Scripts Start Command – Create-React-App NPM ...
These build tools are required because React's JSX syntax is a ... To run your React application, you need to turn your JSX...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found