无效的 Chai 属性：matchSnapshot

Question

我已按照此处的说明进行操作：https://www.npmjs.com/package/chai-jest-snapshot

我正在使用Create-React-App 入门工具包并尝试为其编写基本的 Jest 测试。

我read here，如果我们使用该套件，我们不应该安装jest，所以这是我的完整 package.json。

{
  "name": "bitcoin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "test": "jest"
  },
  "now": {
    "name": "bitcoin",
    "engines": {
      "node": "8.11.3"
    },
    "alias": "leongaban.com"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-redux": "^5.0.7",
    "react-scripts": "1.1.5",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "chai": "^4.1.2",
    "chai-jest-snapshot": "^2.0.0",
    "enzyme": "^3.4.4",
    "enzyme-adapter-react-16": "^1.2.0",
    "react-test-renderer": "^16.4.2",
    "sinon": "^6.1.5"
  }
}

我的测试：

import React from 'react';
import renderer from 'react-test-renderer';

import { expect } from 'chai';
import { shallow } from 'enzyme';
import sinon from 'sinon';

import BitcoinWidget from './bitcoinWidget';

const props = {
  logo: 'foo',
  coin: {
    price: 0
  },
  refresh: jest.fn()
};

// describe('<BitcoinWidget />', () => {
//   it('renders three <BitcoinWidget /> components', () => {
//     const wrapper = shallow(<MyComponent {...props}/>);
//     expect(wrapper.find('header').length).toBe(1);
//   });
// });

describe('Layout', () => {
  test('renders children correctly', () => {
    const wrapper = renderer
      .create(
        <BitcoinWidget {...props}/>
      )
      .toJSON();

    expect(wrapper).to.matchSnapshot();
  });
});

最后是我正在测试的组件：

import React from 'react';

const BitcoinWidget = ({ logo, coin : { price }, refresh }) => {
  return (
    <div className="bitcoin-wrapper shadow">
      <header>
        <img src={logo} alt="Bitcoin Logo"/>
      </header>
      <div className="price">
        Coinbase
        ${price}
      </div>
      <button className="btn striped-shadow white" onClick={refresh}>
        <span>Refresh</span>
      </button>
    </div>
  );
}

export default BitcoinWidget;

有什么想法吗？

Answer 1

这是包的问题，​​我什至根本不需要使用 chai。

这是我的新 package.json

注意添加的"jest": 配置部分：

{
  "name": "bitcoin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "test": "jest src",
    "test:watch": "jest src --watch"
  },
  "now": {
    "name": "bitcoin",
    "engines": {
      "node": "8.11.3"
    },
    "alias": "leongaban.com"
  },
  "jest": {
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ]
  },
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-redux": "^5.0.7",
    "react-scripts": "1.1.5",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "chai": "^4.1.2",
    "chai-jest-snapshot": "^2.0.0",
    "enzyme": "^3.4.4",
    "enzyme-adapter-react-16": "^1.2.0",
    "enzyme-to-json": "^3.3.4",
    "identity-obj-proxy": "^3.0.0",
    "react-test-renderer": "^16.4.2",
    "sinon": "^6.1.5"
  }
}

如果没有 chai，我的测试就无法工作：

import React from 'react';
import renderer from 'react-test-renderer';
import Adapter from 'enzyme-adapter-react-16';
import { configure, shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
// import { expect } from 'chai';
// import sinon from 'sinon';

configure({ adapter: new Adapter() });

import BitcoinWidget from './bitcoinWidget';

let wrapper;

const props = {
  logo: 'foo',
  coin: {
    price: 0
  },
  refresh: jest.fn()
};

describe('<BitcoinWidget /> layout', () => {

  beforeEach(() => {
    wrapper = shallow(<BitcoinWidget {...props}/>);
  });

  it('renders correct markup', () => {
    expect(wrapper.find('header').length).toBe(1);
    expect(wrapper.find('button').length).toBe(1);
  });

  it('should render a component matching the snapshot', () => {
    const tree = toJson(wrapper);
    expect(tree).toMatchSnapshot();
    expect(wrapper).toHaveLength(1);
  });
});