Enzyme: ShallowWrapper::state() can only be called on the root

[AzranAzwer]

when i run my test i am getting this error,
● Login Component › should initiate state

ShallowWrapper::state() can only be called on the root

  36 | 
  37 |   it("should initiate state", () => {
> 38 |     expect(wrapper.state()).toEqual({
     |                    ^
  39 |       email: "",
  40 |       password: "",
  41 |       validEmail: true,

  at ShallowWrapper.state (node_modules/enzyme/src/ShallowWrapper.js:1174:13)
  at Object.state (__tests__/login.test.js:38:20)

Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 passed, 2 total
Snapshots: 1 passed, 1 total
Time: 12.148s
Ran all test suites.

Watch Usage: Press w to show more.

here i am attaching my code below

const setUp = (initialState = {}) => {
  const store = testStore(initialState);
  const wrapper = shallow(
    <Login navigation={{ navigate: jest.fn() }} store={store} />
  ).childAt(0).dive();
  return wrapper;
};

describe("Login Component", () => {
  let wrapper;
  beforeEach(() => {
    const initialState = {
      auth: {
        user: {}
      }
    };
    wrapper = setUp(initialState);
  });

  it("Login page snapshot test", () => {
    const tree = renderer.create(wrapper).toJSON();
    expect(wrapper).toMatchSnapshot();
  });

  it("should initiate state", () => {
    expect(wrapper.state()).toEqual({
      email: "",
      password: "",
      validEmail: true,
      submitState: false,
      loginActionState: false,
      secureTextEntry: true,
      errors: {}
    });
  });

[ljharb]

Please fill out the entire issue template; including what versions of everything you have.

Also, please provide the code for Login.

(as an aside; if you're going to do snapshot testing - which i discourage, as it's very brittle - use wrapper.debug() to serialize)

[AzranAzwer]

Current behavior

//login.js
class Login extends Component {
  constructor() {
    super();
    this.state = {
      email: "",
      password: "",
      validEmail: true,
      submitState: false,
      loginActionState: false,
      secureTextEntry: true,
      errors: {}
    };

//login.test.js
const setUp = (initialState = {}) => {
  const store = testStore(initialState);
  const wrapper = shallow(
    <Login navigation={{ navigate: jest.fn() }} store={store} />
  ).childAt(0);

  return wrapper;
};

describe("Login Component", () => {
  let wrapper;
  beforeEach(() => {
    const initialState = {
      auth: {
        user: {}
      }
    };
    wrapper = setUp(initialState);
  });

  it("Login page snapshot test", () => {
    const tree = renderer.create(wrapper).toJSON();
    expect(tree).toMatchSnapshot();
  });

  it("should initiate state", () => {
    expect(wrapper.state()).toEqual({
      email: "",
      password: "",
      validEmail: true,
      submitState: false,
      loginActionState: false,
      secureTextEntry: true,
      errors: {}
    });
  });



md5-64a6422d3f7f73ecc1293b730fb2afdb



ShallowWrapper::state() can only be called on the root

      37 | 
      38 |   it("should initiate state", () => {
    > 39 |     expect(wrapper.state()).toEqual({
         |                    ^
      40 |       email: "",
      41 |       password: "",
      42 |       validEmail: true,

      at ShallowWrapper.state (node_modules/enzyme/src/ShallowWrapper.js:1174:13)
      at Object.state (__tests__/login.test.js:39:20)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   1 passed, 1 total
Time:        10.186s
Ran all test suites.

Watch Usage: Press w to show more.

Expected behavior

should initiate the state

Your environment

API

• [x] shallow
• [ ] mount
• [ ] render

Version

| library | version
| ------------------- | -------
| enzyme | "^3.10.0"
| react | 16
| react-dom | "^16.8.6"
| react-test-renderer | "16.6.3"
| adapter (below) | "^1.14.0"

Adapter

• [x ] enzyme-adapter-react-16

[ricvillagrana]

Same issue here, with the same versions.

[rohithZE]

@AzranAzwer were you able to resolve it?

[ElliDy]

With making a provider around my component like this

shallowWrapper = shallow(
    <Provider store={mockStore(initialState)}>
      <ChargingSessionsScreen navigation={navigationProp} screenProps={{translate: jest.fn()}}/>
    </Provider>
  );

I am able to get my state with

shallowWrapper.state().store.getState()

Why you need to make childAt(0) behind it?