test-utils

test-utils copied to clipboard

When I tried to use the library I got this error:

If I only use jest or testing library they do work, I am quite confused. Any ideas?

This is my jest.config.js:

module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^@atoms/(.*)$': '<rootDir>/components/common/atoms/$1',
    '^@molecules/(.*)$': '<rootDir>/components/common/molecules/$1',
    '^@organisms/(.*)$': '<rootDir>/components/common/organisms/$1',
    '^@checkout/(.*)$': '<rootDir>/components/private/checkout/$1',
    '^vue$': 'vue/dist/vue.common.js'
  },
  moduleFileExtensions: ['js', 'vue', 'json'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  collectCoverage: true,
  transformIgnorePatterns: [
    'node_modules/(?!(nuxt-i18n)/)',
    'node_modules/(?!(nuxt-webfontloader)/)',
    'node_modules/(?!(nuxt-test-utils)/)'
  ],
  testEnvironment: 'jsdom',
  preset: '@nuxt/test-utils'
}

This is my package.json:

 "dependencies": {
    "@adyen/adyen-web": "^4.2.3",
    "@bugsnag/js": "^7.1.1",
    "@bugsnag/plugin-vue": "^7.1.1",
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/dayjs": "^1.3.0",
    "@nuxtjs/gtm": "^2.3.2",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/router": "^1.5.0",
    "@nuxtjs/svg-sprite": "^0.4.10",
    "@tailwindcss/aspect-ratio": "^0.2.0",
    "@tailwindcss/forms": "^0.3.2",
    "@tailwindcss/typography": "^0.4.0",
    "cookie-universal-nuxt": "^2.1.4",
    "core-js": "^2.6.0",
    "cross-env": "^5.2.0",
    "dotenv": "^8.2.0",
    "eslint-loader": "^4.0.2",
    "express": "^4.16.4",
    "jsdom": "^16.4.0",
    "lozad": "^1.15.0",
    "node-fetch": "^2.6.1",
    "nuxt": "2.15.4",
    "nuxt-feature-toggle": "^1.0.1",
    "nuxt-font-loader-strategy": "^1.1.1",
    "nuxt-i18n": "^6.15.4",
    "nuxt-jsonld": "^1.4.10",
    "nuxt-webfontloader": "^1.1.0",
    "v-click-outside": "^3.0.1",
    "v-clipboard": "^2.2.3",
    "vue-debounce": "^2.5.6",
    "vue-glide-js": "^1.3.14",
    "vue-gtm": "^2.3.1",
    "vue-slider-component": "^3.1.4",
    "vue-social-sharing": "^3.0.0-beta.11",
    "vue-toastification": "^1.7.6",
    "vue-vimeo-player": "^0.1.0",
    "vuelidate": "^0.7.5"
  },
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/preset-env": "^7.15.0",
    "@babel/plugin-transform-runtime": "^7.15.0",
    "@nuxt/test-utils": "^0.2.2",
    "@nuxtjs/eslint-config": "^5.0.0",
    "@nuxtjs/eslint-module": "^3.0.1",
    "@nuxtjs/tailwindcss": "^4.1.2",
    "@testing-library/vue": "^5.8.2",
    "@vue/test-utils": "^1.1.2",
    "babel-eslint": "^10.0.1",
    "babel-jest": "26",
    "eslint": "^7.14.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "jest": "26",
    "node-sass": "^4.14.1",
    "nodemon": "^1.18.9",
    "playwright": "^1.14.1",
    "postcss": "^8.2.9",
    "prettier": "^1.19.1",
    "sass-loader": "10.1.1",
    "vue-jest": "^4.0.0-rc.1"
  }
}

My .babelrc:

{
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "node": "current"
            }
          }
        ]
      ]
    }
  }
}

I am trying to use this test:

import { createPage, setupTest } from '@nuxt/test-utils'

describe('browser', () => { setupTest({ browser: true })

it('renders the index page', async () => { const page = await createPage('/') const html = await page.innerHTML('body')

expect(html).toContain('Something') }) })

@Angel21PC Try creating two separate jest.config files for Vue Test Utils and for Nuxt Test Utils. They need different setup.

Simply create config with just preset: '@nuxt/test-utils' and use it for the test you gave as an example. This might not solve the problem, but will improve performance for sure.

Your transformIgnorePatterns are overriding each other. Most probably this is the the problem. Try this:

transformIgnorePatterns: [
  'node_modules/(?!(nuxt-webfontloader|nuxt-i18n)/)'
]

I've made the changes but it still doesn't work :( , and how does nuxt/test-utils know what jest configuration he need?

If your goal is end-to-end testing of an app using playwright, I would suggest using their own test runner instead of jest. Because:

• it is faster
• very similar API, easy to grasp
• is able to run test concurrently in all three browsers: npx playwright test --browser=all
• does not suffer from transformIgnorePatterns issue (unfortunately jest is ignorant with this one)
• uses TypeScript without any additional setup
• plus all the goodies one could get from Playwright (for instance, incredibly easy to mock network requests)

It needs very simple config for Nuxt. I will drop the config here bit later, but you can find out everything easily starting from here – https://playwright.dev/docs/intro#installation.

Jest is very good for unit testing, but for web apps I would recommend Playwright’s Test Runner. The thing is that Jest completely overrides Node’s require mechanics. Jest reads all dependencies using readFile, compiles, caches them internally, etc. Great for unit tests with dependency mocks and spies, but there is no need of that in e2e test. That’s why Playwright’s Test Runner does better – less overhead (and less headache too).

(Playwright’s Test Runner does not need Test Utils, of course.)

Here is the promised config for Playwright Test Runner:

// playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test'

const config: PlaywrightTestConfig = {
  webServer: {
    command: 'yarn build && yarn start',
    port: 3000,
    timeout: 120 * 1000,
    reuseExistingServer: !process.env.CI
  }
}

export default config

Simple. Just wanted to highlight the command line. Adjust it to your needs. Let Playwright know where to find your web app (port number), it will launch the server and will wait until it responds before testing. Docs

And test:

// foo-bar.test.ts
import { test, expect } from '@playwright/test'

test('testing foo', async ({ page, baseURL }) => {
  await page.goto(baseURL + '/foo')

  const html = await page.innerHTML('body')
  expect(html).toContain('Hello foo!')
})

test('testing bar', async ({ page }) => {
  await page.goto('/bar')

  const html = await page.innerHTML('body')
  expect(html).toContain('Hello bar!')
})

You can use baseURL to retrieve servers address. Or omit it (second example), because baseURL is already set for the default context and page. baseURL docs

And happy testing!

PS I was trying to recreate your Nuxt setup, but it is really complex. Nuxt modules did not cause trouble, but I could not test Tailwind, not sure what you do with Express, etc. Could spend few minutes simply to give Playwright Test Runner a try? Really curious to hear if it works for you.

Thanks for the help, I have followed your advice and decide to use playwright. But if anyone knows a solution to my initial problem, I would appreciate any comments that shed some light on it.

@Angel21PC I got around the import error last night by adding a line to my jest.config.js.

module.exports = {
  testEnvironment: 'jsdom',
  ...

That was okay, I was able to write some passable tests.

If you want it on test level e.g. mytest.spec.ts you could also use

/**
 * @jest-environment jsdom
 */

Additionally I had to add <rootDir> if you work in a monorepo

transformIgnorePatterns: [
  '<rootDir>/node_modules/(?!(nuxt-webfontloader|nuxt-i18n)/)'
]

Here are some repositories I got influenced for my test setup:

https://github.com/nuxt/image https://github.com/nuxt/components Example for monorepo: https://github.com/regenrek/nujek/tree/v3 You could also run nuxt in a container to avoid such issues: https://github.com/regenrek/nuxt-playwright-template (Hint: Not maintained)

I would appreciate any comments that shed some light on it.

@Angel21PC It is complicated. See https://github.com/nuxt/test-utils/issues/166#issuecomment-924703773 for some hints on the root of this problem.