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
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
Phoenix switched to publishing esm files for bundlers. Maybe jest has problems with that.
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.
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance









