Jest React - 新快照未写入。必须显式传递更新标志才能写入新快照

JS

使用Jest React进行快照测试时，有时可能会遇到新快照未写入的情况。这意味着我们需要显式地传递更新标志，以便可以写入新的快照。在本文中，我们将探讨这个问题，并提供一些解决方案来解决这个问题。

问题描述

在使用Jest React进行快照测试时，我们可以使用toMatchSnapshot方法来比较组件的快照。当我们对组件进行了更改，并运行测试时，Jest会将新的快照与之前的快照进行比较。如果快照发生了更改，Jest会提示我们更新快照，以确保测试的准确性。

然而，有时候当我们运行测试时，Jest会给出一个错误提示：“新快照未写入。必须显式传递更新标志才能写入新快照”。这意味着Jest无法自动更新快照，我们需要手动传递一个更新标志来解决这个问题。

解决方案

为了解决这个问题，我们可以在运行测试时使用--updateSnapshot或-u标志来传递更新标志。这样Jest就会自动更新快照，而不会出现“新快照未写入”的错误提示。例如，我们可以运行以下命令来更新快照：

jest --updateSnapshot

或者使用简写形式：

jest -u

这样，当我们的组件发生更改时，Jest会自动更新快照，并确保测试的准确性。

案例代码

让我们通过一个简单的案例代码来演示这个问题。假设我们有一个名为Button的组件，它渲染一个按钮，并且我们已经为它创建了一个快照测试。

JSx
// Button.JS
import React from 'react';
const Button = ({ label }) => (
  <button>{label}</button>
);
export default Button;

JSx
// Button.test.JS
import React from 'react';
import { render } from '@testing-library/react';
import Button from './Button';
test('should render button correctly', () => {
  const { contAIner } = render(<Button label="Click me" />);
  expect(contAIner.firstChild).toMatchSnapshot();
});

当我们运行测试时，如果我们对Button组件进行了更改，并且新的快照与之前的快照不一样，Jest会给出一个错误提示：“新快照未写入。必须显式传递更新标志才能写入新快照”。

为了解决这个问题，我们可以通过运行jest --updateSnapshot或jest -u命令来传递更新标志，并且Jest会自动更新快照。

在使用Jest React进行快照测试时，有时会遇到新快照未写入的情况。为了解决这个问题，我们可以在运行测试时传递更新标志，使用jest --updateSnapshot或jest -u命令来更新快照。这样Jest就会自动更新快照，并确保测试的准确性。通过采取这些措施，我们可以更好地管理和维护我们的快照测试。