I cant import with jest in vue - jestjs

im trying to learn testing but i get this problem. It seem that jest can not import modules. I have tried a lot of configurations but i couldn't solve it
Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
/home/alain-maza/Documentos/entrenamiento/vue/04-pokemon/node_modules/axios/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import axios from './lib/axios.js';
^^^^^^
SyntaxError: Cannot use import statement outside a module
> 1 | import axios from "axios";
| ^
2 |
3 | const pokemonApi = axios.create({
4 | baseURL: 'https://pokeapi.co/api/v2/pokemon'
this is my jest.config
module.exports = {
preset: '#vue/cli-plugin-unit-jest',
}
this is my babel.config
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}
and my package.json
{
"name": "04-pokemon",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"axios": "^1.0.0",
"core-js": "^3.8.3",
"vue": "^3.2.13"
},
"devDependencies": {
"#babel/core": "^7.19.3",
"#babel/preset-env": "^7.19.4",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-unit-jest": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/test-utils": "^2.0.0-0",
"#vue/vue3-jest": "^27.0.0-alpha.1",
"babel-jest": "^27.5.1",
"jest": "^27.0.5"
}
}
heklpme please! i have trried a lot of things

Related

Import HTML as string and test with Jest

I'm using sveltekit and I can't use the files api to import html templates. So I decided to import by writing a module that imports the content of the document as a string (described here).
// src/global.d.ts
/// <reference types="#sveltejs/kit" />
declare module '*.html' {
const content: string
export default content
}
So far so good, but now I need to test the code and jest can't interpret the code.
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
/home/developer/workspace/src/assets/html/confirm_email.html:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){<!DOCTYPE html>
^
SyntaxError: Unexpected token '<'
I don't understand how jest understands the .d.ts files... How do I get to test the code?
Do you install #babel/plugin-transform-runtime"?
I share my config for jest/svelte-jester..
I have:
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"$lib": ["src/lib"],
"$lib/*": ["src/lib/*"]
}
},
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"],
}
svelte.config.js
import vercel from '#sveltejs/adapter-vercel'
/** #type {import('#sveltejs/kit').Config} */
const config = {
kit: {
adapter: vercel(),
vite: {
define: {
'process.env': process.env,
},
},
},
transform: {
"^.+\\.svelte$": ["svelte-jester", { "preprocess": true }]
}
};
export default config;
babel.config.json
{
"presets": [
["#babel/preset-env", { "modules": "auto" }]
],
"plugins": ["babel-plugin-transform-vite-meta-env","#babel/plugin-transform-runtime"]
}
jest.config.js
export default {
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.svelte$": "svelte-jester",
},
"moduleFileExtensions": ["svelte", "js"],
"testEnvironment": "jsdom",
"setupFilesAfterEnv": ["#testing-library/jest-dom/extend-expect"]
}
and whole package.json
{
"name": "sveltekit",
"version": "0.0.1",
"scripts": {
"dev": "svelte-kit dev",
"build": "svelte-kit build",
"package": "svelte-kit package",
"preview": "svelte-kit preview",
"test": "jest src",
"test:watch": "npm run test -- --watch"
},
"devDependencies": {
"#babel/core": "^7.16.12",
"#babel/plugin-transform-modules-commonjs": "^7.16.8",
"#babel/plugin-transform-runtime": "^7.17.0",
"#babel/preset-env": "^7.16.11",
"#supabase/supabase-js": "^1.29.1",
"#sveltejs/adapter-auto": "^1.0.0-next.7",
"#sveltejs/kit": "^1.0.0-next.215",
"#sveltejs/svelte-virtual-list": "^3.0.1",
"#testing-library/svelte": "^3.0.3",
"autoprefixer": "^10.4.1",
"babel-jest": "^27.4.6",
"babel-plugin-transform-vite-meta-env": "^1.0.3",
"jest": "^27.4.7",
"postcss-load-config": "^3.1.1",
"prettier": "^2.5.1",
"prettier-plugin-svelte": "^2.5.1",
"svelte": "^3.44.0",
"svelte-jester": "^2.1.5",
"svelte-lazy": "^1.0.12",
"tailwindcss": "^3.0.8",
"ts-jest": "^27.1.3"
},
"type": "module",
"dependencies": {
"#fontsource/fira-mono": "^4.5.0",
"#lukeed/uuid": "^2.0.0",
"#testing-library/jest-dom": "^5.16.1",
"cookie": "^0.4.1",
"svelte-lazy-image": "^0.2.0",
"swiper": "^8.0.3"
},
"testEnvironment": "jsdom"
}
I hope it will help you.I had a lot of troubles too with setting up jest..
1.Import html as string
I solved the problem using another approach...
I'm using a resource of vite to import the html file as an asset, as can be seen here in the documentation
import confirm_email_template from '../../../assets/html/confirm_email.html?raw'
2.Test using Jest
For production it works perfectly, but for unit testing the code breaks because Jest can't import the asset as a module.
So the second part of the problem was fixed (I don't know if this is the best practice) using asset mocks.
// jest.config.cjs
{
⋮
moduleNameMapper: {
⋮
'([a-zA-Z_ ]+\\.html)\\?raw$': '<rootDir>/__mocks/$1.cjs'
}
⋮
}
To make it work, I created the following folder structure:
__mocks
|
confirm_email.html.cjs
another_asset_mocked.html.cjs
The confirm_email.html.cjs looks like this:
// __mocks/confirm_email.html.cjs
module.exports = '<html>content<html>'

Error with react testing library and create react app (SyntaxError: Unexpected identifier import ArrayFrom from "./polyfills/array.from.mjs";)

I know when you have a bare React app, you config webpack to use babel and then jest is using the babel configuration to compile the modules.
Now I have an app created with create-react-app. With a package.json as follows:
{
"name": "it does not matter",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^7.2.0",
"react-redux-loading": "^1.0.1",
"react-router-dom": "^5.1.2",
"react-scripts": "1.1.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
With things being like that I wrote the simplest possible test, that passes as green:
import React from "react";
import ReactDOM from "react-dom";
it("renders LoggedUser without crashing", () => {
const div = document.createElement("div");
const name = "::name::";
const avatarURL = "::avatarURL::";
const loggedUser = { name, avatarURL };
ReactDOM.render(<LoggedUser loggedUser={loggedUser} />, div);
});
Now I follow the create react app docs to add the React testing library:
https://create-react-app.dev/docs/running-tests/#option-2-react-testing-library
I follow the steps but when running the test it complaints:
import React from "react";
import { render } from "#testing-library/react";
import { LoggedUser } from "../components/LoggedUser";
it("renders LoggedUser without crashing", () => {
const name = "::name::";
const avatarURL = "::avatarURL::";
const loggedUser = { name, avatarURL };
render(<LoggedUser loggedUser={loggedUser} />);
});
import ArrayFrom from "./polyfills/array.from.mjs";
^^^^^^^^^
SyntaxError: Unexpected identifier
In my package I have only added the dependencies:
"devDependencies": {
"#testing-library/jest-dom": "^5.5.0",
"#testing-library/react": "^10.0.4"
}
And as the docs suggested created a src/setupTests.js file
// react-testing-library renders your components to document.body,
// this adds jest-dom's custom assertions
import '#testing-library/jest-dom/extend-expect';
I have tried many things (a .babelrc file with and without a jest.config file...) but I was unable to make the test pass, when fixing one problem another one appeared...
Maybe sb is familiar with this problem and its possible solutions.
Cheers!
Well, in the end what I was trying to do was very twisted because I didn't know very well the webpack-babel-jest delegation when using the create-react-app boilerplate...
So I made another app from scratch and it did work, so I just updated in my real app the "react-scripts": "3.x.x" to make it work.
I apologize for all this hassle, anyway digging in the boilerplate was quite educational.
Thank you anyway!

Node js + TypeSc + Babel "Error: Cannot find module 'koa'"

I have cloned a demo . after installing koa,koa-router etc, I got an error. Here is my index.ts file
import Koa from "koa"
import Router from "koa-router"
import logger from "koa-logger"
import json from "koa-json"
const app = new Koa()
const router = new Router()
router.get("/",async(ctx: any,next: any)=>{
ctx.body = {
meg:"Hello world"
}
await next
})
app.use(logger())
app.use(json())
app.use(router.routes()).use(router.allowedMethods())
app.listen(3000,()=>console.log("app is running at 3000"))
Here is my package.json
{
"name": "babel-typescript-sample",
"version": "0.7.2",
"license": "MIT",
"scripts": {
"type-check": "tsc --noEmit",
"type-check:watch": "npm run type-check -- --watch",
"build": "npm run build:types && npm run build:js",
"build:types": "tsc --emitDeclarationOnly",
"build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline"
},
"devDependencies": {
"#babel/cli": "^7.8.3",
"#babel/core": "^7.8.3",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/preset-env": "^7.8.3",
"#babel/preset-typescript": "^7.8.3",
"#types/koa": "^2.11.3",
"typescript": "^3.7.5"
},
"dependencies": {
"koa": "^2.11.0",
"koa-bodyparser": "^4.3.0",
"koa-json": "^2.0.2",
"koa-logger": "^3.2.1",
"koa-router": "^8.0.8"
}
}
my file structure loos like:
/-------
-lib
-index.js
-index.d.ts
-node_modules
-src
-index.ts
Actually,before this ,when I run npm run build,I got error src/index.ts:2:20 - error TS2307: Cannot find module 'koa-router'. I write koa-router.d.ts myself, but I don't think it's a great idea, How do you guys resolve?
You have a few options:
Install koa-router typings with npm install --save-dev #types/koa-router.
Set moduleResolution inside tsconfig.json to node. See this for differences. Note that this option only works if the dependency has typings included. In this case, it does not, so first option would be more correct.
Edit paths (points to directory) or types (points to .d.ts) inside tsconfig.json to point to your typings. Yes, writing your typings ("by hand") for existing dependency is generally considered a bad idea, since it could update and therefore break your typings. If a dependency does not have typings, you can contribute to it by generating it using JSDoc, if it uses JavaScript.

Cannot download GraphQL schema from endpoint

I'm currently using graphql-cli from Prisma to download the schema from endpoint. But, even after I deploy the changes I made to my schema, which gets deployed successfully, whenever I try to download the schema, I get project prisma - No changes. And the generated prisma.graphql is left unchanged.
I use the following command to download the schema:
graphql get-schema -p prisma --dotenv config/dev.env
dev.env is simply to get PRISMA_ENDPOINT=http://localhost:4466/ environment variable.
I tried to generate prisma.graphql in a different way by having the following in prisma.yml:
endpoint: ${env:PRISMA_ENDPOINT}
datamodel: datamodel.prisma
generate:
- generator: graphql-schema
output: ./generated/
And executed prisma generate, but I get the error:
▸ [WARNING] in
/Users/F/Documents/d/server/prisma/prisma.yml: A valid
environment ▸ variable to satisfy the declaration
'env:PRISMA_ENDPOINT' could not be found.
Tried stopping and recreating Docker as well as deleting the node_module and re-installing, but to no avail.
My package.json:
{
"name": "graphql-basics",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node dist/index.js",
"heroku-postbuild": "babel src --out-dir dist --copy-files",
"dev": "env-cmd ./config/dev.env nodemon src/index.js --ext js,graphql --exec babel-node",
"test": "env-cmd ./config/test.env jest --watch --runInBand",
"get-schema": "graphql get-schema -p prisma --dotenv config/dev.env"
},
"jest": {
"globalSetup": "./tests/jest/globalSetup.js",
"globalTeardown": "./tests/jest/globalTeardown.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/polyfill": "^7.0.0",
"babel-cli": "^6.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-register": "^6.26.0",
"bcryptjs": "^2.4.3",
"cross-fetch": "^2.2.2",
"env-cmd": "^8.0.2",
"google-auth-library": "^4.2.3",
"graphql-cli": "^3.0.14",
"graphql-yoga": "^1.14.10",
"jsonwebtoken": "^8.3.0",
"prisma-binding": "^2.1.1"
},
"devDependencies": {
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"jest": "^23.5.0",
"nodemon": "^1.17.5"
},
"resolutions": {
"graphql": "^14.5.8"
}
}
To fix the error "variable to satisfy the declaration 'env:PRISMA_ENDPOINT' could not be found." when calling prisma generate you should either set the PRISMA_ENDPOINT variable manually or load it via dotenv. For example you could run npx dotenv -- prisma generate to load the env vars from your .env file.
To download the schema from the endpoint via graphql get-schema make sure to provide a properly configured .graphqlconfig.yml and provide the correct project.
A sample configuration for a prisma project could look like this:
projects:
prisma:
schemaPath: 'src/schema.graphql'
extensions:
endpoints:
default: 'http://localhost:4000/graphql'
database:
schemaPath: 'src/generated/prisma.graphql'
extensions:
prisma: 'database/prisma.yml'
endpoints:
default: 'http://localhost:4466'

unexpected token import in ES2017 with babel and Jest

I try to use Jest with bablejs and ES2017 in my project, according to the Jest Getting Started page and also Bablejs config for ES2017 this is my .babelrc file :
{
"presets": ["es2017"],
"env": {
"test": {
"presets": ["es2017"]
}
}
}
And my package.json is:
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": "",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-jest": "^21.2.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2017": "^6.24.1",
"jest": "^21.2.1"
}
}
When I type npm test to run all my test with jest i get these error :
){import StateList from './StateList';
^^^^^^
SyntaxError: Unexpected token import
It means it doesn't know import.
babel-preset-es2017 does not transform import statements, because it only includes the plugins: syntax-trailing-function-commas and
transform-async-to-generator.
When installing babel-preset-es2017 you also get a warning that it has been deprecated in favour of babel-preset-env, which contains everything that the es201x presets contained and more.
warning babel-preset-es2017#6.24.1: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
As shown in the Migration guide from es2015 to env, it is a drop-in replacement.
npm install --save-dev babel-preset-env
And change your .babelrc to:
{
"presets": ["env"]
}
Do not confuse babel-preset-env with Babel's env option, which I have removed from your current config, since you are using the exact same presets for the test environment as for any other, so it doesn't have any effect.
You can configure babel-preset-env to only transform features that are not supported by the platform you target, for example { "targets": { "node": "current" } } will only transform features that aren't supported by the Node version you are running. If no targets are specified, it will transform everything. For details see the Env preset documentation.
Note: With the upcoming version 7 of Babel, the official packages will be published under the namespace #babel, which means that babel-preset-env will be #babel/preset-env.

Resources