無効なChaiプロパティ：toMatchSnapshot - React.js Jest testing

Question

Jest + Enzymeのスナップショットテストを使用しようとするとエラーが発生します：Invalid Chai property: toMatchSnapshotまた、私はそうのようにレンダリング冗談のでこれを試してみた

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(); 
    }); 
}) 

：

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(); 
}); 

私は私の

16.2へのバージョンに反応して、私は酵素3で enzyme-to-jsonライブラリを使用するコードは以下の通りです更新しました

しかし、私はまだInvalid Chai property: toMatchSnapshotエラーが発生します。誰でも何が起こっているか知っていますか？

Answer 1

これは、使用しているレンダラには問題ありません。問題は、あなたがjestと一緒に出荷されるexpectationライブラリの代わりにchai expectationsを使用していることです。チャイAPIにはtoMatchSnapshotメソッドがありません。それを修正するには、以下を実行することができます：

1. チャイを使用して排除することは排他的です。これは単にライン6の除去の問題である可能性がありますimport { expect } from 'chai'

あなたがチャイを引き続き使用する必要がある場合は、（つまり、すでに書かれたチャイ・テストの多くを持っていて、主要なオーバーホールを行うにはしたくありませんエイリアスチャイや冗談テスト・セットアップ・ファイルなどでexpect機能のいずれか

1. ：すべて一度に）あなたは、2つのことを行うことができますglobal.chaiExpect = chai.expect

2. モンキーパッチあなたがチャイと、このブログの記事のように冗談APIの両方を使用できるように、グローバルexpect機能を：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）を別のファイルに書き込むだけです。それは魅力のように動作します。面倒なものは必要ありません。シンプルにしてください！