All snapshots are empty

[astricus]

All shapshots in the project are actually empty objects ShallowWrapper {}

[astricus]

This issue is the same as #7802. To fix it enzyme-to-json should be added

[estebanrao]

Hi! I'm adding UT to my copy of this master project and run through this problem by checking that changes made to element properties were being tracked correctly by the snapshot check:

This is my GO TO CHECKOUT button:

<CustomButton
  as={Link}
  to="/checkout"
  onClick={() => dispatch(toggleCartHidden())}
>
  GO TO CHECKOUT
</CustomButton>

Note that I'm using the to shorthand instead of using history push, and wanted to make sure that if someone changes the /checkout by mistake, this issue was being tracked, but, to my surprise, it wasn't. That's when I realice that the snapshot file was "empty" (same with snapshot file in the cart-dropdown folder in this project).

After a lot of searching and trying I find that there's no need to use the enzyme-to-json serialiser. It will create a correct snapshot for the .toMatchSnapshot() method but it will not work for methods like .find() inside tests.

All I did was add the .debug() method before .toMatchSnapshot() and it did the trick. Since I wasn't able to find much documentation about this online it would be great to know if this is a working, stable solution.

This is my component:

import React from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { Link } from 'react-router-dom';

import CustomButton from '../custom-button/custom-button.component';
import CartItem from '../cart-item/cart-item.component';
import { selectCartItems } from '../../redux/cart/cart.selectors';
import { toggleCartHidden } from '../../redux/cart/cart.actions';

import {
  CartDropDownContainer,
  CartItemsContainer,
  EmptyMessage,
} from './cart-dropdown.styles';

export const CartDropdown = ({ cartItems, dispatch }) => {
  return (
    <CartDropDownContainer>
      <CartItemsContainer>
        {cartItems.length ? (
          cartItems.map((cartItem) => (
            <CartItem key={cartItem.id} item={cartItem} />
          ))
        ) : (
          <EmptyMessage>Your cart is empty</EmptyMessage>
        )}
      </CartItemsContainer>
<CustomButton
  as={Link}
  to="/checkout"
  onClick={() => dispatch(toggleCartHidden())}
>
  GO TO CHECKOUT
</CustomButton>
    </CartDropDownContainer>
  );
};

const mapStateToProps = createStructuredSelector({
  cartItems: selectCartItems,
});

export default connect(mapStateToProps)(CartDropdown);

And this my test file (running correctly)

import React from 'react';
import { shallow } from 'enzyme';

import { CartDropdown } from './cart-dropdown.component';
import CartItem from '../cart-item/cart-item.component';

const mockProps = {
  cartItems: [],
  dispatch: jest.fn(),
};
let wrapper;

beforeEach(() => {
  wrapper = shallow(<CartDropdown {...mockProps} />);
});

describe('CartDropdown', () => {
  it('should render CardDropdown component correctly with empty message', () => {
    expect(wrapper.debug()).toMatchSnapshot(); // First snapshot created with EmptyMessage element
    expect(wrapper.find('EmptyMessage').length).toEqual(1);
  });

  it('should render CardDropdown component correctly with cart items passed in props', () => {
    wrapper.setProps({ cartItems: [{ id: 'a' }, { id: 'b' }] });
    expect(wrapper.debug()).toMatchSnapshot(); // Second snapshot created with CartItem elements
    expect(wrapper.find(CartItem).length).toEqual(2);
  });
});

Thanks!