Question

我是玩笑测试的新手。现在，我正在尝试使用快照测试来测试我的反应组件。我遇到过这样的问题：开玩笑只会为AppComponent更新快照，而不会为另一个组件更新快照，并且它会通过所有这两个快照测试。怎么了？

尝试将名称传递给快照toMatchSnapshot（），尝试将TestComponent的类型从函数更改为扩展Component的类，尝试删除旧快照并再次进行测试，所有这些都是徒劳的。此外，尝试在AppComponent默认html以下的AppComponent中呈现TestComponent，这仅导致更新AppComponent快照。

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

我希望快照测试也可以用适当的快照填充TestComponent快照，否则测试将失败，但是都没有发生。

玩笑快照测试未生成适当的快照并通过

0 个答案: