Jest快照测试由于响应导航生成的密钥而失败 [英] Jest snapshot test failing due to react navigation generated key

问题描述

我的Jest测试失败，因为每次运行测试时密钥的时间戳都不同:

My Jest test is failing because of the timestamp in the key being different every time the test is run:

 FAIL  ./App.test.js
  ✕ renders without crashing (72ms)

  ● renders without crashing

expect(value).toMatchSnapshot()

Received value does not match stored snapshot 1.

- Snapshot
+ Received

@@ -347,11 +347,11 @@
              "index": 0,
              "isTransitioning": false,
              "key": "StackRouterRoot",
              "routes": Array [
                Object {
-                 "key": "id-1519567169760-0",
+                 "key": "id-1519567814666-0",
                  "routeName": "Menu",
                },
              ],
            },
          }

这是我的App.js文件:

Here is my App.js file:

import React from 'react';
import { StackNavigator } from 'react-navigation';
import Menu from './components/Menu';
import List from './components/List';

const RootStack = StackNavigator(
  {
    Menu: {
      screen: Menu,
    },
    List: {
      screen: List,
    },
  },
  {
    initialRouteName: 'Menu',
  }
);

export default class App extends React.Component {
   render() {
     return <RootStack />;
   }
}

这是我的测试文件:

import React from 'react';
import App from './App';

import renderer from 'react-test-renderer';

test('renders without crashing', () => {
  const rendered = renderer.create(<App />).toJSON();
  expect(rendered).toBeTruthy();
  expect(rendered).toMatchSnapshot();
});

测试运行时是否可以覆盖键值?是否可以忽略键?

Is it possible override the key value or is there a way to ignore key when the test runs?

推荐答案

较新版本的jest还支持

Newer versions of jest also support property matchers which allow certain parts of the snapshot to be evaluated using a matcher instead of requiring the entire snapshot to be identical.

下面是一个示例，显示了使用此功能解决OP问题的几种不同方法:

Here is an example showing a few different approaches to using this feature to solve OP's question:

it('Should ignore route keys in snapshot', () => {
  const testObject = {
    index: 0,
    isTransitioning: false,
    key: 'StackRouterRoot',
    routes: [
      {
        key: `id-${Date.now()}-0`,
        routeName: 'Menu',
      },
      {
        key: `id-${Date.now()}-1`,
        routeName: 'Splash',
      },
    ],
  };

  expect(testObject).toMatchSnapshot({
    routes: [
      {
        key: expect.stringMatching(/id-\d+?-\d/),
        routeName: 'Menu',
      },
      {
        key: expect.stringMatching(/id-\d+?-\d/),
        routeName: 'Splash',
      },
    ],
  }, 'Explicitly list all routes');

  expect(testObject).toMatchSnapshot({
    routes: expect.arrayContaining([
      expect.objectContaining({
        key: expect.stringMatching(/id-\d+?-\d/),
      }),
    ]),
  }, 'Match any route');
});

哪个会生成以下快照:

exports[`<App /> Should ignore route keys in snapshot: Explicitly list all routes 1`] = `
Object {
  "index": 0,
  "isTransitioning": false,
  "key": "StackRouterRoot",
  "routes": Array [
    Object {
      "key": StringMatching /id-\\\\d\\+\\?-\\\\d/,
      "routeName": "Menu",
    },
    Object {
      "key": StringMatching /id-\\\\d\\+\\?-\\\\d/,
      "routeName": "Splash",
    },
  ],
}
`;

exports[`<App /> Should ignore route keys in snapshot: Match any route 1`] = `
Object {
  "index": 0,
  "isTransitioning": false,
  "key": "StackRouterRoot",
  "routes": ArrayContaining [
    ObjectContaining {
      "key": StringMatching /id-\\\\d\\+\\?-\\\\d/,
    },
  ],
}
`;

我最近遇到的另一个开玩笑的功能可能对您有帮助，它是自定义快照序列化程序.使用此功能，我认为您可以为路由对象添加一个序列化程序，该序列化程序将在序列化之前删除密钥或将其替换为静态值.由于我尚未使用此功能，因此目前无法提供示例，但这似乎值得一提.

Another jest feature I came across recently that might help here is custom snapshot serializers. Using this feature I think you could add a serializer for route objects that would remove the key or replace it with a static value before it is serialized. I can't provide an example right now as I have not yet used this feature, but it seemed worth mentioning.

这篇关于Jest快照测试由于响应导航生成的密钥而失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！