Closed
Description
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.