Eric Eric - 24 days ago 7
React JSX Question

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>
`;

Answer Source

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();
  });
});