Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds no-large-snapshots rule #24

Conversation

anescobar1991
Copy link
Contributor

@anescobar1991 anescobar1991 commented Nov 30, 2017

Implements no-large-snapshots rule as discussed in issue #21. This rule serves to discourage having large snapshots which are difficult to review and can lead to bugs being snuck in.

I added it to the recommended config as a warn and kept the default max of 50 lines threshold. I can modify this as needed though if you all would like.

index.js Outdated
module.exports = {
configs: {
recommended: {
parserOptions: {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added this bit in because snapshots contain backticks (`) which are not valid in es5.

Copy link
Member

@SimenB SimenB Nov 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But we shouldn't lint snapshots, so this isn't needed

EDIT: wait, processors. fancy

@ntwb
Copy link

ntwb commented Nov 30, 2017

Neat rule, but I don't think it should be added to the recommended config.

stylelint currently has 5 snapshot tests but each is thousand/s of lines of code.

How stylelint uses snapshots at the moment is to take a large real world CSS file, e.g. BootStrap and lint against it with a specific set of stylelint rules, if a change is made to stylelint that breaks one of these snapshots then we know we have introduced a regression that is more than likely not covered by a unit test https://github.com/stylelint/stylelint/tree/master/system-tests

index.js Outdated
rules: {
'jest/no-disabled-tests': 'warn',
'jest/no-focused-tests': 'error',
'jest/no-identical-title': 'error',
'jest/no-large-snapshots': 'warn',
Copy link
Member

@SimenB SimenB Nov 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree it should not be in the recommended config

package.json Outdated
@@ -23,6 +23,7 @@
"eslint": "^4.10.0",
"eslint-config-prettier": "^2.7.0",
"eslint-plugin-prettier": "^2.3.1",
"eslint-plugin-self": "^1.0.1",
Copy link
Member

@SimenB SimenB Nov 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should update the lockfile?

Also, very fancy 😀

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes! I was using npm so didn't see that.

.eslintrc.js Outdated
overrides: [
{
files: ['*.test.js'],
env: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you import the list maintained in the plugin?


module.exports = context => {
if (context.getFilename().endsWith('.snap')) {
const lineLimit = context.options[0] || 50;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it should take an object as options, just to be easier to expand in the future.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I was debating that. Will do.


const noLargeSnapshots = require('../no_large_snapshots');

// was not able to use https://eslint.org/docs/developer-guide/nodejs-api#ruletester for these because there is no way to configure RuleTester to run non .js files
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there an issue for that?

If not, should we create one?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm looking more into this. I know it wasn't working properly for me when I tried using ruleTester to test this rule and I thought I had read in their docs that it does not support non .js extensions but I can't find where I read that anymore.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

News on this?


## Rule Details

This rule looks at all Jest snapshot files (files with `.snap` extension) and
Copy link
Member

@SimenB SimenB Nov 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is it possible to ignore any of them (// eslint-disable)? without using overrides in the config

Copy link
Contributor Author

@anescobar1991 anescobar1991 Nov 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes it does work. But on snapshot updates it would be wiped I believe so not sure how useful that would be.

Correction: Simply running jest with -u flag will not wipe the comment, but if there is an actual change to the snapshot file that has a comment then the entire file is regenerated and as such the comment wiped.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we include some sort of config then, to be able to ignore specific snapshots?

Copy link
Contributor Author

@anescobar1991 anescobar1991 Nov 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Specific snapshots or entire snapshot files? If it is the latter then I am not sure how much value that would add, we would just be duplicating eslint functionality (can use overrides or have separate .eslintrc files).

If you mean ignoring specific snapshots then yes I believe that can be done pretty easily, I can work on that today.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I meant snapshot files, not specific snapshots within them 🙂

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thinking about it more I am not sure that being able to ignore a specific snapshot through a config would be a good user experience. They would have to provide the snapshot names in an array which could get unwieldy. It may be better to ignore whole files using built in eslint functionality.

How are you envisioning it?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, .eslintignore is probably enough :)

@anescobar1991 anescobar1991 force-pushed the feature/add-no-large-snapshots-rule branch from 8dc0cd8 to 631b7b5 Compare November 30, 2017 21:07
@anescobar1991
Copy link
Contributor Author

@SimenB Just pushed changes that takes care of all the feedback. Few things to note: eslint-plugin-self is no longer needed and I removed parserOptions from the recommended config since this rule is no longer being exported with it.

README.md Outdated
@@ -40,6 +40,7 @@ Then configure the rules you want to use under the rules section.
"jest/no-disabled-tests": "warn",
"jest/no-focused-tests": "error",
"jest/no-identical-title": "error",
"jest/no-large-snapshots": "warn",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought this was a list of all the rules exported that the user can configure independently of the recommended config. Why wouldn't it be in there?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

well, they now match the recommended config. Maybe that's weird? It doesn't list all rules

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah you're right that is weird. As a user I took that as an example of how you could configure the rules exported within this plugin. To me the table near the bottom of the README is what lets me know whether a rule is in the recommended config or not.

Either way let me know how you want me to proceed.

Copy link
Member

@SimenB SimenB Nov 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't really care either way, but having 2 lists of all rules doesn't make sense.

Take a look at e.g. https://github.com/yannickcr/eslint-plugin-react (just a couple examples, then a huge list). Or maybe https://github.com/benmosher/eslint-plugin-import, which has 5, then "etc.". followed by a list

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense. I was just trying to follow what I thought was the pattern already established. But I see that it wasn't a complete list to begin with so my bad! I will remove.

Copy link
Member

@SimenB SimenB left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you update the changelog as well?

@SimenB
Copy link
Member

SimenB commented Nov 30, 2017

GTG from my side, would just like another set of eyes on it 🙂

```json
...
"rules": {
"jest/no-large-snapshots": ["warn", { "sizeThreshold": 12 }]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can’t we just name it “size”?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

or maxSize?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done in 8267cfa

"lineCount": 52,
"lineLimit": 50,
},
"message": "Expected Jest snapshot to be smaller than {{ lineLimit }} lines but was {{ lineCount }} lines long",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are the values not replaced here?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’m fine if eslint just picks this up from corresponding data obj, which it probably does (sorry, I’m not an eslint plug-in expert 😅)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’m fine if eslint just picks this up from corresponding data obj, which it probably does

It does

@anescobar1991
Copy link
Contributor Author

Anything pending or can this be merged?

@SimenB
Copy link
Member

SimenB commented Dec 2, 2017

@SimenB SimenB merged commit a42d917 into jest-community:master Dec 2, 2017
@SimenB
Copy link
Member

SimenB commented Dec 2, 2017

Release blocked on #20 (#8), unfortunately.

@SimenB
Copy link
Member

SimenB commented Dec 4, 2017

Published as 21.4.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants