Question

正如主题所说，状态为空，我看不出原因。

React 16
Jest
酶
Webpack 4
巴别

（下面的package.json）

我几乎可以搜索到所有可能的链接（尽管如此，我很可能只是错过了那个告诉我自己做错了什么的人）。

如果有人用简单的方式回答，请在此处查看＆＃39;链接，它解决了我所有的问题我将关闭它（在我咀嚼一些岩石一段时间后）并愉快地继续前进，但经过几个小时的自我撞墙后，我接近回去茉莉花......它至少在那里工作过。：\

输出：

 PASS  __tests__\Components\ListBox.spec.js
  ● Console

    console.log __tests__\Components\ListBox.spec.js:33
      _____ wrapper: null
    console.log __tests__\Components\ListBox.spec.js:34
      ____ instance: null

测试套房：1次通过，共1次测试：2次通过，共计2次快照：总共0 时间：0.985s，估计1s 完成与已更改文件相关的所有测试套件。

这是我的package.json：

{
    "name": "module",
    "version": "1.0.1",
    "author": "thanks all!",
    "description": "",
    "license": "MIT",
    "main": "src/main.jsx",
    "jest": {
        "automock": true,
        "testEnvironment": "jsdom",
        "verbose": false,
        "setupFiles": [
            "raf/polyfill"
        ],
        "moduleNameMapper": {
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
            "\\.(css|less)$": "identity-obj-proxy"
        },
        "moduleFileExtensions": [
            "js",
            "jsx",
            "es6"
        ],
        "unmockedModulePathPatterns": [
            "react",
            "react-dom",
            "react-addons-test-utils",
            "enzyme"
        ],
        "modulePaths": [
            "<rootDir>/src",
            "<rootDir>/src/app",
            "<rootDir>/src/app/Components"
        ],
        "transform": {
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|js|jsx|es6)$": "./node_modules/babel-jest"
        }
    },
    "jestWebpackResolver": {
        "webpackConfig": "./webpack.config.js"
    },
    "scripts": {
        "start": "webpack-dev-server --env=dev --colors --hot --mode development -d",
        "build": "webpack --env=dev --progress --profile --colors --mode development",
        "release": "webpack --env=prod --progress --profile --colors --mode production",
        "watch": "webpack --env=dev --profile --colors --watch --watch-poll --mode development",
        "lint": "eslint ./src/**.js",
        "coverage": "jest --coverage",
        "test": "jest",
        "test-watch": "jest --coverage --watch --colors",
        "testw": "jest --watch --colors"
    },
    "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-eslint": "^8.2.2",
        "babel-jest": "^22.4.1",
        "babel-loader": "^7.1.4",
        "babel-preset-env": "^1.6.1",
        "babel-preset-stage-3": "^6.24.1",
        "core-js": "^2.5.5",
        "css-loader": "^0.28.10",
        "enzyme": "^3.3.0",
        "eslint": "^4.18.2",
        "eslint-config-airbnb": "^16.1.0",
        "eslint-import-resolver-webpack": "^0.9.0",
        "eslint-loader": "^2.0.0",
        "eslint-plugin-import": "^2.9.0",
        "eslint-plugin-jsx-a11y": "^6.0.3",
        "eslint-plugin-react": "^7.7.0",
        "identity-obj-proxy": "^3.0.0",
        "jest": "^22.4.2",
        "jest-enzyme": "^6.0.0",
        "jest-webpack-resolver": "^0.3.0",
        "node-sass": "^4.5.3",
        "object-assign": "^4.1.1",
        "raf": "^3.4.0",
        "react-hot-loader": "^4.0.0",
        "react-test-renderer": "^16.3.2",
        "sass-loader": "^6.0.6",
        "style-loader": "^0.20.3",
        "webpack-dev-server": "^3.1.1",
        "webpack-merge": "^4.1.2"
    },
    "dependencies": {
        "babel-preset-react": "^6.24.1",
        "clean-webpack-plugin": "^0.1.19",
        "enzyme-adapter-react-16": "^1.1.1",
        "extract-text-webpack-plugin": "^4.0.0-beta.0",
        "flux": "^3.1.3",
        "font-awesome": "^4.7.0",
        "html-webpack-plugin": "^3.0.6",
        "jest-environment-enzyme": "^6.0.0",
        "lodash": "^4.17.5",
        "moment": "^2.22.0",
        "node-rest-client": "^3.1.0",
        "npm": "^5.7.1",
        "prop-types": "^15.6.1",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "react-router": "^4.2.0",
        "react-router-dom": "^4.2.2",
        "webpack": "^4.2.0",
        "webpack-bundle-analyzer": "^2.11.1",
        "webpack-cli": "^2.0.13",
        "webpack-dev-middleware": "^3.0.1"
    }
}

这是我的spec文件：

/*
    eslint-disable
    react/jsx-filename-extension,
    import/first,
    no-console
*/
jest.dontMock('enzyme');
jest.dontMock('react');
jest.dontMock('react-dom');
import React from 'react';
import Adapter from 'enzyme-adapter-react-16';
import { configure, shallow, mount } from 'enzyme';
import { ListBox } from 'app/Components/ListBox/ListBox';

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

jest.dontMock('app/Components/ListBox/ListBox');

describe('<ListBox {...props} />', () => {
    let wrapper;
    let list;
    const items = [{ text: 'test', key: 1 }];

    describe('<ListBox {...props} />', () => {
        beforeEach(() => {
            wrapper = mount(<ListBox items={items} />);
            list = wrapper.instance();
        });
        it('Can mount without error', () => {
            expect(list).toBeInstanceOf(ListBox);
        });
        it('accepts an array of items to display and stores them in local state.', () => {
            console.log(`_____ wrapper: ${wrapper.state()}`);
            console.log(`____ instance: ${wrapper.instance().state}`);
        });
    });
});

以下是被测组件的开头：

import React from 'react';

export default class ListBox extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            items: this.props.items
        }
    }

    render() {
        return <div>div</div>;
    }
}
export { ListBox };

Answer 1

解决了我自己的问题。在package.json中将automock设置为false，然后根据需要显式模拟/取消模拟为我解决了问题。

希望将来能有所帮助。

wrapper.state（）和wrapper.instance（）。state（）都是null react / jest / enzyme

1 个答案: