1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- import "raf/polyfill";
- import React from "react";
- import { App, appName, Link, titleName } from "./App";
- import { configure, shallow, mount } from "enzyme";
- import Adapter from "enzyme-adapter-react-16";
- import toJson from "enzyme-to-json";
- // Configure Enzyme for the React version we are using.
- // Could be in a test setup file. Required for React 16, 15, 0.14, 0.13.
- configure({ adapter: new Adapter() });
- describe("<App />>", () => {
- const wrapper = shallow(<App />);
- it("should find its elements", () => {
- // There is one <p> in <App />: only one shoud be present in shallow rendering.
- expect(wrapper.find("p").length).toBe(1);
- expect(wrapper.find("p.App-intro").exists()).toBe(true);
- expect(wrapper.find("ul").hasClass("tyler")).toBe(true);
- expect(wrapper.find("ul").children().length).toBe(3);
- expect(wrapper.find("h1").text()).toBe("Welcome to React");
- });
- it("should find using props", () => {
- // "key" and "ref" could not be used that way.
- // CSS attribute syntax.
- expect(wrapper.find("[text='Some title']").length).toBe(1);
- // Object property selector.
- expect(wrapper.find({ text: "Some title" }).length).toBe(1);
- });
- // FIXME cannot make sense of video.
- // @see http://airbnb.io/enzyme/docs/api/ReactWrapper/find.html
- test.skip("should find using a constructor", () => {
- // expect(wrapper.find(function App() { return ... }).length).toBe(1);
- });
- it("should find using displayName", () => {
- const w = mount(<App />);
- expect(w.find(appName).length).toBe(1);
- expect(w.find(titleName).length).toBe(1);
- });
- it("matches the snapshot", () => {
- const tree = shallow(<App />);
- expect(toJson(tree)).toMatchSnapshot();
- });
- });
- describe("<Link>", () => {
- const expected = "www.google.com";
- it("link component accepts address prop", () => {
- const wrapper = shallow(<Link address={expected} />);
- // wrapper.instance() is the React component. "props" is a property.
- expect(wrapper.instance().props.address).toBe(expected);
- });
- // wrapper itself is the ShallowWrapper instance, not the React component.
- it("tag node renders href correctly", () => {
- const wrapper = shallow(<Link address={expected} />);
- // Check its rendering:
- // console.log(wrapper.html(), wrapper.props());
- expect(wrapper.prop("href")).toBe(expected);
- // Here "props" is a method, not a property.
- expect(wrapper.props().href).toBe(expected);
- });
- it("returns null with true hide prop", () => {
- const wrapper = shallow(<Link address={expected} hide={false} />);
- expect(wrapper.find("a").length).toBe(1);
- expect(wrapper.props().href).toBe(expected);
- // Causes a rerender() of the component.
- // - triggers componentWillReceiveProps()
- wrapper.setProps({ hide: true });
- expect(wrapper.find("a").length).toBe(0);
- // Dangerous: some versions of React might inject comments in HTML.
- // expect(wrapper.html()).toBeNull();
- // expect(wrapper.getNode()).toBeNull();
- // Obsolete: getNode() is deprecated.
- // Recommended way https://github.com/airbnb/enzyme/issues/52
- expect(wrapper.getElement()).toBe(null);
- expect(wrapper.getElement()).toBeNull();
- // Get() returns the node at the given index on the wrapper.
- expect(wrapper.get(0)).toBeNull();
- });
- });
|