Standard /web Tests Fail

[AryanJ-NYC]

Hey! First of all, great job with Redwood. This definitely has tons of potential and I'd love to help out in any way I could.

In messing with #256, I just couldn't seem to get the /web tests to pass with the app built from the tutorial. I would get:

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

    Cannot find module '@redwoodjs/web' from 'ContactPage.js'

    However, Jest was able to find:
        './ContactPage.js'
        './ContactPage.test.js'

    You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently
 ['js', 'json', 'jsx', 'ts', 'tsx', 'node'].

    See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

    > 1 | import {
        | ^
      2 |   FieldError,
      3 |   Form,
      4 |   Label,

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

for just about every test.

Here are some steps to reproduce:

1. git clone https://github.com/AryanJ-NYC/redwoodjsblogexample
2. yarn install && yarn rw db generate && yarn rw test web
3. Watch the tests fail. 😢

[AryanJ-NYC]

I should add that I think I can probably handle this but would love a nudge in the right direction.

For an idea in what I've tried (that didn't work), I thought it may have been the babel-preset.js. I noticed that the 'babel-plugin-module-resolver for web uses /src instead of getPaths().web.src but, alas, that was not it.

[thedavidprice]

@AryanJ-NYC grateful for your help here! So bummed the tests are failing spectacularly. Welcome to my own person config nightmare 😉 For the record, it’s good for the sanity to not go it alone. We’ll figure this out! (With some help from @peterp as well.)

I don’t have time for a full deep dive today, but I can attempt to provide some background. We handle web/ config primarily through Webpack, which is where the auto-importing happens and settings, e.g. instead of looking for index.js inside a folder we look for a file with the same name as the folder. Jest isn’t aware of our Webpack config, but we can make Jest be Babel aware, especially with the help of Jest setting process.env.NODE_ENV to 'test’ when it runs. Take a look at these two PRs including the current work to get Jest passing. Note: there are also some import aspects for local dev setup required in order to work across packages and CRA together (some docs on how to do this might be helpful in the near-term).

• Add jest config and cli for running app tests #152
• add babel auto import to jest test section of config #193

If you look at the file packages/core/config/babel-preset.js you’ll see we are only applying these specific settings to the case when Jest is running and NODE_ENV = ‘test’.

Thoughts on currently failing tests

I stepped through the Tutorial up to the point of “A Second Page and a Link” to see when the errors start showing up. And as soon as I did, I’m also getting the Cannot find module '@redwoodjs/router' from ‘HomePage.test.js’. The Home and About pages now include the import import { Link, routes } from '@redwoodjs/router’.

I think our Webpack import settings have not been correctly (or fully) applied to the Babel config used by Jest. Where I’d start to diagnose is spending time with Webpack to see what else might be missing.

Also, no need to beat your head against this if things aren’t budging. Simply running the tests and reporting issues is a great start for us!

[thedavidprice]

@peterp here’s my code attempt to fix jest.config.web.js

const path = require('path')
const { getPaths } = require(‘@redwoodjs/internal')

module.exports = {
  resolver: 'jest-directory-named-resolver',
  rootDir: path.join(getPaths().base, 'web'),
}

Runs tests but same type error:

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

    Cannot find module '@redwoodjs/router' from 'AboutPage.test.js'

      1 | import { render, cleanup } from '@testing-library/react'
    > 2 | import { Link, routes } from '@redwoodjs/router'
        | ^
      3 | 
      4 | import AboutPage from './AboutPage'
      5 | 

[thedavidprice]

Current fix in process is happening in this PR #290

[peterp]

Closed by #290

[thedavidprice]

Re-opening this as tests are still failing. I could be wrong here, but I believe #290 was the config we needed in order to proceed, however we still have some steps to get tests working. (See next comments.)

[peterp]

Ah yeah. We need to change the way routes works. I'll bring this up in tomorrow's meeting.

[thedavidprice]

My local setup is using master branch with packages linked to a CRA app release v0.2.5.

Passing template tests

• component
• layout
• pages (note: there is an additional issue with page Routes, see last item below)

Failing vanilla template tests with output

1. Services

Using the posts.test.js created from the “Getting dynamic” section of tutorial:

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

    Cannot find module '/Users/price/Repos/xx-redwoodblog/api/src/config/db' from 'posts.js'

    However, Jest was able to find:
        './posts.js'
        './posts.test.js'

    You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'json', 'jsx', 'ts', 'tsx', 'node'].

    See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

       9 | }
      10 | 
    > 11 | export const createPost = ({ input }) => {
         |           ^
      12 |   return db.post.create({
      13 |     data: input,
      14 |   })

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

2. Cells

Using BlogPostsCell.test.js created during “Cells” section of tutorial. (Note: looks like failure from recent update to template in #290)

 FAIL  src/components/BlogPostsCell/BlogPostsCell.test.js
  ● Console

    console.error ../node_modules/jsdom/lib/jsdom/virtual-console.js:29
      Error: Uncaught [Error: Success(...): Nothing was returned from render. This usually means a return statement is missing. Or, 
to render nothing, return null.]

...

● BlogPostsCell › Success renders successfully

    Success(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return 
null.

      25 | 
      26 |   it('Success renders successfully', () => {
    > 27 |     render(
         |     ^
      28 |       <Success userExample={{ blogPosts: { objectKey: 'objectValue' } }} />
      29 |     )
      30 |     expect(

...

Failing tutorial tests with output

3. Pages

When adding routes/links to pages (as in the tutorial for Home and About), we run into and issue with Jest not having access to the ‘routes’ object. We’ll likely need to mock the routes object ourselves because it’s dynamically generated.

Current test fail output for AboutPage.test.js:

Error: Uncaught [TypeError: _router.routes.about is not a function]
          at reportException (/Users/price/Repos/xx-redwoodblog/node_modules/jsdom/lib/jsdom/living/helpers
/runtime-script-errors.js:62:24)

…

HomePage › renders successfully
    expect(received).not.toThrow()
    Error name:    "TypeError"
    Error message: "_router.routes.about is not a function"
           9 |           <ul>
          10 |             <li>
        > 11 |               <Link to={routes.about()}>About</Link>
             |                                ^
          12 |             </li>
          13 |           </ul>
          14 |         </nav>

...

[betocmn]

Hey @thedavidprice , just logging here that importing images as the example below also causes the tests to fail.

Are you guys planning on adding a generic mock for media assets via moduleNameMapper or is the idea to leave that to each project's customisation?

import logoImg from 'src/assets/img/logos/logo.png'

  ● Test suite failed to run

    /Users/redwood-project/web/src/assets/img/logos/logo.png:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){PNG
                                                                                             

    SyntaxError: Invalid or unexpected token

      3 | import HeaderProfile from 'src/components/Admin/HeaderProfile/HeaderProfile'
      4 | 
    > 5 | import logoImg from 'src/assets/img/logos/logo.png'
        | ^
      6 | 
      7 | const CSS = {
      8 |   navItem:

      at Runtime.createScriptFromCode (../node_modules/jest-runtime/build/index.js:1085:14)
      at Object.<anonymous> (src/components/Admin/HeaderDesktopNavbar/HeaderDesktopNavbar.js:5:1)```

[peterp]

@betocmn We're almost ready to merge this PR: #521 that adds that functionality.

[betocmn]

@betocmn We're almost ready to merge this PR: #521 that adds that functionality.

Just checked it now, it's looking amazing : ). Thanks so much!

[thedavidprice]

Foundationally fixed by #521

We'll need to re-audit and adjust templates, which is starting to happen for Cells here #629