CODEWITHSUNDEEP
reactjsjestjs
Eric
Eric

Reputation: 1034

Jest snapshot undefined

i'm new to testing react with jest, and i'm confused as to why the snapshots that are generated keeps saying [undefined].

I feel like i'm definitely making a mistake somewhere in the test. And I'm not sure what's right or wrong at this point. The codes for code, test, and snapshot is posted below.

If anyone can help and point me in the direction would be greatly appreciated.

Checkbox.js

const styles = {
  checkbox: {
    color: '#ffffff',
    fontWeight: 100,
    fontSize: 14,
  },
};

const Checkbox = ({ label, checked, onChange, style }) => (
  <label style={{ ...styles.checkbox, ...style }}>
    <input checked={checked} type="checkbox" onChange={onChange} />
    {label}
  </label>
);

Checkbox.test.js

const label = 'Checkbox Test';
const checked = false;
const onChange = jest.fn();

describe('Checkbox', () => {
  it('renders correctly', () => {
    const cbTest = shallow(
    <Checkbox>
    <label style={{ ...styles.checkbox }}>
    <input checked={checked} type="checkbox" onChange={onChange} /> 
    {label}
    </label>
    </Checkbox>);
    expect(cbTest).toMatchSnapshot();
  });
});

snapshot

exports[`Checkbox renders correctly 1`] = `
<label
  style={
    Object {
      "color": "#ffffff",
      "fontSize": 14,
      "fontWeight": 100,
    }
  }
>
  <input
    checked={undefined}
    onChange={undefined}
    type="checkbox"
  />

</label>
`;

Upvotes: 0

Views: 4475

Answers (1)

Andreas K&#246;berle
Andreas K&#246;berle

Reputation: 111062

Its cause you dont pass the props to the Checkbox component

const label = 'Checkbox Test';
const checked = false;
const onChange = jest.fn();

describe('Checkbox', () => {
  it('renders correctly', () => {
    const cbTest = shallow(
    <Checkbox 
      checked={checked} 
      styles={styles} 
      onChange={onChange} 
      label="someLabel" />
    expect(cbTest).toMatchSnapshot();
  });
});

Upvotes: 2

Related Questions