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

时间:2017-12-16 06:05:37

标签: reactjs testing chai enzyme jest

当我尝试使用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错误。有谁知道怎么了?

3 个答案:

答案 0 :(得分:2)

这不是您正在使用的渲染器的问题。问题是你正在使用chai期望而不是带有jest的期望库。 chai API没有toMatchSnapshot方法。要解决此问题,您可以执行以下操作:

  1. 停止使用chai并专门使用jest期望。这可能仅仅是删除第6行:import { expect } from 'chai'
  2. 但是,如果您需要继续使用chai(即您已经编写了很多chai测试并且您不想一次性进行大修),您可以做两件事:

    1. 为测试设置文件中的chai或jest expect函数设置别名,例如global.chaiExpect = chai.expect
    2. 对全局expect函数进行修补,以便您可以使用chai和jest API,如以下博文:https://medium.com/@RubenOostinga/combining-chai-and-jest-matchers-d12d1ffd0303

      相关的一点是:

    3. // 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;
      }; 
      

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

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

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

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

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

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