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期望而不是带有jest的期望库。 chai API没有toMatchSnapshot方法。要解决此问题，您可以执行以下操作：

停止使用chai并专门使用jest期望。这可能仅仅是删除第6行：import { expect } from 'chai'

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

为测试设置文件中的chai或jest expect函数设置别名，例如global.chaiExpect = chai.expect
对全局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;
};

Answer 2

它的Simple.Just将你的测试脚本（something.spec.js）写入另一个文件而不导入'chai'。它会像魅力一样工作。不需要杂乱的东西。保持简单！

Answer 3

这部分与其他作者给出的这个帖子和根本原因有关，非常准确且非常有用。

当我尝试使用expect(container).toHaveLength(1);

时，我也遇到了与本文中讨论的问题相同的问题

我通过更改以Jest方式编写断言的方式来解决此问题，例如， expect(container).to.have.length(1);

因此，基本上，如果我们使用的是Jest，我们需要找到一种方法来更改断言以Jest方式编写。

希望它可以对某人有所帮助。

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

3 个答案: