Question

我正在尽最大努力按照文档使用Enzyme和Jest创建浅层渲染，但似乎缺少一些东西。这是我的组件。


class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      code: ""
    }
  }

  getCode() {
    return "7";
  }

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

export default Example;

当我在浅层渲染器上调用getCode（）时，我希望得到“ 7”，但渲染器未定义。

这是我的测试用例：

import Example from './Example'
import { shallow } from 'enzyme';

it('gets a code from example', () => {
  const component = shallow(<Example />);
  console.log(JSON.stringify(component));

  expect(component.getCode().toEqual('7'));
});

我的输出：

 FAIL  src/components/CreateGame/Example.test.js (8.116s)
  ● Console

    console.log src/components/CreateGame/Example.test.js:7
      {}

  ● gets a code from example

    TypeError: component.getCode is not a function

       7 |   console.log(JSON.stringify(component));
       8 |
    >  9 |   expect(component.getCode().toEqual('7'));
         |                    ^
      10 | });

      at Object.<anonymous> (src/components/CreateGame/Example.test.js:9:20)

我觉得我可能在这里缺少一些小东西，但是对于我一生，我无法弄清它到底是什么。

Answer 1

如果glue::glue("{choice} is not a valid choice. Please choose from: {allowed_choices}")是组件内部的方法，则必须获取getCode：

instance

Answer 2

我经历了类似的斗争，最终这就是我要做的事情：

import { Example } from './example.js'

describe('Test example', () => {
  test('renders correctly', () => {
    expect(shallow(<Example />)).toMatchSnapshot()
  })
})

这将创建快照，但是您可以轻松地将其修改为想要的快照。

注意：我使用的是笑话^ 24.9.0，酶^ 3.10.0，酶-适配器反应16 ^ 1.14.0。

如何使用Enzyme和Jest创建组件的浅层渲染？

2 个答案: