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

y53ybaqx  于 2022-12-08  发布在  Jest
关注(0)|答案(1)|浏览(192)

我是jest测试的新手。现在我正在尝试使用快照测试来测试我的react组件。我遇到了这样的问题:jest只更新AppComponent的快照,而不更新另一个组件的快照,并且它通过了所有两个快照测试。
已尝试将名称传递给快照toMatchSnapshot(),已尝试将TestComponent的类型从函数更改为扩展组件的类,已尝试删除旧快照并再次测试,所有这些都失败了。此外,还尝试在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快照,否则测试会失败,但都没有发生。

ni65a41a

ni65a41a1#

我也刚遇到过这个问题。花了一个小时才发现toJSON少了一对括号。它应该是一个函数调用toJSON()而不仅仅是toJSON。真傻

相关问题