question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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:

  1. 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"
  1. 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();
});

  1. 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:closed
  • Created 2 years ago
  • Reactions:6
  • Comments:29 (11 by maintainers)

github_iconTop GitHub Comments

2reactions
Andaristcommented, Aug 25, 2022

@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

2reactions
bradzachercommented, Nov 12, 2021

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found