vendredi 23 août 2019

Jest snapshot testing not generating appropriate snapshot and passing

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