Skip to content

className applied to incorrect nodes in 5.2.2 #244

Closed
@OscarBarrett

Description

@OscarBarrett

After upgrading from 5.2.1 to 5.2.2, className props applied to inner nodes using a spread are being applied to outer nodes as well.

For example:

import React from 'react';
import Slider from 'react-slick';

import styles from './styles.scss';

const Test = () => {
  const settings = {
    className: styles.innerSlider
  };

  return (
    <div styleName="vehicleSlider">
      foo

      <Slider {...settings}>
        bar
      </Slider>
    </div>
  );
};

export default Test;

Test:

import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';

import Test from '.';

describe('<Test />', () => {
  it('matches its snapshot', () => {
    const wrapper = shallow(<Test />);
    expect(toJson(wrapper)).toMatchSnapshot();
  });
});

Which generates the snapshot:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Test /> matches its snapshot 1`] = `
<div
  className="vehicleSlider innerSlider"
>
  foo
  <Slider
    className="innerSlider"
  >
    bar
  </Slider>
</div>
`;

The outer div should only have a className of vehicleSlider.

With 5.2.1, the snapshot is instead

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Test /> matches its snapshot 1`] = `
<div
  className="vehicleSlider"
>
  foo
  <Slider
    className="innerSlider"
  >
    bar
  </Slider>
</div>
`;

Which is what is expected.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions