当我尝试使用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
错误。有谁知道怎么了?
答案 0 :(得分:2)
这不是您正在使用的渲染器的问题。问题是你正在使用chai期望而不是带有jest的期望库。 chai API没有toMatchSnapshot
方法。要解决此问题,您可以执行以下操作:
import { expect } from 'chai'
但是,如果您需要继续使用chai(即您已经编写了很多chai测试并且您不想一次性进行大修),您可以做两件事:
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;
};
答案 1 :(得分:0)
它的Simple.Just将你的测试脚本(something.spec.js)写入另一个文件而不导入'chai'。它会像魅力一样工作。不需要杂乱的东西。保持简单!
答案 2 :(得分:0)
这部分与其他作者给出的这个帖子和根本原因有关,非常准确且非常有用。
当我尝试使用expect(container).toHaveLength(1);
我通过更改以Jest方式编写断言的方式来解决此问题,例如,
expect(container).to.have.length(1);
因此,基本上,如果我们使用的是Jest,我们需要找到一种方法来更改断言以Jest方式编写。
希望它可以对某人有所帮助。