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

Prettier 1.15, jsxSingleQuote and inline snapshots #7353

Closed
borekb opened this issue Nov 9, 2018 · 5 comments
Closed

Prettier 1.15, jsxSingleQuote and inline snapshots #7353

borekb opened this issue Nov 9, 2018 · 5 comments

Comments

@borekb
Copy link

borekb commented Nov 9, 2018

I'm trying Jest with the newly released Prettier 1.15 that supports jsxSingleQuote. I have set it to true in my .prettierrc and after running Jest, tests look like this:

it('...', () => {
    const tree = renderer.create(<Link to='/'>Example</Link>).toJSON();
    expect(tree).toMatchInlineSnapshot(`
<Link
  to="/"
>
  Example
</Link>
`);
});

I've got two questions here:

  1. Is it expected that Jest applies Prettier to the entire file? We don't use Prettier in this project, I was sort of assuming Jest only runs the snapshots through Prettier but before I updated to 1.15, I was getting <Link to="/"> on line 2.
  2. Is it expected that the snapshots themselves get double quotes? All tests are passing but it seems a bit strange.

Thanks.

@SimenB
Copy link
Member

SimenB commented Nov 10, 2018

  1. Yes, formatting just the snapshot part proved difficult,/cc @azz
  2. Yes, the serialization has nothing to do with prettier, that's done by pretty-format

@SimenB SimenB closed this as completed Nov 10, 2018
@borekb
Copy link
Author

borekb commented Nov 10, 2018

Thanks. I have to admit though that at this point I don't quite understand why Jest needs to format my source code – what would happen if I, for example, used different JSX quotes inside my renderer.create snippet?

@SimenB
Copy link
Member

SimenB commented Nov 10, 2018

We don't format jsx, we format the result from React.createElement passed through some render function.

For prettier discussion, please see #6380

@borekb
Copy link
Author

borekb commented Nov 10, 2018

Oh, I probably understand now, it took me a while :) So when Jest transforms this:

expect(tree).toMatchInlineSnapshot();

to this:

expect(tree).toMatchInlineSnapshot(`
<Example>hello</Example>
`);

it does so by reading my source file into AST via Prettier, appending the snapshot in it and calling prettier.format, right? That's pretty drastic but I can understand why it was easier than doing string manipulation (though it doesn't seem like a very complex one..).

Thanks!

@github-actions
Copy link

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 12, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants