Redwood: imports not working when done through tests

[Tobbe]

Reproduce

Install fresh RW 0.14
yarn rw g page post
yarn rw g layout post

Modify PostPage to include PostLayout, and wrap everything in the layout

import { Link } from '@redwoodjs/router'
import PostLayout from 'src/layouts/PostLayout'

const PostPage = () => {
  return (
    <PostLayout>
      <h1>PostPage</h1>
      <p>Find me in "./web/src/pages/PostPage/PostPage.js"</p>
      <p>
        My default route is named "post", link to me with `
        <Link to="post">routes.post()</Link>`
      </p>
    </PostLayout>
  )
}

export default PostPage

Run all tests with yarn rw test

Expected

All tests pass

Actual

 FAIL   web  web/src/pages/PostPage/PostPage.test.js
  ● Test suite failed to run

    Cannot find module '../../../../src/layouts/PostLayout' from 'src/pages/PostPage/PostPage.js'

    Require stack:
      src/pages/PostPage/PostPage.js
      src/pages/PostPage/PostPage.test.js

      1 | import { Link } from '@redwoodjs/router'
    > 2 | import PostLayout from 'src/layouts/PostLayout'
        | ^
      3 |
      4 | const PostPage = () => {
      5 |   return (

      at Resolver.resolveModule (../node_modules/jest-resolve/build/index.js:308:11)
      at Object.<anonymous> (src/pages/PostPage/PostPage.js:2:1)

 PASS   web  web/src/layouts/PostLayout/PostLayout.test.js (11.293 s)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        13.451 s
Ran all test suites.

Note

I need #869 first, before I can actually get this far.

Actually running the app with yarn rw dev works fine. No problems with the imports

[peterp]

@RobertBroersma Good day sir, do we need to install babel-jest?

[RobertBroersma]

@peterp I _think_ this is a Windows issue, because it WorksOnMyMachine™

I had this issue before when trying some weird Jest stuff with passing configs through the Jest cli, but with this new defining configs in the app repo business the error is gone for me. Back then I fixed it by replacing the ./src aliases in babel-preset.js with something absolute like require.resolve(redwoodPaths.web.src).

I've seen some weird shit with Jest and Babel though. I get this exact issue when trying to use an umbrella Jest config in the Redwood repo itself. None of the answers found by Google-ing have worked unfortunately.

EDIT: I think there would be stuff that fails earlier than this import if not having babel-jest was the issue. I think Jest tries to use the babel-config.js in the root folder.

[Tobbe]

Anything I can do to help debug this?

[RobertBroersma]

@Tobbe Does this also happen in your API tests?

My above comment and your logs are all the info I have I'm afraid. I think this requires a bit of a deep dive and some trial and error to figure out. If you'd want to pick this up that would be awesome! If not I'll take a look when I get the time, but if all goes well I'll be on vacation starting tomorrow.

If you want a quick workaround I guess you could make those imports relative, but... we don't want that...! 😒

[Tobbe]

It happens with the API tests too

 FAIL   node  api/src/services/posts/posts.test.js
  ● Test suite failed to run

    Cannot find module '../../../../src/lib/db' from 'src/services/posts/posts.js'

    Require stack:
      src/services/posts/posts.js
      src/services/posts/posts.test.js

    > 1 | import { db } from 'src/lib/db'
        | ^
      2 |
      3 | export const posts = async () => {
      4 |   return db.post.findMany()

      at Resolver.resolveModule (../node_modules/jest-resolve/build/index.js:308:11)
      at Object.<anonymous> (src/services/posts/posts.js:1:1)

And this is posts.js

import { db } from 'src/lib/db'

export const posts = async () => {
  return db.post.findMany()
}

export const post = ({ id }) => {
// ...

[Tobbe]

A relative import does indeed work

import { db } from '../../lib/db'

export const posts = async () => {
  return db.post.findMany()
}

export const post = ({ id }) => {
// ...

[peterp]

It looks like jest is incorrectly determining the src alias from babel-plugin-module-resolver; I think we might need to do something like this: https://www.robinwieruch.de/babel-module-resolver-jest

[RobertBroersma]

@peterp Hmmm I would've expected to _not_ need that when using Babel, but let's give that a try!

[Tobbe]

I'm still getting this same error

$ yarn rw info
yarn run v1.22.4
$ C:\Users\tobbe\dev\redwood\v14-test\node_modules\.bin\rw info

  System:
    OS: Windows 10 10.0.18362
  Binaries:
    Node: 14.4.0 - ~\AppData\Local\Temp\yarn--1595794227148-0.08001366604539828\node.CMD
    Yarn: 1.22.4 - ~\AppData\Local\Temp\yarn--1595794227148-0.08001366604539828\yarn.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    @redwoodjs/core: ^0.14.1-canary.26 => 0.14.1-canary.26+10aff539

Done in 3.93s.

[peterp]

Could you run yarn jest --clearCahe and try again?

[Tobbe]

I tried. Didn't help. I still get the same error message

[peterp]

@Tobbe Could you give me access to your repo?

[Tobbe]

Didn't have anything up on Github, so I just now created a new project and pushed that https://github.com/Tobbe/v14
<TestPage> has a relative import of <TestLayout> that doesn't work when running yarn rw test

[peterp]

I've dug a bit more and I believe that we're hitting this issue: https://github.com/facebook/jest/issues/8006

I'll be opening a fix soon - but my gut feeling is that --projects are going to give us more trouble than they're worth in the short term. Let's see how it goes?