快照测试不起作用Jest Reactjs

Question

运行快照测试时失败。

在我正在测试的组件下面。

function Footer() {
  const windowWidth = useWindowSize().windowWidth;
  return (
    <footer
      style={{
        minWidth: windowWidth,
      }}
    >
      Made by XXX
    </footer>
  );
}
export default Footer;

这是我写的测试

describe('Footer', () => {
  it('renders as expected', () =>{
    const tree = TestRenderer.create(<FooterView/>).toJSON();
    console.log(tree);
  });
});

这是我收到的错误。

Test suite failed to run
    SyntaxError: D:\MyProGit\frontend\src\__tests__\Footer.test.js: Unexpected token (8:37) at Parser.raise (C:/Users/user/AppData/Roaming/npm/node_modules/jest-cli/node_modules/@babel/parser/src/parser/location.js:41:63)

Jest被添加到devDependencies中的项目中，而react-test-renderer被添加到package.json中的常规依赖中。可能有问题吗？

{
  "dependencies": {
    "react": "^16.12.0",
    "react-test-renderer": "16.12.0",
  },
  "devDependencies": {
    "jest": "24.9.0"
  }
}

Answer 1

尝试一下：

describe('Footer', () => {
  it('renders as expected', () => {
    const component = shallow(<FooterView />);
    expect(component).toMatchSnapshot();
  });
});