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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues with CSS Modules when upgrading from jest@26.1.0 #10566

Closed
bensampaio opened this issue Sep 30, 2020 · 4 comments
Closed

Issues with CSS Modules when upgrading from jest@26.1.0 #10566

bensampaio opened this issue Sep 30, 2020 · 4 comments

Comments

@bensampaio
Copy link
Contributor

bensampaio commented Sep 30, 2020

馃挜 Regression Report

I use a custom mock for CSS Modules which has been working well so far but when I upgrade from jest@26.1.0 to jest@26.2.2 or higher I get the following error on some component snapshots:

PrettyFormatPluginError: _val$hasAttribute.call is not a functionTypeError: _val$hasAttribute.call is not a function

I also tried to use identity-obj-proxy but I get the same issue.

It seems that pretty-format is giving some kind of special treatment to Proxy values when they need to be printed to the snapshot.

Last working version

Worked up to version: 26.1.0

Stopped working in version: 26.2.2 (or probably even 26.2.0)

To Reproduce

Steps to reproduce the behavior:

import React from 'react';

import OtherComponent from './OtherComponent.jsx';
import styles from './SomeComponent.css';

const SomeComponent = () => <OtherComponent styles={styles} />;

export default SomeComponent;
  • then try to shallow render the component above using react-test-renderer/shallow:
import React from 'react';
import { createRenderer } from 'react-test-renderer/shallow';

import SomeComponent from './SomeComponent.jsx';

test('renders other component', () => {
    const renderer = createRenderer();

    const result = renderer.render(<SomeComponent />);

    expect(result.getRenderOutput()).toMatchSnapshot();
});
  • finally run the tests.

Expected behavior

For the example given above I expected a snapshot like: <OtherComponent styles={[Proxy]} /> or even better <OtherComponent styles={[CSSModule]} />

Link to repl or repo (highly encouraged)

https://repl.it/repls/PurpleGregariousNasm

Run npx envinfo --preset jest

Paste the results here:

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  Binaries:
    Node: 12.18.3 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.6 - /usr/local/bin/npm
@graup
Copy link

graup commented Apr 22, 2021

I think this is fixed in #11000 (merged in v27.0.0-next)

@graup
Copy link

graup commented Apr 22, 2021

However, it is indeed a regression introduced in 26.2.0 (10375b3#diff-613ecfa1f4870d9a44f998eccfd5a298bb867ac8a6c55a9da06cb9338e3d4a54)

@SimenB
Copy link
Member

SimenB commented Apr 22, 2021

I think this is fixed in #11000 (merged in v27.0.0-next)

Indeed 馃憤

@SimenB SimenB closed this as completed Apr 22, 2021
@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 23, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants