Skip to content

Commit

Permalink
Added in ability to create custom error handlers for runners so error…
Browse files Browse the repository at this point in the history
… messages are less vague. Added unresolved custom error handler. Added test for unresolved runner. Added a test file with a bad import to verify eslint will catch it.
  • Loading branch information
jamesmortensen committed Mar 16, 2022
1 parent 43cebdc commit e4ec1e2
Show file tree
Hide file tree
Showing 8 changed files with 1,147 additions and 86 deletions.
86 changes: 56 additions & 30 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ eslint is a great tool for catching different errors pre-runtime, and this servi

It's oftentimes better to fail faster so we can fix problems sooner rather than later.

If desired, you can also configure the service to run the eslinter in your project.
The recommended configuration is to use the unresolved runner to just check missing imports, but if desired, you can also configure the service to run the eslinter in your project using the npm or yarn runner, or by passing in a flag that tells the system to use your .eslintrc configuration as well.

## Installation

Expand All @@ -16,34 +16,39 @@ Install the wdio-eslinter-service:
$ npm i wdio-eslinter-service --save-dev
```

If you don't already have eslint installed and configured, you'll need to install it and configure it in your project:

```
$ npm i eslint eslint-plugin-import
```
### Quick Start - Check for missing or unresolved imports only

### Check for missing or unresolved imports only
By default, this minimal configuration, the "unresolved" runner, checks for unresolved require imports and throws an error if unresolved imports are found. The service then stops execution. You can customize .eslintrc.js to perform more checks using the "npm" or "yarn" runners, if desired. See [eslint](https://www.npmjs.com/package/eslint) for more details.

If you don't have an `.eslintrc.js` configuration in your project, then wdio-eslinter-service can be configured to use a default one which just checks for missing imports before running the tests. This is handy so that you find out about incorrect imports sooner rather than later. To configure this, add the following eslinter configuration to your services array:
If you don't have an `.eslintrc.js` configuration in your project, then wdio-eslinter-service can be configured to use a default one which just checks for missing imports before running the tests. This is handy so that you find out about incorrect imports sooner rather than later. To configure this, add the following eslinter configuration to your services array (assuming you already are using the chromedriver service; otherwise, leave that part out):

**wdio.conf.js:**
```
services: ['chromedriver', [
'eslinter',
{
runnerType: 'unresolved',
includeProjectEslintrc: false
runnerType: 'unresolved'
}
]],
```

If you're using the [module-alias](https://www.npmjs.com/package/module-alias) module, which lets you configure aliases to replace relative paths, you'll need to pass that into the eslinter configuration, if you don't already have an `eslintrc` config file in your project. Below is an example:
At this point, start running the tests, and if there is a missing or incorrect import, WebdriverIO will log it and immediately terminate the test run:

```
$ npx wdio
```


#### Optional - if using module-alias

If you're using the [module-alias](https://www.npmjs.com/package/module-alias) module, which lets you configure aliases to replace relative paths, you'll need to pass that into the eslinter configuration using the eslint-import-resolver-custom-alias plugin. Below is an example:

```
services: ['chromedriver', [
'eslinter',
{
runnerType: 'unresolved',
includeProjectEslintrc: false,
eslintOverride: {
"settings": {
"import/resolver": {
Expand All @@ -62,18 +67,54 @@ If you're using the [module-alias](https://www.npmjs.com/package/module-alias) m
]],
```

Start running your tests to see it in action. You may need to intentionally break one of your require/imports to see what it looks like when it catches an error.
Install the plugin in your project:

```
$ npm i eslint-import-resolver-custom-alias
```

Run the tests and verify the system will find incorrect imports that use module aliases:

```
$ npx wdio
```

NOTE: To also have the eslinter service use an existing eslintrc configuration in your project, set `includeProjectEslintrc` to true in the wdio.conf.js configuration services array.
#### Experimental - Use along with an existing eslintrc configuration in your project

To also have the eslinter service use an existing eslintrc configuration in your project, set `includeProjectEslintrc` to true in the wdio.conf.js configuration services array.

I've experienced problems with conflicting plugins. If your project eslint setup is also looking for unresolved imports, then this may not work and may require adjustments to your .eslintrc.js. This is not recommended at this time.

### If you already use eslint and have an existing eslintrc

If it's not already there, put `.eslintrc.js` in the root of your Node.js project:
### Advanced Alternatives - Using the npm and yarn runners

The npm and yarn runners help give you additional control over running an existing eslinter setup in your project. With this configuration, you can define extra commands to run in the run-scripts section in your package.json:

Inside your `package.json`, add this entry to your run scripts:

```json
{
"scripts": {
"eslint": "eslint ."
}
}
```

**NOTE: Adding eslint to the package.json is required for the service to function when using the npm or yarn runners.**

If you don't already have eslint installed and configured, you'll need to install it and configure it in your project, as well as any plugins you're using, such as eslint-plugin-import:

```
$ npm i eslint eslint-plugin-import
```

If you're using eslint-import-resolver-custom-alias plugin to map module aliases to their real paths, then you'll need to install it as well:

```
$ npm i eslint-import-resolver-custom-alias
```

You'll also need to create an `.eslintrc.js` file, if you don't already have one of the eslintrc configuration files in your project. Here is a basic setup to just look for unresolved imports, and you can expand this configuration to validate other code quality checks before running tests:

```
// .eslintrc.js
Expand All @@ -97,21 +138,6 @@ module.exports = {
}
```

By default, this minimal configuration checks for unresolved require imports and throws an error if unresolved imports are found. The service then stops execution. You can customize .eslintrc.js to perform more checks, if desired. See [eslint](https://www.npmjs.com/package/eslint) for more details.

Inside your `package.json`, add this entry to your run scripts:

```json
{
"scripts": {
"eslint": "eslint ."
}
}
```

**NOTE: Adding eslint to the package.json is required for the service to function when using the npm or yarn runners.**


Lastly, add the `eslinter` service to the services array in `wdio.conf.js`:

```javascript
Expand Down
Loading

0 comments on commit e4ec1e2

Please sign in to comment.