TypeORM Cli: migrationsDir seems to be ignored by scripts - database-migration

I am trying to accomplish a simple migration - renaming a column in the users table.
I cannot get the cli to use the migrationsDir to create OR run migrations from.
MIGRATION CREATION
When I run
npm run typeorm:cli -- migration:create -n UserFullName -d 'server/migration, there is no problem creating the file in the migrations folder.
Creating migrations without the -d argument just creates the files in the folder root, it ignores the migrationsDir in the Connection Options (see ormconfig.ts down below).
RUNNING MIGRATIONS
Running npm run typeorm:cli -- migration:run yields exit status 1, My guess is that it can't find the migrations, but I really don't know.
Error during migration run:
Error: No connection options were found in any of configurations file.
at ConnectionOptionsReader.<anonymous> (/Users/matthewshields/Documents/Code/Projects/Sumo/dohyo-dreams/src/connection/ConnectionOptionsReader.ts:41:19)
at step (/Users/matthewshields/Documents/Code/Projects/Sumo/dohyo-dreams/node_modules/tslib/tslib.js:133:27)
at Object.next (/Users/matthewshields/Documents/Code/Projects/Sumo/dohyo-dreams/node_modules/tslib/tslib.js:114:57)
at fulfilled (/Users/matthewshields/Documents/Code/Projects/Sumo/dohyo-dreams/node_modules/tslib/tslib.js:104:62)
at process._tickCallback (internal/process/next_tick.js:68:7)
at Function.Module.runMain (internal/modules/cjs/loader.js:745:11)
at Object.<anonymous> (/Users/matthewshields/Documents/Code/Projects/Sumo/dohyo-dreams/node_modules/ts-node/src/bin.ts:157:12)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
package.json
{
"name": "xxxxxxxxx",
"version": "0.1.0",
"private": true,
"main": "./server/server.ts",
"dependencies": {
"axios": "^0.19.0",
"bcrypt": "^3.0.6",
"body-parser": "^1.18.3",
"breakpoint-sass": "^2.7.1",
"chroma-js": "^2.0.3",
"class-transformer": "^0.2.0",
"class-validator": "^0.9.1",
"dotenv": "^6.2.0",
"envalid": "^4.1.4",
"express": "^4.16.4",
"express-session": "^1.16.1",
"http-server": "^0.11.1",
"lodash": "^4.17.15",
"lodash.isequal": "^4.5.0",
"massive": "^5.7.7",
"node-sass": "^4.11.0",
"pg": "^7.11.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"react-scripts": "2.1.8",
"reflect-metadata": "^0.1.13",
"sumo-rank": "^1.0.2",
"tsconfig-paths": "^3.9.0",
"typeorm": "^0.2.18"
},
"devDependencies": {
"#types/express": "^4.16.1",
"#types/node": "^10.12.11",
"husky": "^1.2.0",
"nodemon": "^1.18.7",
"ts-node": "^7.0.1",
"tslint": "^5.11.0",
"tslint-config-airbnb": "^5.11.1",
"typescript": "^3.2.1"
},
"scripts": {
"dev": "ts-node ./server/server.ts",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"start-sw": "express ./build",
"lint": "tslint -p tsconfig.json -c tslint.json",
"typeorm:cli": "ts-node ./node_modules/typeorm/cli.js"
},
"eslintConfig": {
"extends": "react-app"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint"
}
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
server.ts
require('dotenv').config();
import { } from 'reflect-metadata';
import { createConnection } from 'typeorm';
import App from './app';
import * as config from './ormconfig';
import RankingsController from './rankings/rankings.controller';
import RankChartsController from './rankCharts/rankCharts.controller';
import TournamentsController from './tournaments/tournaments.controller';
import UsersController from './users/users.controller';
import validateEnv from './utils/validateEnv';
import WrestlersController from './wrestlers/wrestlers.controller';
validateEnv();
(async () => {
try {
await createConnection(config);
} catch (error) {
console.log('Error while connecting to the database', error);
return error;
}
const app = new App(
[
new TournamentsController(),
new WrestlersController(),
new RankingsController(),
new RankChartsController(),
new UsersController(),
],
);
app.listen();
})();
apps.ts
import * as bodyParser from 'body-parser';
import * as express from 'express';
import Controller from './interfaces/interface.controller';
import errorMiddleware from './middleware/error.middleware';
class App {
public app: express.Application;
constructor(controllers: Controller[]) {
this.app = express();
this.initializeMiddlewares();
this.initializeErrorHandling();
this.initializeControllers(controllers);
}
public listen() {
this.app.listen(process.env.PORT, () => {
console.log(`App listening on the port ${process.env.PORT}`);
});
}
private initializeMiddlewares() {
this.app.use(bodyParser.json());
}
private initializeErrorHandling() {
this.app.use(errorMiddleware);
}
private initializeControllers(controllers: Controller[]) {
controllers.forEach((controller) => {
this.app.use('/', controller.router);
});
}
}
export default App;
ormconfig.ts
import { ConnectionOptions } from 'typeorm';
const config: ConnectionOptions = {
type: 'postgres',
host: process.env.POSTGRES_HOST,
port: Number(process.env.POSTGRES_PORT),
username: process.env.POSTGRES_USER,
password: process.env.POSTGRES_PASSWORD,
database: process.env.POSTGRES_DB,
entities: [
__dirname + '/../**/*.entity{.ts,.js}',
],
cli: {
migrationsDir: 'server',
}
}
export = config;
(timestamp)-UserFullName.ts
import { MigrationInterface, QueryRunner } from "typeorm";
export class UserFullName1574403715918 implements MigrationInterface {
public async up(queryRunner: QueryRunner): Promise<any> {
await queryRunner.query(`ALTER TABLE "user" RENAME "fullName" to "name"`);
}
public async down(queryRunner: QueryRunner): Promise<any> {
await queryRunner.query(`ALTER TABLE "user" RENAME "name" to "fullName"`);
}
}
I suspect my file structure may be related to the issue, so I have listed it briefly. I just listed some the basics, there are more controllers and entities for Tournaments, Wrestlers, Rankings, Rankcharts.
├── docker-compose.yaml
├── package.json
├── src
├── server
│ ├── ormconfig.ts
│ ├── server.ts
│ ├── app.ts
│ ├── users
│ │ ├── users.controller.ts
│ │ ├── users.dto.ts
│ │ ├── users.entity.ts
│ ├── migration
First time poster, any constructive criticism on my format or explanation is appreciated.

For anyone coming across similar issues, these were good nuggets I valued:
The typeorm CLI reads the cli.migrationsDir (from ormconfig.ts) only when creating migrations (not reading). You can see that subtle distinction here in the docs - it reads:
"..."cli": { "migrationsDir": "migration" } - indicates that the
CLI must create new migrations in the "migration" directory."
This was confusing - why would it need a separate config just for writing? Wouldn't reading/writing migrations be the same config? I don't know, still don't know - but I confirmed this by reading the source as well (unless I whiffed something).
Final conclusion: It's likely those configs (migrations: [...] & cli.migrationsDir) should point to the same location on the filesystem unless you have a good reason not to.
Cheers.

I think the problem here's because you use async connection. I had the same issue and managed to solve it after I've added the ormconfig.ts (should work with .js also) file with the synchronous connection.
In the config file you should add the cli propertycli: {migrationsDir: "server/migration"}
To be able to run migrations using cli another property is needed: migrations: [join(__dirname, 'server/migration/*{.ts,.js}')],
Also when running cli you should indicate where this config file is located --config path/to/ormconfig.ts flag.
The full command example with ts: ts-node ./node_modules/typeorm/cli.js migration:generate --config server/ormconfig.ts
For more info you can check this example https://github.com/ambroiseRabier/typeorm-nestjs-migration-example I found it very useful.

As it seems by your file structure the config should look like that:
ormconfig.ts
export const config: TypeOrmModuleOptions = {
...
migrations: ['server/migration/*.js', 'server/migration/*.ts'],
cli: {
migrationsDir: 'server/migration',
},
};
You might need get the ormconfig.ts file out of the server folder to sit on the same level as package.json.

Did you reach the correct migration file path?
{
cli: {
migrationsDir: "src/migration"
}
}
https://github.com/typeorm/typeorm/blob/master/docs/using-cli.md

Related

guardReactiveProps warn in build with vite

I want to build my nuxt project with vite and rollup
and after I entered npm run build the build finishes successfully but it prints this warning:
"guardReactiveProps" is imported from external module "vue" but never used in "src/components/MyComponent.vue, and rest of my components!
please help me to fix this warning
here are my configs
package.json
"rollup": "^3.5.1",
"rollup-plugin-visualizer": "^5.8.3",
"vite": "^4.0.0",
vite.config.ts
import { resolve } from 'path'
import { defineConfig } from 'vite'
export default defineConfig({
build: {
rollupOptions: {
external: [
'bootstrap',
'bootstrap/js/dist/alert',
'bootstrap/js/dist/collapse',
'bootstrap/js/dist/modal',
'bootstrap/js/dist/offcanvas',
'bootstrap/js/dist/popover',
'bootstrap/js/dist/carousel',
'bootstrap/js/dist/dropdown',
'bootstrap/js/dist/tooltip',
'vue',
'#popperjs/core',
'#vueuse/core'
],
output: {
exports: 'named',
assetFileNames: `routaa-ui-kit.[ext]`, //without this, it generates build/styles.css
globals: {
vue: 'Vue',
bootstrap: 'Bootstrap',
'#vueuse/core': 'vueuse',
'bootstrap/js/dist/collapse': 'Collapse',
'bootstrap/js/dist/alert': 'Alert',
'bootstrap/js/dist/carousel': 'Carousel',
'bootstrap/js/dist/dropdown': 'Dropdown',
'bootstrap/js/dist/modal': 'Modal',
'bootstrap/js/dist/offcanvas': 'Offcanvas',
'bootstrap/js/dist/popover': 'Popover',
'bootstrap/js/dist/tooltip': 'Tooltip'
}
}
}
},
})
Thanks.

AWS-Amplify DataStoreStateError: Tried to execute DataStore.query() while DataStore was "Stopping"

JavaScript Framework
React Native
Amplify APIs
DataStore
Amplify Categories
api
Environment information
Details
Describe the bug
DataStoreStateError: Tried to execute DataStore.query() while DataStore was "Stopping".
This can only be done while DataStore is "Started" or "Stopped". To remedy:
Ensure all calls to stop() and clear() have completed first.
If this is not poss...
Hi, I have an amplify project to host backend for react-native mobile app. Suddenly it stopped to work. Any call to the data store will receive the message i mentioned above.
Our work plan is to provide amplify backend as an NPM package. This package is used from app developer to make calls to AWS-Amplify. Since 6 months everything works fine until 4 days go. We didn't had breaking changes or something. Just added a few lambda function which i don't think it could cause this issue.
We are starting datastore when app is open. DataStore.start() and clear it on SignIng event and SignOut event. We didn't make any change in this flow since a long time (4 months).
We tried to reproduce the issue locally but it is not possible for somehow. Since we are using typescript to write our NPM package. We test functionality locally with node or tsx where everything works, then we publish it and downloaded in another project react-native where everything works good. Once it is deployed, no action from DataStore could be executed. The app crashed and Sentry show us the message above. And again that start to happen 4 days ago until now.
Expected behavior
To be able to execute DataStore manipulation functionality (query, save, delete... etc) / Get connection with data store.
Reproduction steps
Whenever we call datastore functions in the react-native app. It will show this message:
DataStoreStateError: Tried to execute DataStore.query() while DataStore was "Stopping".
This can only be done while DataStore is "Started" or "Stopped". To remedy:
Ensure all calls to stop() and clear() have completed first.
If this is not poss...
Code Snippet
// Put your code below this line.
// where i clear data store and start it, just using auth events
// Clear the local datastore when signing out.
// As advised in: https://docs.amplify.aws/lib/datastore/sync/q/platform/js/#clear-local-data
EventHandler.OnSignOut = async () => {
if (Application.hasBooted()) {
await Application.clear();
}
};
// Clear the local datastore when signing in.
// As advised in: https://docs.amplify.aws/lib/datastore/sync/q/platform/js/#clear-local-data
EventHandler.OnSignIn = async () => {
if (Application.hasBooted()) {
await Application.clear();
}
};
// Boot the application as soon as the DataSync is completed
// Check if it has not been booted already first
EventHandler.OnDataSynced = async () => {
if (!Application.hasBooted()) {
await Application.boot();
}
};
// Where i do datastore call
/**
* #name SaveAccount
* #description: Save or update an account.
* If the account already exists in the datastore based
* on its id, it is updates. Otherwise a
* #type {Function}
* #param {AccountDetails} accountDetails
* #param {AccountAttributes} params
* #returns {Promise<AccountDetails>}
*/
const SaveAccount = async (
accountDetails: AccountDetails,
params?: AccountAttributes,
): Promise<AccountDetails> => {
const current = await GetAccountDetails(accountDetails.id);
if (current instanceof AccountDetails) {
return await DataStore.save(
AccountDetails.copyOf(
current,
updated => {
if (params) {
for (const key in params) {
updated[key] = params[key];
}
}
},
),
);
}
accountDetails = accountDetails instanceof AccountDetails
? accountDetails
: new AccountDetails(accountDetails);
return await DataStore.save(accountDetails);
};
aws-exports.js
/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.
const awsmobile = {
"aws_project_region": "",
"aws_cognito_identity_pool_id": "",
"aws_cognito_region": "",
"aws_user_pools_id": "",
"aws_user_pools_web_client_id": "",
"oauth": {},
"aws_cognito_username_attributes": [
"EMAIL"
],
"aws_cognito_social_providers": [],
"aws_cognito_signup_attributes": [],
"aws_cognito_mfa_configuration": "OFF",
"aws_cognito_mfa_types": [
"SMS"
],
"aws_cognito_password_protection_settings": {
"passwordPolicyMinLength": 8,
"passwordPolicyCharacters": [
"REQUIRES_LOWERCASE",
"REQUIRES_NUMBERS",
"REQUIRES_UPPERCASE"
]
},
"aws_cognito_verification_mechanisms": [
"EMAIL"
],
"aws_appsync_graphqlEndpoint": "*****",
"aws_appsync_region": "",
"aws_appsync_authenticationType": "API_KEY",
"aws_appsync_apiKey": "",
"aws_user_files_s3_bucket": "",
"aws_user_files_s3_bucket_region": "*"
};
package.json
{
"name": "#financiallease/react-native-amplify",
"version": "7.1.0",
"description": "",
"author": "itsupport#financiallease.nl",
"main": "dist/financiallease.js",
"module": "dist/financiallease.js",
"browser": "dist/financiallease.js",
"typings": "dist/financiallease.d.ts",
"types": "dist/financiallease.d.ts",
"license": "LGPL",
"scripts": {
"__BUNDLING": null,
"build:clean": "rimraf dist/",
"build": "npm run build:clean && rollup -c",
"bundle-local": "npm run build && npm pack && mv -v financiallease-react-native-amplify-*.tgz /usr/local/npm/#financiallease/react-native-amplify.tgz",
"__LINTING": null,
"autoformat": "npm run lint-typescript -- --fix && npm run lint-nodejs -- --fix",
"lint-nodejs": "eslint --config amplify/.eslintrc.js 'amplify/backend/function/**/index.js'",
"lint-typescript": "eslint --config .eslintrc.js '{src,test}/**/*.ts'",
"lint": "npm run lint-typescript && npm run lint-nodejs",
"coverage": "jest -c jest.config.ts --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false",
"test": "jest -c jest.config.ts",
"__DOC GENERATION": null,
"docs:generate": "npm run build:clean && sed '/[[_TOC_]]/d' README.md > README.sanitized.md && typedoc --readme README.sanitized.md --entryPoints src --entryPointStrategy expand --out docs --theme hierarchy --name \"React Native Amplify - docs\" --includeVersion",
"docs:serve": "node -r esm --inspect docker/server.js",
"__AMPLIFY BACKEND": null,
"amplify-modelgen": "node amplify/scripts/amplify-modelgen.js",
"amplify-push": "node amplify/scripts/amplify-push.js",
"scan": "npm run build && npm run lint && npm run test && npm run docs:generate",
"upgrade-amplify-deps": "npx npm-check-updates -i '/(#?aws-amplify|#react-native-community/netinfo)/' && npm update"
},
"publishConfig": {
"#financiallease:registry": "https://gitlab.com/api/v4/projects/35071033/packages/npm/"
},
"dependencies": {
"#algolia/client-search": "^4.14.2",
"#algolia/transporter": "^4.14.2",
"#aws-amplify/core": "^4.7.2",
"#aws-amplify/datastore": "^3.12.8",
"#react-native-async-storage/async-storage": "^1.17.4",
"#react-native-community/netinfo": "^9.3.0",
"#types/amplify": "^1.1.25",
"aws-amplify": "^4.3.33",
"aws-amplify-react-native": "^6.0.5",
"aws-sdk": "^2.1142.0",
"deep-equal": "^2.0.5"
},
"devDependencies": {
"#aws-amplify/cli-extensibility-helper": "^2.3.33",
"#babel/core": "^7.17.9",
"#babel/preset-env": "^7.16.11",
"#babel/preset-typescript": "^7.16.7",
"#rollup/plugin-alias": "^3.1.9",
"#rollup/plugin-babel": "^5.3.1",
"#rollup/plugin-commonjs": "^21.0.3",
"#rollup/plugin-json": "^4.1.0",
"#rollup/plugin-multi-entry": "^4.1.0",
"#rollup/plugin-node-resolve": "^13.1.3",
"#rollup/plugin-typescript": "^8.3.1",
"#types/jest": "^27.4.1",
"#types/jest-when": "^3.5.2",
"#types/node": "^17.0.30",
"#typescript-eslint/eslint-plugin": "^5.35.1",
"#typescript-eslint/parser": "^5.18.0",
"aws-sdk-mock": "^5.7.0",
"babel-jest": "^28.0.3",
"babel-plugin-module-resolver": "^4.1.0",
"base64-js": "^1.5.1",
"eslint": "^8.12.0",
"eslint-config-prettier": "^8.5.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-jsdoc": "^39.2.9",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-sort-exports": "^0.6.0",
"esm": "^3.2.25",
"fetch-mock": "^9.11.0",
"isomorphic-unfetch": "^3.1.0",
"jest": "^27.5.1",
"jest-junit": "^13.2.0",
"jest-when": "^3.5.1",
"jsdoc": "^3.6.10",
"mustache": "^4.2.0",
"nodemon": "^2.0.16",
"prettier": "^2.7.1",
"rimraf": "^3.0.2",
"rollup": "^2.70.1",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-dts": "^4.2.2",
"rollup-plugin-flat-dts": "^1.7.0",
"rollup-plugin-sourcemaps": "^0.6.3",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-ts": "^3.0.2",
"ts-node": "^10.7.0",
"tsconfig-paths": "^3.14.1",
"tslib": "^2.3.1",
"typedoc": "^0.22.15",
"typedoc-theme-hierarchy": "^1.1.1",
"typescript": "^4.6.3",
"uuid": "^8.3.2"
}
}
Logs from Sentry
This change was introduced in this PR to explicitly handle internal race conditions between overlapping clears/stops and starts/queries/mutations. Previously, DataStore consumers would see random, erratic transaction/locking/corruption errors that were uninstructive, difficult to recover from, or silent. This change raises the conflicts so consuming code can be aware of and handle those conflicts.
With that said, you just need to ensure DataStore.clear() resolves first, after making sure the query you're trying to run should be on the post-clear() side of that boundary! This could be as simple as a retry loop or a flag — or even using the clear() promise as your "flag".
Initialize your flag:
let onReady = Promise.resolve();
let isReady = true;
When you need to clear:
let onReady = DataStore.clear();
isReady = false;
onReady.then(() => isReady = true);
Then, for operations that should operate once the clear is complete:
async getResults() {
await onReady;
return DataStore.query(...);
}
And for those that should be canceled (no longer make sense) if they interrupt a clear, something like:
async getResults() {
if (isReady) {
return DataStore.query(...);
} else {
throw new Error(
"Sorry. We're still clearing data. Try again shortly."
);
}
}
I've provided a little more detail in the cross-post of this question on GitHub.

Using a (Zustand) function mock with Jest results in "TypeError: create is not a function"

I'm following the Zustand wiki to implement testing, but the provided solution is not working for a basic test for app rendering. My project is built on top of the Electron React Boilerplate boilerplate project.
Here's the full error. Jest is using node with experimental-vm-modules because I followed the the Jest docs to support ESM modules.
$ cross-env NODE_OPTIONS=--experimental-vm-modules jest
(node:85003) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
jest-haste-map: Haste module naming collision: myproject
The following files share their name; please adjust your hasteImpl:
* <rootDir>/package.json
* <rootDir>/src/package.json
FAIL src/__tests__/App.test.tsx
● Test suite failed to run
TypeError: create is not a function
12 | }
13 |
> 14 | const useNotifs = create<NotifsState>(
| ^
15 | // devtools(
16 | (set) => ({
17 | notifStore: notifsDefault.notifStore,
at src/state/notifs.ts:14:19
at TestScheduler.scheduleTests (node_modules/#jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/#jest/core/build/runJest.js:387:19)
at _run10000 (node_modules/#jest/core/build/cli/index.js:408:7)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 11.882 s
Ran all test suites.
error Command failed with exit code 1.
At the top of the notifs.ts file, Zustand is imported normally with import create from 'zustand'.
Jest config in package.json:
...
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/mocks/fileMock.js",
"\\.(css|less|sass|scss)$": "identity-obj-proxy",
"zustand": "<rootDir>/src/__mocks__/zustand.js",
},
"transformIgnorePatterns": [
"node_modules/(?!(zustand)/)",
"<rootDir>/src/node_modules/"
],
"moduleDirectories": [
"node_modules",
"src/node_modules"
],
"moduleFileExtensions": [
"js",
"jsx",
"ts",
"tsx",
"json"
],
"moduleDirectories": [
"node_modules",
"src/node_modules"
],
"extensionsToTreatAsEsm": [
".ts",
".tsx"
],
...
I have left the ./src/__mocks__/zustand.js file exactly the same as from the Zustand wiki Testing page. I receive the same error whether or not I have zustand in the transformIgnorePatterns.
My Babel configuration includes [require('#babel/plugin-proposal-class-properties'), { loose: true }], in the plugins section, and output.library.type is 'commonjs2'
My tsconfig.json has compilerOptions.module set to "CommonJS", and the project's package.json "type" field is set to "commonjs".
Dependency versions:
"#babel/core": "^7.12.9",
"#babel/preset-env": "^7.12.7",
"#babel/preset-react": "^7.12.7",
"#babel/preset-typescript": "^7.12.7",
"#babel/register": "^7.12.1",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"babel-jest": "^27.0.6",
"babel-loader": "^8.2.2",
"jest": "^27.0.6",
"regenerator-runtime": "^0.13.9",
"source-map-support": "^0.5.19",
"typescript": "^4.0.5",
"webpack": "^5.5.1",
"zustand": "^3.5.5"
I don't know what else could be relevant, just let me know if anything else is needed. Any and all help appreciated, thanks for your time.
To do this you should use the actual store of your app
const initialStoreState = useStore.getState()
beforeEach(() => {
useStore.setState(initialStoreState, true)
})
useStore.setState({ me: memberMockData, isAdmin: true })
The documentation seems off. So don't follow it.
use jest 28.0.0-alpha.0 will simply resolve the issue.
I think the problem is zustand uses '.mjs' as the entry point.

How to run Rails System tests in Heroku CI

How do I configure Heroku CI to run System tests?
This is my app.json, where I included what I thought would be the necessary buildpacks:
{
"environments": {
"test": {
"scripts": {
"test-setup": "bin/rails assets:precompile",
"test": "bin/rails test:system"
},
"addons":[
"heroku-postgresql:in-dyno"
],
"buildpacks": [
{ "url": "https://github.com/heroku/heroku-buildpack-google-chrome" },
{ "url": "heroku/nodejs" },
{ "url": "heroku/ruby"}
]
}
}
}
But when I deploy, I get the following error:
-----> Running test command `bin/rails test:system`...
rails aborted!
Webdrivers::BrowserNotFound: Failed to find Chrome binary.
I suspect I am missing something very basic....
I running Rails 6.0.1 and Ruby 2.6.3.
Did you setup your webdriver correctly to find the correct binary as mentioned on the official UAT wiki page of heroku?
Add gem 'webdrivers' to your Gemfile.
Add the following code snippet to your test_helper.rb (as stated on heroku buildback wiki and on webdrivers wiki):
require 'webdrivers' # Make sure webdrivers are loaded.
chrome_bin = ENV['GOOGLE_CHROME_SHIM'] if ENV['GOOGLE_CHROME_SHIM'].present?
chrome_capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(
chromeOptions: {
# You may want to use a different args
args: %w[headless disable-gpu window-size=1400x1400],
binary: chrome_bin
}
)
Capybara.register_driver :heroku_chrome do |app|
Capybara::Selenium::Driver.new(app, browser: :chrome, desired_capabilities: chrome_capabilities)
end
Afterwards tell your system test to use your custom chrome driver by adding it to your application_system_test_case.rb.
class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
driven_by :heroku_chrome
end

Popper.js problem with Bootstrap modals in Laravel 5.8

I'm creating a web application based on Laravel 5.8 + Laravelmix + bootstrap + Vue
(which is how Lravel comes out of the box)
Problem is that bootstrap modals will not work - not out of the box at least.
If you try to trigger a modal you get an error in the console, regarding a popper map component (needed by jquery) that is there (in fact) but for some reason it doesn't get properly added to the mix.
This is a know problem: I found other questions and threads about this problem in Stackoverflow, however...
Problem in the problem: all existing QAs that i found take for granted that who reads knows quite a lot about npm webpack and laravel mix... and I don't! :-( I'm mostly a backend developer, not a frontend dev: I know basic Javascript but don't know much about webpack and I haven't been able to apply the suggested solutions to my case.
Could somebody explain to me in clear terms how my js assets should look like in order to work???
This is my webpack.mix file:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
This is my resources/js/app.js file:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
This is the beginning of my resoureces/js/bootstrap.js file looks like:
window._ = require('lodash');
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
window.axios = require('axios');
And finally this is my package.json file:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "2.3.1",
"sass": "^1.20.1",
"sass-loader": "7.*",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
}
}