在编写 React 应用的时候,可以同时创建一些相应的测试,这些测试的作用就是检查我们编写的东西是否按照我们预期的那样运行。
在这个使用 create-react-app 命令创建的 React 项目里面,有一个测试文件,也就是 src 下面的 App.test.js,这个测试文件里写了一个测试,测试的东西就是 App 这个组件。这个测试就是检查了一下 App 组件里是否包含 learn react 文本。
项目里的 test 命令会自动查找这些测试文件,然后运行它们,.test.js 结尾的文件会被认为是测试文件。
回到终端,新建一个标签,然后可以运行一下项目的测试,执行一下 npm run test,如果想要运行项目里全部的测试,可以输入 a ,再按一下回车。
这里会显示执行了 src/App.test.js 这个测试文件里的测试,状态是 PASS,表示当前项目通过了这个文件里的所有的测试。
回到项目,打开 App.js,修改一下这个组件里的这个链接的文本,比如改成 ninghao.net,链接的地址可以改成 https://ninghao.net 。再观察一下运行测试的这个终端标签,因为当前使用了 watch 模式,所以测试文件有变化以后会自动运行测试。这样运行的结果显示有一个测试有问题。
这个有问题的测试就是 App.test.js 文件里的 renders learn react link 这个测试,这个测试会检查 App 组件里是否包含Learn React 文本 ,我们刚才把 Learn React 改成了 ninghao.net,所以这个测试就失败了。
如果想让项目通过测试,可以修改 App 组件,也可以修改这个测试文件,打开 App.test.js,修改一下这个测试,标题可以改成 显示 ninghao.net 链接,要查找的文本改成 ninghao。
再观察一下测试的结果,这回项目就又通过了全部的测试。