reactjs - 无效的 Chai 属性 : toMatchSnapshot -- React. js Jest 测试

Question

当我尝试使用 Jest + Enzyme 的快照测试时，出现错误:Invalid Chai property: toMatchSnapshot。我已将我的 React 版本更新到 16.2，并将 enzyme-to-json 库与 Enzyme 3 一起使用。

代码如下:

import React from 'react';
import ReactDOM from 'react-dom';
import ConnectedApp, { App } from './App';
import { ConnectedRouter } from 'react-router-redux';
import { Provider } from 'react-redux';
import { expect } from 'chai';
import { mount, shallow } from 'enzyme';
import createHistory from 'history/createMemoryHistory'
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import toJson from 'enzyme-to-json';

describe('App tests', () => {
  const middlewares = [thunk];
  const mockStore = configureMockStore(middlewares);
  let store, container, history, wrapper;

  const initialState = {
    output: true
  }

  beforeEach(() => {
    store = mockStore(initialState);
    history = createHistory();
    wrapper = mount(
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <ConnectedApp />
        </ConnectedRouter>
      </Provider>
    )  
  });

  it('+++capturing Snapshot of App', () => {
    expect(toJson(wrapper)).toMatchSnapshot();
  });
})

我也像这样用 Jest 的渲染器尝试过这个:

import renderer from 'react-test-renderer';

it('renders correctly', () => {
  var component = <Provider store={store}>
                    <ConnectedRouter history={history}>
                      <ConnectedApp />
                    </ConnectedRouter>
                   </Provider>
  const tree = renderer
    .create(component)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

但我仍然收到 Invalid Chai property: toMatchSnapshot 错误。有人知道怎么回事吗？

Answer 1

这不是您使用的渲染器的问题。问题是您使用的是 chai expectations 而不是 jest 附带的 expectation 库。 chai API 没有toMatchSnapshot 方法。要修复它，您可以执行以下操作:

1. 停止使用 chai，只使用 Jest 期望。这可能只是删除第 6 行的问题:import {expect } from 'chai'

但是，如果您需要继续使用 chai(即您已经编写了很多 chai 测试并且您不想一次进行大修)，您可以做两件事:

1. 在您的测试设置文件中为 chai 或 jest expect 函数设置别名，例如global.chaiExpect = chai.expect

2. Monkey-patch 全局 expect 函数，这样您就可以像这篇博文中那样同时使用 chai 和 jest API:https://medium.com/@RubenOostinga/combining-chai-and-jest-matchers-d12d1ffd0303

   相关位是这样的:

// Make sure chai and jasmine ".not" play nice together
const originalNot = Object.getOwnPropertyDescriptor(chai.Assertion.prototype, 'not').get;
Object.defineProperty(chai.Assertion.prototype, 'not', {
  get() {
    Object.assign(this, this.assignedNot);
    return originalNot.apply(this);
  },
  set(newNot) {
    this.assignedNot = newNot;
    return newNot;
  },
});

// Combine both jest and chai matchers on expect
const originalExpect = global.expect;

global.expect = (actual) => {
  const originalMatchers = originalExpect(actual);
  const chaiMatchers = chai.expect(actual);
  const combinedMatchers = Object.assign(chaiMatchers, originalMatchers);
  return combinedMatchers;
};