Question

我有这个容器

import React from "react";

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <input type="text" onChange={this.changeInput} />
        <button onClick={this.addItem}>Add</button>
      </div>
    );
  }
}

export default App;

为什么不能在其上使用shallow？我的测试看起来像这样

import App from "./index";

describe("App", function() {
  it("should render", function() {
    const wrapper = shallow(<App />);
    //expect(wrapper).toBe(1);
  });
});

错误显示Enzyme expects an adapter to be configured, but found none.，但我相信我已经正确设置了酶。我想测试App是否包含输入和按钮，但是我被卡在那里。

演示https://codesandbox.io/s/21rz901mp0

Answer 1

只需安装此软件包import React from 'react'; import ReactDOM from 'react-dom'; import ApolloClient from 'apollo-boost'; import { ApolloProvider } from 'react-apollo'; import { BrowserRouter } from 'react-router-dom'; import { Provider as StoreProvider } from 'react-redux'; import { PersistGate } from 'redux-persist/integration/react'; import { store, persistor } from 'STORE/index'; import App from './App'; const apolloClient = new ApolloClient({ uri: 'http://localhost:3000/graphql' }); const render = (App) => { ReactDOM.render( <ApolloProvider client={apolloClient}> <StoreProvider store={store}> <PersistGate loading={null} persistor={persistor}> <BrowserRouter> <App /> </BrowserRouter> </PersistGate> </StoreProvider> </ApolloProvider>, document.getElementById('root') ); }; render(App); if (module.hot) { module.hot.accept('./App', () => { render(require('./App')); console.log('App updated successfully.'); }); }，然后在测试中添加这两行：

enzyme-adapter-react-16

Answer 2

创建一个酶.js文件并添加以下代码... 并将其导入测试单元-测试用例文件

import Enzyme, { configure, shallow, mount, render } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });
export { shallow, mount, render };
export default Enzyme;

尽管成功设置了酶，但未能测试容器

2 个答案: