I'm new at jest testing. Now I'm trying to test my react components using snapshot testing. I've encountered such problem: jest only updates snapshot for AppComponent, but does not for another component, also it passes all both snapshot tests. What's wrong?
Have tried passing names to snapshot toMatchSnapshot(), have tried to change type of TestComponent from function to class extending Component, have tried deleting old snapshots and testing again, all in wain. Also, tried to render TestComponent in AppComponent below AppComponent default html and it caused updating AppComponent snapshot only.
AppComponent
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { TestComponent } from './TestComponent';
export function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
Learn React
</a>
</header>
</div>
);
}
export default App;
AppComponent test
import React from 'react';
import ReactDOM from 'react-dom';
import { App, reverseOfReverse, addTwoIntegers } from './App';
import renderer from 'react-test-renderer';
describe('snapshot tests', () => {
test('matches the snapshot', () => {
const tree = renderer.create(<App />).toJSON();
expect(tree).toMatchSnapshot('AppComponentSnapshot');
});
});
AppComponent snapshot
// Jest Snapshot v1
exports[`snapshot tests matches the snapshot: AppComponentSnapshot 1`] = `
<div
className="App"
>
<header
className="App-header"
>
<img
alt="logo"
className="App-logo"
src="logo.svg"
/>
<p>
Edit
<code>
src/App.js
</code>
and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
rel="noopener noreferrer"
target="_blank"
>
Learn React
</a>
</header>
</div>
`;
TestComponent
import logo from './logo.svg';
import React, { Component } from 'react';
export class TestComponent extends Component {
render() {
return (
<div className="TestComponent">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
Learn React
</a>
</header>
<div>lola</div>
<div>amanda</div>
</div>
);
}
}
export default TestComponent;
TestComponent test
import React from 'react';
import renderer from 'react-test-renderer';
import { TestComponent } from './TestComponent';
describe('snapshot for second component', () => {
test('matches second snapshot', () => {
const tree = renderer.create(<TestComponent />).toJSON;
expect(tree).toMatchSnapshot('TestComponentSnapshot');
});
});
TestComponent snapshot
// Jest Snapshot v1
exports[`snapshot for second component matches second snapshot: TestComponentSnapshot 1`] = `[Function]`;
I expected that snapshot test would also fill TestComponent snapshot with appropriate snapshot, or the test would fail, but neither happened.
Aucun commentaire:
Enregistrer un commentaire