Inline snapshots are not written to js files containing JSX syntax when the file is located in a subfolder
See original GitHub issue💥 Regression Report
Inline snapshots are not written to JavaScript files containing JSX syntax when the file is located in a subfolder. It works fine if the file is at the root of the project. It also works fine for TypeScript files in both root and subfolders.
Last working version
Worked up to version: 26.6.3
Stopped working in version: 27.0.0
To Reproduce
Steps to reproduce the behavior:
- Create a React dev environment using the following packages or clone my repo.
"@babel/core": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"@babel/preset-react": "^7.14.5",
"babel-jest": "^27.0.6",
"jest": "^27.0.6",
"prettier": "^2.3.2",
"react-test-renderer": "^17.0.2"
- Create a JavaScript test file in a subfolder e.g.
./src/inline-snapshot.spec.js
import React from 'react';
import TestRenderer from 'react-test-renderer';
it('should produce inline snapshot', () => {
const result = TestRenderer.create(<span>test</span>).toJSON();
expect(result).toMatchInlineSnapshot();
});
- Run the test using jest
Expected behavior
The inline snapshot should be written to the test file.
Link to repl or repo (highly encouraged)
https://replit.com/@JimMalmborg/inline-snapshot-regression?v=1
https://github.com/JimMalmborg/inline-snapshot.git
Run yarn
and yarn test
Note! Manually clear any existing snapshots from the test files before running the tests.
Run npx envinfo --preset jest
Paste the results here:
System:
OS: Windows 10 10.0.19043
CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz
Binaries:
Node: 15.4.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 7.0.15 - C:\Program Files\nodejs\npm.CMD
npmPackages:
jest: ^27.0.6 => 27.0.6
Issue Analytics
- State:
- Created 2 years ago
- Reactions:6
- Comments:29 (11 by maintainers)
Top Results From Across the Web
jest is not creating files for snapshots it add it inline to the ...
This method writes the content of the snapshot directly into the test file: https://jestjs.io/docs/snapshot-testing#inline-snapshots.
Read more >Module | webpack - JS.ORG
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...
Read more >Options - Babel.js
The filename associated with the code currently being compiled, if there is one. The filename is optional, but not all of Babel's functionality...
Read more >How To Write Snapshot Tests For React Components With Jest
In this tutorial, we will be looking at what snapshot tests are and how we can use snapshot testing to ensure our user...
Read more >Ignoring Code - Prettier
Use `.prettierignore` to ignore (i.e. not reformat) certain files and folders ... file in the root of your project. .prettierignore uses gitignore syntax....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@SimenB based on the recently released changelog and the linked PRs I think that perhaps this issue has been fixed by: https://github.com/facebook/jest/pull/13150
It’s worth noting that this bug prevents you from being able to update inline snapshots in files using flow syntax - locking that entire language out of using v27 if they want to update inline snapshots without resorting to the hack above.