hubertlepicki

hubertlepicki

"phoenix" 1.6.0 NPM package cannot be imported in jest

I am using a Github Actions build where in parallel I build JavaScript assets and test them, and also Elixir assets.

For that reason, the project is using the packages published to npmjs.org and not the packages loaded from “deps”. My apps/ui/assets/package.json relevant entries look like this:

  "dependencies": {
    "phoenix": "^1.6.0",
    ...
   "jest": "^27.0.0"
   ...
  }

While the project builds with webpack properly, I have a problem running tests with Jest. it cannot import things from “phoenix” package and crashes like this:

  ● Test suite failed to run

    Cannot find module 'phoenix' from 'js/app/client.js'

    Require stack:
      js/app/client.js
      js/app/notes.js
      js/app/notes.test.js

      1 | import "unfetch/polyfill";
      2 |
    > 3 | import { Socket as PhoenixSocket } from "phoenix";

Version 1.5.9 worked fine in both Jest and with Webpack.

I have tried Node versions 12-16, no change, I think Jest for some reason cannot load “phoenix” package but I don’t understand how to fix this.

Ideas?

Most Liked

hubertlepicki

hubertlepicki

Yes, I think that’s right.

Phoenix is now being built as ESM package: Switch to esbuild, package js as ESM by mveytsman · Pull Request #4372 · phoenixframework/phoenix · GitHub

and, while Webpack can understand them, Jest doesn’t seem to understand them just yet, not properly at least.

There’s an ongoing discussion on Jest on how to support it, and people provided a number of workarounds but so far no joy for me: Support package exports in `jest-resolve` · Issue #9771 · jestjs/jest · GitHub

LostKobrakai

LostKobrakai

Phoenix switched to publishing esm files for bundlers. Maybe jest has problems with that.

hubertlepicki

hubertlepicki

@gpreston I have sent a PR to Phoenix itself here: Build CommonJS module along with ESM and IIFE by hubertlepicki · Pull Request #4512 · phoenixframework/phoenix · GitHub

AFAIK the fix still works and I am able to import “phoenix” still and run Jest tests. We also use it with React. Let me know if you have problems.

Where Next?

Popular in Questions Top

sergio
In Ruby, I can go: User.find_by(email: "foobar@email.com").update(email: "hello@email.com") How can I do something similar in Elixir? ...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
beno
I will often find my self writing things similar to: case some_value do nil -> something() "" -> something() _ -> somethi...
New
marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
Tee
can someone please explain to me how Enum.reduce works with maps
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
itssasanka
Hi all, Trying to get some more clarity over utc_datetime and naive_datetime for Ecto: The documentation above suggests that while ...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New

Other popular topics Top

sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 29603 241
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 36352 110
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
axelson
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!) This post collects co...
239 48342 226
New
AstonJ
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement