We Keep Coding

Why does watchman gives timeout error when using it with react-relay?

I'm using WSL Ubuntu to run a react-relay project, but after installing watchman using brew and trying to run the app in watch mode, watchman gives me the following error(I have run the project using yarn start):
Watchman error: The watchman server reported an error: "watchman::QueryExecError: query failed: synchronization failed: syncToNow: timed out waiting for cookie file to be observed by watcher within 60000 milliseconds: Connection timed out", while executing command: QueryRequest(
"query",
"/mnt/d/Work/Personal/react-relay-tutorial",
QueryRequestCommon {
glob: None,
glob_noescape: false,
glob_includedotfiles: false,
path: Some(
...
I've been trying reinstalling watchman without brew, with brew, the same error I get, nothing on the internet helped...
My package.json file:
...
"scripts": {
"start": "yarn run relay && react-scripts start",
"build": "yarn run relay && react-scripts build",
"relay": "yarn run relay-compiler --watch $#",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"relay": {
"src": "./src/",
"schema": "./src/schema.graphql"
},
...
"devDependencies": {
"babel-plugin-relay": "^13.1.1",
"graphql": "^16.3.0",
"relay-compiler": "^13.1.1"
}
...
relay.config.js file
module.exports = {
// ...
// Configuration options accepted by the `relay-compiler` command-line tool and `babel-plugin-relay`.
src: './src',
schema: './src/schema.graphql',
exclude: ['**/node_modules/**', '**/__mocks__/**', '**/__generated__/**'],
};
.babel.rc
{
"plugins": [
"relay"
]
}
Project structure:
PS: when running the project without any watchman it works just fine

Cannot find module with **/*.test.js

I'm trying to set up testing for my Next.js project. I want to test it with RITEway which is based on tape. I want a test command that finds all files in my src/ folder that end with .test.js.
Here is the commend I came up with:
"test": "NODE_ENV=test node -r #babel/register src/**/*.test.js",
I get the error:
Error: Cannot find module '/path/to/project/src/**/*.test.js'
How can I tell node to find all files ending in .test.js in my src/ folder?
Extra context:
My testing files live in src/features/<feature>/<feature.test.js>, e.g.:
"test": "NODE_ENV=test node -r #babel/register src/features/home/home-page-component.test.js",
Works to find a single file and run it.
"test": "NODE_ENV=test node -r #babel/register src/**/**/*.test.js",
Works to find all folders in features, but ignores files like src/<file>.test.js, which I also want to run.
I had to install #babel/register and #babel/core for Node to process absolute imports and newer syntax.
My .babelrc is:
{
"env": {
"test": {
"plugins": [
[
"module-resolver",
{
"root": [
"."
],
"alias": {
"features": "./src/features"
}
}
]
]
}
},
"presets": [
[
"next/babel"
]
],
"plugins": []
}

As Jon Sharpe said, you have to feed the regex into riteway.
"test": "NODE_ENV=test riteway -r #babel/register 'src/**/*.test.js'",

Problem while Testing ES6 Class with Jest

I'm having a problem making a unitary test with jest over an es6 class. I don't know if the configurations were made properly or if I need some extra package.
This is my file queue.js
export default class Queue {
constructor() {
...
}
//Adds a new elemnt to the queue
method1(element) {
...
}
.
.
.
}
This is my test file
import Queue from "../src/queue";
const myQueue = new Queue();
describe("Queue", () => {
...
...
...
});
This is my .babelrc file
{
"presets": ["es2015"]
}
This is my package.json file. The clean, build and production scripts run all ok, but when I try to run the test, then an error is thrown.
{
"name": "queue",
"version": "1.0.0",
"description": "An implementation of a queue data structure",
"main": "queue.js",
"scripts": {
"test": "jest",
"clean": "rm -dr dist",
"build": "npm run clean && mkdir dist && babel src -s -d dist",
"production": "npm run build && node bin/production"
},
"author": "Osiris Román",
"license": "ISC",
"jest": {
"transform": {
"^.+\\.js$": "babel-jest"
}
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-jest": "^25.4.0",
"babel-preset-es2015": "^6.24.1",
"babel-register": "^6.26.0",
"jest": "^25.3.0"
}
}
This is the error:
Plugin/Preset files are not allowed to export objects, only functions. In /home/usuario/practicing/javascript/queue/node_modules/babel-preset-es2015/lib/index.js
Does someone know how can I solve this problem?

The error you are getting means that one of your presets isn't compatible with the babel version.
Looking at your package.json you are using babel version 6. But both jest and babel-jest use later versions of babel. This causes your es2015 preset not to work correctly.
If you are tied to your current version of babel you can downgrade your jest and babel-jest dependencies to a version that uses older versions of babel:
npm uninstall --save-dev babel-jest jest
npm install --save-dev babel-jest#23.6.0 jest#23.6.0
If not, I would recommend to upgrade your babel version (babel-cli, babel-register and babel-preset-es2015 packages) to newer versions.
If you follow this second path, note that babel-preset-es2015 is deprecated and the use of #babel/preset-env is recommended instead.

I finally found how to solve the problem. I'll share here the configuration If someone else is having the same problem.
This is my file queue.js
export default class Queue {
constructor() {
...
}
//Adds a new elemnt to the queue
method1(element) {
...
}
.
.
.
}
This is my test file
import Queue from "../src/queue";
const myQueue = new Queue();
describe("Queue", () => {
...
...
...
});
I decided to use babel.config.js file insted of .babelrc file. This is the content of this new file.
module.exports = {
presets: [["#babel/preset-env", { targets: { node: "current" } }]],
};
This is my package.json file. The clean, build, dev, production and test scripts run all ok without errors.
{
"name": "queue",
"version": "1.0.0",
"description": "An implementation of a queue data structure",
"main": "queue.js",
"scripts": {
"test": "jest",
"clean": "rm -dr dist",
"build": "npm run clean && babel src -s -d dist ",
"production": "npm run build && node bin/production",
"dev": "npm run build && node bin/dev"
},
"author": "Osiris Román",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.9.0",
"#babel/preset-env": "^7.9.5",
"#babel/register": "^7.9.0",
"babel-jest": "^25.5.0",
"jest": "^25.3.0"
}
}
Thanks to #mgarcia comment I decided to avoid babel-preset-es2015 to use the recommended #babel/preset-env .

How to set env in package.json which is used within .bablerc

I am trying to run Jest tests as part of a script before I then run webpack, like this.
npm run test
webpack --progress --profile --watch --mode development
Jest only works with compiled code, so I had set my .babelrc to the following, which worked, however then it transpiled all my code in webpack which I didn't want, in development mode I want to leave the JavaScript un-transpiled so I can work with it without it being obfuscated.
{
"presets": [ "#babel/preset-env" ]
}
Instead I want to run Jest by calling 'npm run test' which then I can specify only that script transpiles the code and then webpack runs without transpiling, I was hoping something like this in my .babelrc file
{
"env": {
"test": {
"presets": [ "#babel/preset-env" ]
}
}
}
Then in my package.json I could set the env to test which then would leave webpack alone.
"scripts": {
"test": "SET env=test&& jest --config jest.config.js"
}
With this setup I still get the following message appearing when 'npm run test' runs which shows the babelrc file isn't being hit.
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
Can anyone help?

So turns out my test was ok in the .babelrc file
{
"env": {
"test": {
"presets": [ "#babel/preset-env" ]
}
}
}
And the script needed in my package.json was this without setting any node env
"scripts": {
"test": "jest --config jest.config.js"
}
It was actually my webpack script that wasn't configured correctly, I needed to add '--env.NODE_ENV=development' at the end
webpack --progress --profile --watch --mode development --env.NODE_ENV=development
Which could then be checked within my webpack.config file.
module.exports = (env) => {
const isDevelopment = env && env.NODE_ENV === 'development';
...
then in my rules test for isDevelopment
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: isDevelopment ? {} : { presets: ['#babel/preset-env'] }
}
},

Using webpack aliases in AVA tests

I need to include the aliases from webpack into AVA when it runs.
I used webpack's resolve.alias to access all the files under src folder:
webpack.config.js
resolve: {
alias: {
'#': path.resolve(__dirname, 'src/'),
},
},
and then that # special prefix for my own modules like this:
my-module.js
import main from '#/view/main'
This is my AVA configuration:
package.json
"scripts": {
"test-unit": "ava test/unit"
},
"ava": {
"require": ["esm"]
},
Is possible to add something to package.json like in this mocha solution?
https://stackoverflow.com/a/42989394/12361834
Thank you so much for your time and help!

If I understood you well you can do it with link-module-alias npm package.
Add this to your package.json:
"scripts": {
"postinstall": "link-module-alias",
"preinstall": "command -v link-module-alias && link-module-alias clean || true"
"test": "ava"
},
"_moduleAliases": {
"#": "src"
}
npm i && npm test
If you need further details you can download a working example here.